|
JavaScript - Retain Div Style After Submit
Hello ,,,
I have a a php form where there a drop down list and a text box which is show and hide based on drop down list select value. This part work perfectly with js Code: <script type="text/javascript">
function showfield(name){
if(name != 'High School')
document.getElementById('div1').style.display="block";
else
document.getElementById('div1').style.display="none";
}
function hidefield() {
document.getElementById('div1').style.display='none';
}
<script>
<body onload = "hidefield()">
<select name="education" size="1" class="text" id="education" onchange="showfield(this.options[this.selectedIndex].value)">
The problem is when I click submit and the validation appear the div also hide ,,, I want to retain the style of the div after submit to be as it was before submit... meaning if it was appearing then it should still appear after submit coz there is validation on it as well. Hope I can found an answer coz Im trying since a week Similar TutorialsI'm using a plugin in Wordpress that checks for mobile browsers and sets a variable to "true" if a mobile browser is being used. I have a script I want to use on the same page where I'd like to use that variable rather than have to redo the check again. Is it possible to make a variable in one script global so that it can be used in a separate script on the same page? Greatly simplified, I mean ... Code: <script type="text/javascript"> var A = 1; </script> <script type="text/javascript"> Do something with A; </script> <?php session_start(); include_once "../c-library/errorcheck.inc.php"; function viewForm($input,$errors){ //$array[] = $var; $num_days= array("1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21 ","22","23","24","25","26","27","28","29","30","31"); $num_months = array(1=>"Jan",2=>"Feb",3=>"Mar",4=>"Apr",5=>"May",6=>"Jun", 7=>"Jul",8=>"Aug",9=>"Sept",10=>"Oct",11=>"Nov",12=>"Dec" ); $gender = array("Male","Female"); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Register</title> <script src="reload_vals.js" type="text/javascript"></script> <style media="all"> table{ table-layout:auto; width:auto;} th{ text-align:right;} td #err{ color:#FF0000; font-weight:bold;} </style> </head> <body> <form action="<?php echo $_SERVER['PHP_SELF']?>" method="post" > <h3><font face="Georgia" color="#000066" size="+2">Registeration</font></h3> <?php if (count($errors) > 0): echo "<p style='color:#ff0000'>*The following errors ocurred:</p>"; endif; ?> <table width="" border="1"> <tr> <th scope="row">Firstname:</th> <td><input name="fname" type="text" id="fname" size="28" value="<?php echo htmlentities($input['fname'])?>" /></td> <td id="err"><?php echo $errors['fname'] ?></td> </tr> <tr> <th scope="row">Lastname:</th> <td><input name="lname" type="text" id="lname" size="28" value="<?php echo htmlentities($input['lname'])?>" /></td> <td><?php echo $errors['lname'] ?></td> </tr> <tr> <th scope="row">Date of Birth:</th> <td> <select name="days" size="1" id ="days" > <option value='-------'>--Day--</option> <?php /* day starts here*/ (array)$num_days; foreach ($num_days as $day): printf("<option value=\"%s\" %s>%s</option>",$day,($days==$day ? "selected='selected'" : ""), $day); endforeach; /* day ends and months start here*/ ?> </select> <select name="" size="1" id =""> <?php /* month ends and starts here*/ ?> </select><select name="" size="1" id =""> <?php ?> </select> <br /><small style="text-align:center; color:#006600;">dd-mm-yyy</small> </td> <td><?php echo $errors['date'] ?></td> </tr> <tr> <th scope="row">Sex:</th> <td> <select name="" size="1" id =""> <?php /* Sex selection starts here;*/ /* Sex selection starts here; */ ?> </select></td> <td><?php echo $errors['sex'] ?></td> </tr> <tr> <th scope="row">Email:</th> <td><input name="email" type="text" id="email" size="28" value="<?php echo htmlentities($input['email']) ?>"/></td> <td><?php echo $errors['email'] ?></td> </tr> <tr> <th scope="row">Password:</th> <td><input name="password" type="password" id="password" size="28" value="<?php echo htmlentities($input['password']) ?>"/></td> <td><?php echo $errors['password'] ?></td> </tr> <tr> <th scope="row">Comfirm Password:</th> <td><input name="password2" type="password" id="password2" size="28" value="<?php echo htmlentities($input['password2']) ?>"/></td> <td> </td> </tr> <tr> <th scope="row"> </th> <td> </td> <td> </td> </tr> <tr> <th scope="row">I agree:</th> <td><input name="agree" type="checkbox" id="agree" value="<?php echo $input['agree']='agree'?>" /></td> <td><?php echo $errors['agree'] ?></td> </tr> <tr> <th scope="row"><input name="action" type="hidden" id="submitted" value="TRUE" /></th> <td><input name="add_newuser" type="submit" id="submit" value="I accept, Register me" /></td> <td> </td> </tr> </table> </form> </body> </html> <?php } function register_user($input){ include "../c-library/database.inc.php"; // $input = $_REQUEST; $input['fname'] = mysql_escape_string(stripslashes($input['fname'])); $input['lname'] = mysql_real_escape_string(stripslashes($input['lname'])); //$input['day'] $input['date'] = $input['year'].''.$input['month'].''.$input['day']; $input['sex'] = $input['sex']; $input['email'] = mysql_real_escape_string($input['email']); $input['password'] = mysql_real_escape_string(md5($input['password'])); $input['uid'] = uniqid(rand(16,32),true); $qr ="insert into users(id,Firstname,Lastname,Date_of_Birth,Sex,Email,Password,Userid) values('null','$input[fname]','$input[lname]','$input[date]','$input[sex]','$input[email]','$input[password]','$input[uid]')"; $results = mysql_query($qr,$sdayb); return $results; mysql_close($sdayb); echo "thanks";//header("Location: thankyou.html"); } /*ex. user enters - 19/11/1980 $var = explode('/', '19/11/1980'); $sdayd = $var[0]; $mm = $var[1]; $yyyy = $var[2]; */ if(isset($_POST['add_newuser'])): $inputs = $_POST; $setErrors = array(); if(!check_formerr($inputs, $setErrors)): viewForm($inputs, $setErrors); else: register_user($inputs); endif; else: viewForm(null, null); endif; ?> I probably have gone about this all wrong since I am a complete noobe, but if someone could point me in the right direction I would be very thankful. Here is the situation. What works: I have a drop menu that is being generated by a PHP/MYSQL script, when you choose an option the onchange event is triggered and runs a function that sends the value to a php script so a graphical image can be generated and saved with a random file name. The randomly generated image name is sent back as an XML response and then image is displayed with src The Problem: I need to be able to have a function store the value from the onchange event and run again when the page refreshes. As of right now, when the page refreshes the image is gone. I have attempted to do this with cookies, but not exactly sure how I will do this and I have finally decided to ask for help. I hope my explanation is not confusing, please let me know if you need more info or if you need to see my code. Ok, came up with a work around to my previous problem, however I now have a result that I cannot explain. Here is the code: Code: <FORM NAME="Calc">
<TABLE BORDER=4>
<TR>
<TD>
<INPUT TYPE="text" onkeydown="if (event.keyCode == 13) {Calc.Input.value = eval(Calc.Input.value)}" NAME="Input" Size="26">
<br>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="button" NAME="one" VALUE=" 1 " OnClick="Calc.Input.value += '1'">
<INPUT TYPE="button" NAME="two" VALUE=" 2 " OnCLick="Calc.Input.value += '2'">
<INPUT TYPE="button" NAME="three" VALUE=" 3 " OnClick="Calc.Input.value += '3'">
<INPUT TYPE="button" NAME="plus" VALUE=" + " OnClick="Calc.Input.value += ' + '">
<br>
<INPUT TYPE="button" NAME="four" VALUE=" 4 " OnClick="Calc.Input.value += '4'">
<INPUT TYPE="button" NAME="five" VALUE=" 5 " OnCLick="Calc.Input.value += '5'">
<INPUT TYPE="button" NAME="six" VALUE=" 6 " OnClick="Calc.Input.value += '6'">
<INPUT TYPE="button" NAME="minus" VALUE=" - " OnClick="Calc.Input.value += ' - '">
<br>
<INPUT TYPE="button" NAME="seven" VALUE=" 7 " OnClick="Calc.Input.value += '7'">
<INPUT TYPE="button" NAME="eight" VALUE=" 8 " OnCLick="Calc.Input.value += '8'">
<INPUT TYPE="button" NAME="nine" VALUE=" 9 " OnClick="Calc.Input.value += '9'">
<INPUT TYPE="button" NAME="times" VALUE=" x " OnClick="Calc.Input.value += ' * '">
<br>
<INPUT TYPE="button" NAME="clear" VALUE=" C " OnClick="Calc.Input.value = ''">
<INPUT TYPE="button" NAME="zero" VALUE=" 0 " OnClick="Calc.Input.value += '0'">
<INPUT TYPE="button" NAME="DoIt" VALUE=" = " OnClick="Calc.Input.value = eval(Calc.Input.value)">
<INPUT TYPE="button" NAME="div" VALUE=" / " OnClick="Calc.Input.value += ' / '">
<br>
</TD>
</TR>
</TABLE>
</FORM>
In order to get the 'Enter' button to function the same as pressing the '=' button, I added the keyCode event. Now my problem is that when you press the 'Enter' key, the result is displayed int the 'Input' text field briefly and then is cleared. How can I keep the result static in the text box? Hi, I have a form that when you click submit gives a warning box asking if to continue code below Now when I type in the text field and press enter it doesn't submit nor does it pop up the warning box, how would I do this Code for submit button Code: <script LANGUAGE="JavaScript">
<!--
function submitMyForm()
{
var agree=confirm("ARE YOU SURE ?");
if (agree)
return true ;
else
return false ;
}
// -->
</script>
Code: <form action="admin-delete.php" method="post" name="cp_delete" id="cp_delete"> <input type="text" name="cp_delete_bg" id="cp_delete_bg"> <input type="submit" name="submit" value="submit" onclick="return submitMyForm()"/> </form> if I have an html page that uses the <style> or a <link> to call a style sheet these properties aren't available to JavaScript is there a good way to access them? eg Code: <html>
<head>
<title>expandable text area</title>
<style type="text/css">
#expandable{
height: 100px;
}
</style>
</head>
<body>
<form>
<textarea id="expandable" cols="30" rows="10"></textarea>
</form>
</body>
<script type="text/javascript">
document.getElementById('expandable').addEventListener('click',function(){
if(!this.style.height){
this.style.height = this.scrollHeight+'px';
}
alert(this.style.height);
}, true);
</script>
</html>
In this example I have the height set but I cannot access it since it is not declared in the style attribute of the html element I've got the following 2 fields in my form: <input type="file" name="filename" id="filename" value="filename"> <input type="submit" name="submit" value="Upload Image" /> Now I want to hide both of them as soon as the submit button is pressed. Problem is that I'm a javascript noob and I can't find it with google :S Can someone help me? I have created some online software which uses form data to submit to another page. The problem is that I have other submit buttons in the same form which submit to different pages (depending on which button is pressed). The first submit button works fine but all the others only work once. Code: <input class="cssbutton" type='submit' value='Button1' onclick="wbform.action='page1.php'; target='mainFrame'; return true;"> <input class="cssbutton" type='submit' value='Button2' onclick="wbform.action='page2.php'; target='_blank'; return true;"> <input class="cssbutton" type='submit' value='Button3' onclick="wbform.action='page3.php'; target='topFrame'; return true;"> <input class="cssbutton" type='submit' value='Button4' onclick="wbform.action='page4.php'; target='topFrame'; return true;"> <input class="cssbutton" type='submit' value='Button5' onclick="wbform.action='page5.php'; target='_blank'; return true;"> <input class="cssbutton" type='submit' value='Button6' onclick="wbform.action='page6.php'; target='_blank'; return true;"> Any ideas my friends? Hi all Is using the real form submit button a problem in any way? Can it actaully send a form when a person uses 'enter' in a text field. When I use this submit, it triggers my validation which is great. Code: <input type="submit" value="OnSubmit validate" /> However this way doesn't seem to trigger my validation although It may solve the above form send problem (if that realy exists). How do I get it to act the same as real submit so it will trigger validation like onsubmit above? Code: <input type="button" value="Send Feedback" onclick="this.form.submit()" /> LT does any of that make sense? all ideas helpful and appreciated Hi all, I'm designing something to addon to an existing product. I'm struggling with some javascript problems. I want to submit a hidden field when you click on an image button, rather than it being an actual submit button. It's going to submit the value "1" to a PHP page, but I don't want it to actually have to GO to the PHP page, just submit it within the webpage. Is this possible? Thanks I am trying to auto submit a login form remotely using .submit() . It's submitting, but for some reason if I use submit() the login isn't processing. However, if I turn off the auto submit and use an actual submit button it logs in just fine. Now, in the form tag there is a call onsubmit for some validation, does .submit() trigger that form onsubmit="" function? Is there something that happens differently when a user clicks a button verses the .submit(). Thanks! Paul hi internet! I got a problem here, there are three 'onmouseover' event, in the first, I put the style in the inline,it works; but the others don't work when use css. how to get it work without inline style ? Quote: <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> div{width: 100px; height: 30px;margin-bottom: 20px;} .blue{background:blue;} .green{background:green;} </style> </head> <script type="text/javascript" > function tdcc(tdcolor){ document.getElementById("x").style.color=tdcolor.style.backgroundColor; } </script> </head> <body> <div style="background:red;" onmouseover="tdcc(this)"></div> <div class="blue" onmouseover="tdcc(this)"></div> <div class="green" onmouseover="tdcc(this)"></div> <br /><br /> <textarea id="x">sdfsdgsdfsdfsdsdfdsfsdfsdf</textarea> </body> </html> Hi, I am trying to remove the padding-bottom from the last 2 <li> in my page using JQuery, here is the code I have written so far: Code: <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$("#content .photos li").eq(-2).css("padding-bottom", "0px");
</script>
Hi im a newbie to java so please don't laugh. And apologies in advance for my English. When i open my page the src of the iframe is home.html. Home.html is empty and its in the way of the interface of my .swf file. My swf triggers the iframe to change into 50 different URL. So at the beginning the iframe should be gone. But whenever the src changes it should come back. I tried it by changing the height of the iframe. But nothing changes. here is a preview http://boyswithbeards.net/xrc/pres/ I have something like this. <iframe name="MoinkOriginal" id="MoinkOriginal" src="home.html" frameborder="0" scrolling="auto"></iframe> <script type = "text/javascript"> var iframe = document.getElementById('MoinkOriginal'); if (src='home.html') { var iframeElement = parent.document.getElementById('MoinkOriginal'); iframeElement.style.height = "0px"; // or use px iframeElement.style.width = "500px"; // or use px iframeElement.style.marginHeight = "-563px"; // or use px iframeElement.style.marginLeft = "750px"; // or use px } else { var iframeElement = parent.document.getElementById('MoinkOriginal'); iframeElement.style.height = "300px"; iframeElement.style.width = "500px"; iframeElement.style.marginHeight = "-563px"; // or use px iframeElement.style.marginLeft = "750px"; // or use px } </script> Thank you for helping me. Im stuck on this for days. Hi all, On this page http://piximory.com/templates/locus/dark/bg2.html if you click the portfolio link in main nav you are presented with the various thumbnail images for the projects, if you select a category the thumbnails organise themselves using jquery, does anyone know what type of jquery style this is? Thanks in advance! Kyle hello, I need some help. I created a table that has some drop down boxes and based on the user selection it will show the text on the bottom, the plain drop down box has (nomal/bold/italic/bold-italic) the large drop down box has (large/medium/small) can someone please guide me or provide me a little demo on how to get this working?> thanks May I put some style to an alert box ? for example . <html> <head> <style> #box { font-style: strong } </style> <script lenguaje="javascript"> var age; age = prompt("Type age : ", ""); if (edad<18) { <div id=box alert("Underage, get out !")> </div> } else { alert("You are Welcome, surf it it"); } </script> </head> </html> Thanks Hey, I'm a beginner in javascript and I have a problem setting up a tag. I want to change the background color ONLY if it is #d0d0d0, so I made up these scripts: Code: <b class="nav1" id="nav1" onclick="highlightnav1()" onmouseover="overnavigation(this)" onmouseout="outnavigation(this)">Link 1</b>
<b class="nav2" id="nav2" onclick="highlightnav2()" onmouseover="overnavigation(this)" onmouseout="outnavigation(this)">Link 2</b>
<b class="nav3" id="nav3" onclick="highlightnav3()" onmouseover="overnavigation(this)" onmouseout="outnavigation(this)">Link 3</b>
<b class="nav4" id="nav4" onclick="highlightnav4()" onmouseover="overnavigation(this)" onmouseout="outnavigation(this)">Link 4</b>
<b class="nav5" id="nav5" onclick="highlightnav5()" onmouseover="overnavigation(this)" onmouseout="outnavigation(this)">Link 5</b>
Code: function overnavigation(obj){
if (obj.style.backgroundColor='#d0d0d0'){
obj.style.backgroundColor='#e0e0e0';
}
}
function outnavigation(obj){
if (obj.style.backgroundColor='#e0e0e0'){
obj.style.backgroundColor='#d0d0d0';
}
}
This doesn't work, and because I don't have mush experience I don't know how to fix it. Could anybody help me? ------------ Sorry for my bad english, I'm Dutch I have several checkboxes with labels, all laid out in a table. All of the checkboxes have a class of "hide" and through CSS I have them hidden. Then with javascript it's set up so that when a user clicks on the label for the checkbox the background of the TD that contains it changes colors to indicate that that item is selected. Works great except for those browsers that have javascript disabled. Then the form is useless. I'm thinking now it would be better to use javascript to apply the "hide" class to the checkboxes. That way if it's disabled then the checkboxes will still be visible and the form useable. I'm just not sure how to go about doing that (not much of a javascript ninja). Can anyone advise me on how to do that? I'd really appreciate the help! Thanks! I need to write a script that will search for a style attribute that matches "top: 10px;". If a match is found, it will then edit the value of that input box to "hello". So for example a webpage has: Code: <input style="top: 1px;" maxlength="20" type="text"> <input style="top: 100px;" maxlength="20" type="text"> <input style="top: 10px;" maxlength="20" type="text"> The script would edit the value of the 3rd one to "hello". I'm a beginner to javascript so my code may not make sense but bear with me please. Code: var styles = document.getElementsByTagName("input").attributes.getNamedItem("Style")
for (var i = 0; i < styles.length; ++i){
if (styles.value == "top: 179px; left: 348px; width: 222px;"){styles.value="hello"}
}
|
|||||||