JavaScript - How Do I Use Onchange To Reset Field Value
Hello guys
I have a website which uses several forms to input data, each form contains fields for the user to complete and at the end of the each form the user has the option to proceed or go back. The problem is, on form1 there is a drop down box which determines the content of subsequent forms but when a user partially completes form2 but then goes back to form1 and changes the drop down box selection, the onchange function reloads the subsequent forms but it does not clear the previous form2 values so an error is generated because those inputs are not required with the change made to the drop down box. I have tried setting the ids to zero using getelementbyid on form1 but it does not seem to work presumably because the ids are on form2 not form1? Any thoughts would be much appreciated. Similar TutorialsHowdy. Have an asp.net form where the textboxes have had the onblur attribute added. Though VS2008 still barks it's an invalid attribute... However, my problem is primarily w/the txtFICODate field. When testing using 10/10/2009 in this field, the code displays the appropriate msg based on format param. However, on exiting the isValidDate function in debug mode, I see that the code does not stop at the txtFICODate html but moves to the txtDOBB isValidDate function. Here the param is MM/DD/YYYY and it loops back into the function but now displays a different format message. Previous code (ValidateFICODate(obj)) below also caused the same looping error. Debugging the same code with the txtDOBB field (10/10/56), I see it enter the function, display the appropriate message and exit. However, in debug, the code comes back to the function and then selects the field contents. Appreciate any suggestions/comments on how to fix problem so code stops at the txtFICODate field . Using xp Pro SP3, visual studio 2008 (c#). in the process of writing this, I searched other post here related to onblur + loop. So changed the event to onchange...and while the looping does not now occur, the focus just moves to the next field. Huh? Thanks, Rey Code: On page load code(if (!isPostBack)): txtFICODate.Attributes.Add("onblur", "isValidDate(this, 'MM/DD/YY');"); txtDOBB.Attributes.Add("onblur", "isValidDate(this, 'MM/DD/YYYY');"); txtDOBC.Attributes.Add("onblur", "isValidDate(this, 'MM/DD/YYYY');"); Code: <asp:TextBox ID="txtDOBB" runat="server" Font-Bold="true" Text="" Columns="10" TextMode="SingleLine" AutoPostBack="false" onblur="return isValidDate(this, 'MM/DD/YYYY');" Width="120px"></asp:TextBox> <asp:TextBox ID="txtDOBC" runat="server" Font-Bold="true" Text="" Columns="10" TextMode="SingleLine" AutoPostBack="false" onblur="return isValidDate(this, 'MM/DD/YYYY');" Width="120px"></asp:TextBox> <asp:TextBox ID="txtFICODate" runat="server" Font-Bold="true" AutoPostBack="false" onblur="return isValidDate(this, 'MM/DD/YY');" Text="" Columns="6" TextMode="SingleLine" Width="120px" ></asp:TextBox> Code: function isValidDate(ctrl, fmt) { // retrieved 9/11/09 // from http://www.dotnetspider.com/resources/20790-Validatin-date-MM-DD-YY-Format-using-javascript.aspx // modified to pass in format (mm/dd/yy, mm/dd/yyyy so msg is appropriate if incorrect // also removed - option for dates, i.e. 09-11 var dateStr = ctrl.value; var datePat; //var datePat = /^(\d{1,2})(\/)(\d{1,2})\2(\d{2}|\d{4})$/; if (fmt.toString().toUpperCase() == 'MM/DD/YY') { datePat = /^(\d{2})(\/)(\d{2})\2(\d{2})$/; } if (fmt.toString().toUpperCase() == 'MM/DD/YYYY') { datePat = /^(\d{2})(\/)(\d{2})\2(\d{4})$/; } var matchArray = dateStr.match(datePat); // is the format ok? if (matchArray == null) { if (fmt.toString().toUpperCase() == 'MM/DD/YY') { alert("Invalid date format.\n" + "Please enter the date in the MM/DD/YY format (example: 1/15/08).") ctrl.focus(); ctrl.select(); return false; } if (fmt.toString().toUpperCase() == 'MM/DD/YYYY') { alert("Invalid date format.\n" + "Please enter the date in the MM/DD/YYYY format (example: 1/15/2008).") ctrl.focus(); ctrl.select(); return false; } } // match breaks date down month = matchArray[1]; // parse date into variables day = matchArray[3]; year = matchArray[4]; if (month < 1 || month > 12) { // check month range alert("Month must be between 1 and 12."); return false; } if (day < 1 || day > 31) { alert("Day must be between 1 and 31."); return false; } if ((month == 4 || month == 6 || month == 9 || month == 11) && day == 31) { alert("Month " + month + " doesn't have 31 days!") return false } if (month == 2) { // check for february 29th var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)); if (day > 29 || (day == 29 && !isleap)) { alert("February " + year + " doesn't have " + day + " days!"); return false; } } return true; // date is valid } // **************************************************** function ValidateFICODate(obj) { var dateFormat = 'MM/DD/YY'; var isSuccess = false; var objID = obj.id; var hidFICODate = document.getElementById('hidFICODate').value; if (obj.value == '') { alert('Please enter FICO date.' + '\n' + 'Required field.'); //document.frmCustInfo + '.' + obj.id + '.' + focus(); obj.focus(); obj.select(); return false; } // now check if valid date isSuccess = isValidDate(obj, dateFormat); if (!isSuccess) { obj.focus(); obj.select(); return false; } if (isSuccess) { if (obj.value != hidFICODate) { document.getElementById('hidFICODate_Updated').value = 'UPDATED'; document.getElementById('hidFICODate').value = obj.value; } } return isSuccess; } I have a multiple fields on my page and wish to have a reusable javascript to update the previous box with the selction made. how would this be done Code: <form name="form1" method="post" action=""> <p> <input type="textone" name="textfieldone" id="textfieldone"> </p> <p> <select name="selectone" onChange="UpdatePreviousField()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> <input type="texttwo" name="textfieldtwo" id="textfieldtwo"> </p> <p> <select name="selecttwo" onChange="UpdatePreviousField()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </p> <p> </p> </form> Hello All I was hoping you guys can help. I have 3 radio fields which when clicked on I want it to change the background colour of the table its within. The radio fields have the same name so only one can be selected at once. At the moment its changing the background yellow but if I click another radio field its not resetting back to normal (white). Im not sure how to achieve this is javascript... Here is the code im using now: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript" language="javascript"> function swapColor(oCheckbox) { var pop = oCheckbox, checkedcolor = 'yellow'; while (pop.nodeType != 1 || pop.nodeName.toLowerCase() != 'table') pop = pop.parentNode; if (typeof pop.oldcolor == 'undefined') pop.oldcolor = pop.style.backgroundColor; pop.style.backgroundColor = (oCheckbox.checked) ? checkedcolor : pop.oldcolor; } </script> </head> <body> <table> <tr> <td> <input type="radio" name="change" value="0" onchange="swapColor(this) checked" />11111111 </td> </tr> </table> <table> <tr> <td> <input type="radio" name="change" value="1" onchange="swapColor(this)" />22222222 </td> </tr> </table> <table> <tr> <td> <input type="radio" name="change" value="2" onchange="swapColor(this)" />33333333 </td> </tr> </table> </body> </html> I would appreciate any help! Thanks! Hi i have a problem, i've been trying to fix this for the whole day pls see my code below Code: for ($o = 0; $o <= $totalclass; $o++) { for($i = 1; $i <= 45; $i++) { if ($_SESSION['classification'][$o] == $i) { $sql2="SELECT ClassDesc FROM tblclass WHERE ClassID = '$i'"; $result2=mysql_query($sql2); // If successfully queried if($result2) { while ($row2 = mysql_fetch_assoc($result2)) { $ClassDesc2 = $row2['ClassDesc']; } } //echo $ClassDesc2; ?> <tr> <td bgcolor="FAFAF6" class="small" valign="top">Class <? echo $i; ?></td> <input type="hidden" name="<? echo "classid[]"; ?>" value="<? echo $i; ?>"> <td bgcolor="FAFAF6"> <textarea name="<? echo "specification[]"; ?>" COLS="50" ROWS="6" class="small" wrap="virtual" tabindex="<? echo $i; ?>"><? echo $ClassDesc2;?></textarea> <input type="button" value="Reset" onclick="window.reset();" name="reset"> </td> </tr> <? } } } i've trying to create a button or image to reset one textarea (from whole array) and so far i've been unsuccessful. i've seen this on other website and i know it is possible to do this, pls help! i want to rest IE seting like font size and zoom when user enter my site how can i do that
hiiii, im new to javascripts . Can anyone help me to know that a javascript which is validating a phone number accepts only digits but if the text field is left empty it should accept the entry as an empty entry.... plz share knowledge u will be more knowledgeable Hi folks. Looking to see if anyone could tell me where I'm going wrong with this script... I'm trying to have a field automatically filled with the day of the week ("Monday", "Tuesday", "Wednesday" and so on), upon the user selecting a date from the datepicker jQuery. If this isn't clear, I'll clarify further down the page. Here is the script: Code: <script type="text/javascript"> jQuery(document).ready(function($){ $('input[name="item_meta[428]"]').change(function(){ var d = $('input[name="item_meta[428]"]').val(); var n = new Date(d).getDay(); if(n == 0) val v = 'Sunday'; else if(n == 1) val v = 'Monday'; else if(n == 2) val v = 'Tuesday'; else if(n == 3) val v = 'Wednesday'; else if(n == 4) val v = 'Thursday'; else if(n == 5) val v = 'Friday'; else if(n == 6) val v = 'Saturday'; $('input[name="item_meta[429]"]').val(v).change(); }); }); </script> I'm basically trying to say, if the user selected today (15/05/2012) in the field 428 it would fill the field 429 with "Tuesday". Again, if the user selected 18/05/2012 in the field 428 then it would automatically fill field 429 with "Friday". It's being done to work in conjunction with a wordpress plugin called Formidable Pro hence the item_meta[428] etc. Any assistance would be greatly appreciated. Sam. Hello, The following web page is an essay, but there is JavaScript code in the head area: http://www.pinyinology.com/content/content3c.html You can see the 'Press F5 to reset' command, and please try it to see what happens. What I like is to create another command 'Click here to reset'. Therefore, there will be two commands for the reset task. Then it becomes: Click here or press F5 to reset. The press F5 stuff in the code is as follows; Code: //Typewriting code message='<span id="inTxt">wen<sup>2</sup></span>'; pos=0; maxlength=message.length+1; function writemsg() { if (pos<maxlength) { txt=message.substring(pos,0); document.getElementById('edit').innerHTML=txt; pos++; timer=setTimeout('writemsg()', 20); } } //Typewriting code2 own addition message2='<span id="inTxt2">wen<sup>2</sup>闻. ven<sup>2</sup>:文纹. win<sup>2</sup>:蚊. vin<sup>2</sup>:雯.'; pos=0; maxlength=message2.length+1; function writemsg2() { if (pos<maxlength) { txt=message2.substring(pos,0); document.getElementById('listing').innerHTML=txt; pos++; timer=setTimeout('writemsg2()', 20); } } Below is the complete code. It may help. Code: function KeyDown() { var key=window.event.keyCode; if (key==8) { window.event.returnValue=false; var r=document.selection.createRange(); r.collapse(false); r.move("character",-1); r.collapse(false); var p=r.parentElement(); if (p.nodeName.toLowerCase()=="sup"){ p.outerHTML=""; return; } window.event.returnValue=true; } } function KeyPress() { var key=window.event.keyCode; window.event.returnValue=false; if (key>=48 && key<=57) { var r=document.selection.createRange(); r.collapse(false); var d=r.duplicate(); d.moveStart("character",-1); var c=d.text; var p=d.parentElement(); var b=/[A-Za-z]/.test(c); //b=b || p.nodeName.toLowerCase()=="sup"; if (b) { d.collapse(false); var s=String.fromCharCode(key); s=(p.nodeName.toLowerCase()=="sup")? s:"<SUP>"+s+"</SUP>"; d.pasteHTML(s); d.collapse(false); d.select(); return; } } if (!(key in {37:1,38:1,39:1,40:1})) { var r=document.selection.createRange(); r.collapse(false); p=r.parentElement(); if (p.nodeName.toLowerCase()=="sup") { var s=p.outerHTML; p.removeNode(true); r.pasteHTML(s); r.collapse(false); r.select(); } } window.event.returnValue=true; } //Below for status line myMsg = " Happy Chinese typing !" var i = 0; function scrollMsg() { window.status = myMsg.substring(i,myMsg.length) + myMsg.substring(0,i); if (i < myMsg.length) { i++ } else { i = 0 } setTimeout("scrollMsg()",120) } function stoptimer() { clearTimeout(timer); } //Following function is for the appreciation window function newWindow() { catWindow = window.open('appr2.html', 'catwin','width=395,height=235, scrollbars=yes'); catWindow.focus(); } //Typewriting code message='<span id="inTxt">wen<sup>2</sup></span>'; pos=0; maxlength=message.length+1; function writemsg() { if (pos<maxlength) { txt=message.substring(pos,0); document.getElementById('edit').innerHTML=txt; pos++; timer=setTimeout('writemsg()', 20); } } //Typewriting code2 own addition message2='<span id="inTxt2">wen<sup>2</sup>闻. ven<sup>2</sup>:文纹. win<sup>2</sup>:蚊. vin<sup>2</sup>:雯.'; pos=0; maxlength=message2.length+1; function writemsg2() { if (pos<maxlength) { txt=message2.substring(pos,0); document.getElementById('listing').innerHTML=txt; pos++; timer=setTimeout('writemsg2()', 20); } } function stoptimer() { clearTimeout(timer); } Thanks in advance for your help. <script type="text/javascript"> function resetForm() { //noofrow = document.getElementById("NoOfRow").value; //form = document.getElementByID('form1'); //noofrow.reset(); d1=document.getElementById("textfield").value; d1=""; d1.reset(); return false; } </script> </head> <body> <form id="form1" name="form1" method="post" action=""> <p> <label> <input type="text" name="textfield" id="textfield" /> </label> </p> <p> <label> <input type="text" name="textfield2" id="textfield2" /> </label> </p> <p> <label> <input type="text" name="textfield3" id="textfield3" /> </label> </p> <p> <label> <input type="Submit" name="button" id="button" value="Submit" onclick="resetForm()" /> </label> </p> <p> </p> </form> how do i reset first input box ..............other data should be remain as follows................ plz help me to do this I have a text field, call it income, that when the input is > 0 I need to dynamically show the next text box, and if it is blank hide the next text box. I would like to use onBlur but can't seem to get it to work. Can I do this? Help So I am working on a project that converts fahrenheit to celcius, or the other way around. So when I click on the radio button for fahrenheit to celcius, it disables the celcius textbox, and the celcius to fahrenheit radio button disables the fahrenheit text box. What I can't figure out is how to get my radio buttons to reset the form to be able to enter another conversion to be made. What it does is locks up both text boxes so that I can't enter anything at all after the first time I do it. Code: <body> <div id="content"> <h1>Convert temperature</h1> <input type="radio" onclick="reset();document.getElementById('degrees_celcius').disabled=this.checked" name="conversion_type" id="to_celcius" />From Fahrenheit to Celcius<br /> <input type="radio" onclick="reset();document.getElementById('degrees_fahrenheit').disabled=this.checked" name="conversion_type" id="to_fahrenheit" />From Celcius to Fahrenheit<br /> <br /> <form id="foofoo"> <label>Degrees Fahrenheit:</label> <input type="text" id="degrees_fahrenheit" class="disabled" /><br /> <label>Degrees Celcius:</label> <input type="text" id="degrees_celcius" class="disabled"/><br /> <br /> </form> <input type="button" id="convert" value="Convert" /><br /> <br /> </div> </body> Code: var temperature = function (){//This f if($("to_celcius").checked == true) { var far = parseFloat($("degrees_fahrenheit").value ); if(isNaN(far)) { alert("Please enter a valid temperature.") return; } var far_cel =Math.round((far-32) * 5/9); $("degrees_celcius").value = far_cel; }else ($("to_fahrenheit").checked ==true) { var cell = parseFloat($("degrees_celcius").value); if(isNaN(cell)) { alert("Please enter a valid temperature.") return; } var cel_far = Math.round(cell * 9/5 + 32); $("degrees_fahrenheit").value = cel_far; } } function reset()//resets the text box fields { $("foofoo").reset(); } window.onload = function(){ $("convert").onclick = temperature; $("to_fahrenheit").onclick = reset; $("to_celcius").onclick = reset; } hello everyone. I just joined this forum today, so I hope i'm not posting anything against the rules. if I am I will be more than happy to delete this thread. before I post my actual code can somebody please tell me if its okay to do so? the only reason I ask is because it is for a class project. I DID read the rules, but was still unsure if asking for help is okay or not. (because it is for an assignment) I don't want anybody to do the work for me, I just want to know if it is okay for me to ask for some assistance? any help with this would be greatly appreciated. Again, I hope I haven't broken any rules with this request.
I am makeing a dice game and this is how i generate the numbers
Code: var randomnumber1=Math.floor(Math.random()*13) But i have to relaode the page each time to randomize it again. How can i do this with out reloading the page? I am using a button to set the function of. Code: function my_fav_quote_show_optin_form() { if (!empty($_POST['my_fav_quote_email'])) { my_fav_quote_opt_in(); } $out2 = ''; $out = '<form action="" name="myform "method="post" id="requestQuote">'; $out .= '<table style="padding="0px" width="40px">'; $out .= '<tr><td>Name:*</td><td><input type="text" name="my_fav_quote_name" id="my_fav_quote_name"/></td></tr>'; $out .= ''; $out .= '<tr><td>Email:*</td><td><input type="text" name="my_fav_quote_email" id="my_fav_quote_email"/></td></tr>'; $out .= ''; $out .= '<tr><td>Phone:*</td><td><input type="text" name="my_fav_quote_phone" id="my_fav_quote_phone"/></td></tr>'; $out .= ''; $out .= '<tr><td>Event Date(optional):</td><td><input type="text" name="my_fav_quote_date" id="my_fav_quote_date"/></td></tr>'; $out .= ''; $out .= '<tr><td>Estimated Number of Guests(optional):</td><td><input type="text" name="my_fav_quote_guest" id="my_fav_quote_guest"/></td></tr>'; $out .= ''; $out .= '<tr><td>Desired Price Range Per Person (optional):</td><td><input type="text" name="my_fav_quote_rate" id="my_fav_quote_rate"/></td></tr>'; $out .= ''; $out .= '<tr><td style="vertical-align: middle;">Message:<br>(List your special requests, any food allergies , event description , special menu items that are not listed or any other information you think will helpful) </td><td><textarea placeholder="" name="my_fav_quote_message" id="my_fav_quote_message"></textarea></td></tr>'; $out .= ''; $out .= '<tr><td>Security code:*</td><td><img src='.get_bloginfo('wpurl').'/wp-content/plugins/quote-cart/captcha.php?width=60&height=30&characters=5" /></td></tr>'; $out .= ''; $out .= '<tr><td>Input Above Security Code He *</td><td><input type="text" name="security_code" id="security_code" size="5"></td></tr>'; $out .= ''; $out .='<tr><td colspan="2">'; if ( function_exists( 'my_fav_quote_display' ) ){ $out .= my_fav_quote_display(); } if ( function_exists( 'my_fav_quote_display3' ) ){ $out .= my_fav_quote_display3(); } $out .='</td></tr>'; $out .= '<tr><td colspan=2 align=center><input type="submit" value="Request Quote" onclick="return chk_validation()" style="background-color:#000;color:#FFF;padding:5px;margin-top:10px;border:none;cursor:pointer;"/> <input type="button" onclick="formReset()" value="Reset form" /> </td></tr>'; $out .='</table></form>'; echo $out; ?> <script language="javascript" type="text/javascript"> //<![CDATA[ function validate_email(field,alerttxt) { apos=field.indexOf("@"); // alert(apos); dotpos=field.lastIndexOf("."); //alert(dotpos); if (apos<1||dotpos-apos<2) { return false;} else {return true;} } function chk_validation() { if(document.getElementById("my_fav_quote_name") && document.getElementById("my_fav_quote_name").value == '') { alert("Please Enter Name"); document.getElementById("my_fav_quote_name").focus(); return false; } if(document.getElementById("my_fav_quote_email").value == '') { alert("Please Enter Email"); document.getElementById("my_fav_quote_email").focus(); return false; } else { //alert(validate_email(document.getElementById("my_fav_quote_email").value,"Not a valid e-mail address!"); if (validate_email(document.getElementById("my_fav_quote_email").value,"Please enter valid e-mail address!")==false) { alert("Please enter valid e-mail address!"); document.getElementById("my_fav_quote_email").focus(); return false; } } if(document.getElementById("security_code").value == '') { alert("Please Enter Security Code"); document.getElementById("security_code").focus(); return false; } if(document.getElementById("quotes").value == '') { alert("Please add atleast one request quote"); document.getElementById("quotes").focus(); return false; } //return true; } //]]> </script> <?php } can we reset the display functions data when we click on reset button? Hi i have very little javascript experience and need some help, i have made a rest button to reset select forms to there top value using this function ResetForm(){ document.getElementById('canvas').value = 6 ; document.getElementById('acrlyic').value = 10 ; } is there a way to make so instead of having "value = 6;" it would just reset to the option with the smallest value? it will be used on multiple pages were the same name select will have different values on the options sorry for my poor english I have 2 boxfield in my search engine...when i write somthing on my 1st text box and press the clear button it clear me the thing i wrote in the text field.... when i write somthing and drag it from 1st text box to the 2nd and then press the clear button.the letter in the 2nd textfield jump the 1st one.....and doesnt clear herself... what can couse it ? How do I reset selct lists like below. <form> <select size='4' STYLE='width: 164px' MULTIPLE id="num" name='num[]'> <option value='1' selected>1</option> <option value='2' selected>2 </option> <option value='3' selected>3</option> </select> <input type="button" name="reset" > </form> I have this code that when you click a button it will shuffle items in an array then you have 10 seconds to read it then the array items disappear. But I need to figure out how to make it so that you can do something like click another button that will allow you to click the twister drill button again and it will shuffle it heres the code any help would be appreciated Code: <script type="text/javascript"> function myFunction() { var myarray=["red","blue", "yellow", "orange"] myarray.sort(function() {return 0.5 - Math.random()}) var x=document.getElementById("demo"); x.innerHTML=myarray; } </script> <script type="text/javascript"> { var t=setTimeout("alertMsg()",10000); } function alertMsg() { document.getElementById("demo").style.display="none"; } </script> <button onclick="myFunction()">Twister Drill</button> <font size="5"> <p id="demo"></p> </font> http://www.masterclock.com/newContac...help/david.php I have a page with 3 forms. I've got javascript making them appear and disappear with buttons at the top. I mostly copied this guy's form: http://tetlaw.id.au/view/javascript/...eld-validation I added some conditional checkboxes using wform javascript library. my problem is that i need my reset button to a)reset the fields and b)re-hide the conditional fields. It works with the sales form and the catalog form (the catalog from doesn't use the conditional fields) but for some reason the request a quote form is convinced .request isn't a function. Even though it is using the same function as the sales form only it is pushing it's form id to it. what the heck am i doing wrong? And how awful and waste of space is my code? One my website its one index page, putting in content depending on the link (ie ?page=xxxxx) and from that it generats the page name, (Page name - MySite). I also have an AJAX search form working on keyup (kinda like google autosearch). I want it so when i start typing there it changes the title to Search - MySite. Then when its empty revert to what ever it was before. Could someone gimmie a hand doing this? I already have the AJAX coding for the search bar so i can post that if iy would help more. EDIT: Also i need to check if its on the homepage or not, and if not load the homepage (currently done by php include), does javascript have an equivelant of php's include? |