JavaScript - Onchange In Asp.net Form Moves To Next Field
Howdy.
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; } Similar TutorialsHello 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. 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! 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 ladies and gentlemen, I would like to use some event handling on a form, not something I have done before and looking for some assistance. Here is my code: Code: <select name="LocO"> <option value=""></option> <option value="O">Outside</option> <option value="I">Inside</option> </select> <select name="LocA"> <option value=""></option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> <option value="F">F</option> <option value="G">G</option> <option value="H">H</option> <option value="I">I</option> <option value="J">J</option> <option value="K">K</option> </select> <select name="Loc1"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> So what I need to happen, is based on the selection of the first selection box, some of the options of the other selection boxes should not be available. If Outside is selected, everything in LocA should be available, but only up to 4 in Loc1... and if Inside is selected, only up to E should be available in LocA and everything should be available in Loc1. Is this possible? Would appreciate some help making some minor enhancements to a pet adoption form: http://pawsct.org/application.php Problem - Applicants don't read. They answer "No" to the "Agree to Shelter Visit" question, then fill out the looooong application, and get abusive when told that they're not eligible for adoption. They apply from Florida and ignore the warnings about the 90 mile limit. Text notes just don't make enough of an impact. I want to use OnChange to give an alert if someone does not answer "Yes" to agree to a shelter visit (i.e. popup "You must agree to a shelter visit to qualify for an adoption from PAWS") and perhaps a warning message (red text reminder about the 90 mile limit next to the drop-down box) if someone enters a state other than CT. Second problem - I'm a volunteer who doesn't know javascript and can't cobble together a SIMPLE, workable solution from other code samples. Any assistance that you can provide would be most welcome and appreciated. Note: we are planning a redesign of the web site and may do some more sophisticated form validation (e.g. check age, valid e-mail, valid phone) in the future. But for now, we're just looking to check a few key fields for answers that would immediately disqualify an applicant. I'm using onchange display to hide/show form elements depending on the value of a select box. It works perfectly well (I actually really adore it) for one select box, but I have another select box which I'd like to act similarly. Code: <head> <script type="text/javascript"> // <![CDATA[ function display(obj,id1,id2,id3,id4) { txt = obj.options[obj.selectedIndex].value; document.getElementById(id1).style.display = 'none'; document.getElementById(id2).style.display = 'none'; document.getElementById(id3).style.display = 'none'; document.getElementById(id4).style.display = 'none'; if ( txt.match(id1) ) { document.getElementById(id1).style.display = 'block'; } if ( txt.match(id2) ) { document.getElementById(id2).style.display = 'block'; } if ( txt.match(id3) ) { document.getElementById(id3).style.display = 'block'; } if ( txt.match(id4) ) { document.getElementById(id4).style.display = 'block'; } } // ]]> </script> </head><body> <form action="#"> <select name="Stype" onchange="display(this,'oneshot','outtake','multi','chapter');"> <option>Please select:</option> <option value="oneshot">Oneshot</option> <option value="outtake">Outtake</option> <option value="multi">Original Multi-Chapter</option> <option value="drabbles">Drabbles</option> <option value="outline">Outline Preview</option> <option value="chapter">Chapter Preview</option> </select><BR><BR> <div id="oneshot" style="display: none;">Some fields here</div> <div id="outtake" style="display: none;">Some different fields here</div> <div id="multi" style="display: none;">Some other fields here</div> <div id="chapter" style="display: none;">Some more fields here</div> </form> </body> But when I go to add a second select (obj,id1,id2,id3,id4,id5,id6) with new "ifs" and id's, etc and so forth, neither work. Code: <head> <script type="text/javascript"> // <![CDATA[ function display(obj,id1,id2,id3,id4,id5,id6) { txt = obj.options[obj.selectedIndex].value; document.getElementById(id1).style.display = 'none'; document.getElementById(id2).style.display = 'none'; document.getElementById(id3).style.display = 'none'; document.getElementById(id4).style.display = 'none'; document.getElementById(id5).style.display = 'none'; document.getElementById(id6).style.display = 'none'; if ( txt.match(id1) ) { document.getElementById(id1).style.display = 'block'; } if ( txt.match(id2) ) { document.getElementById(id2).style.display = 'block'; } if ( txt.match(id3) ) { document.getElementById(id3).style.display = 'block'; } if ( txt.match(id4) ) { document.getElementById(id4).style.display = 'block'; } if ( txt.match(id5) ) { document.getElementById(id5).style.display = 'block'; } if ( txt.match(id6) ) { document.getElementById(id6).style.display = 'block'; } } // ]]> </script> </head><body> <form action="#"> <select name="Stype" onchange="display(this,'oneshot','outtake','multi','chapter');"> <option>Please select:</option> <option value="oneshot">Oneshot</option> <option value="outtake">Outtake</option> <option value="multi">Original Multi-Chapter</option> <option value="drabbles">Drabbles</option> <option value="outline">Outline Preview</option> <option value="chapter">Chapter Preview</option> </select><BR><BR> <div id="oneshot" style="display: none;">Some fields here</div> <div id="outtake" style="display: none;">Some different fields here</div> <div id="multi" style="display: none;">Some other fields here</div> <div id="chapter" style="display: none;">Some more fields here</div> <BR><BR><BR> <select name="Atype" onchange="display(this,'romance','adventure');"> <option>Please select:</option> <option value="romance">Romance</option> <option value="adventure">Adventure</option> </select><BR><BR> <div id="romance" style="display: none;">Some new fields here</div> <div id="adventure" style="display: none;">Some even newer fields here</div> </form> </body> Is there any way to fuse them and get a second select to work the same? Thanks in advance for the help! Hello, On a simple form, there is a radio button group with two radio buttons, a text box, and a submit button. The first radio button is checked(selected) by default. The text box input has the onChange event handler so that if the text is changed, the second radio button will be checked(selected). The problem is the input radio name contains a hyphen that breaks the JavaScript and the name can not be changed. What is the correct syntax for referencing a hyphenated form input radio name in the onChange event? Here is the form that works correctly with no hyphen in the input radio name: Code: <form name="myFormGood" action="" onsubmit="return false;"> Good Form with no hyphen in radio button name<br> <input name="radio1" type="radio" value="4" checked> First Option<br> <input name="radio1" type="radio" value="5"> Second Option<br><br> Change the text to select the Second Option<br> <input type="text" name="text1" onChange="document.myFormGood.radio1[1].checked = 'true';" size="10" value=" "><br><br> <input type="button" name="submit" value="It Works!"> </form> Here is the form that breaks the JavaScript because it has a hyphen in the input radio name: Code: <form name="myFormBad" action="" onsubmit="return false;"> Bad Form with hyphen in radio button name breaks JavaScript<br> <input name="radio-1" type="radio" value="4" checked> First Option<br> <input name="radio-1" type="radio" value="5"> Second Option<br><br> Change the text to select the Second Option. Nothing Happens.<br> <input type="text" name="text1" onChange="document.myFormBad.radio-1[1].checked = 'true';" size="10" value=" "><br><br> <input type="button" name="submit" value="It Doesn't Work!"> </form> I have the following form working with on onsumbit function, but I would like to change it so that instead of having to click the purchase button to see total price, you only have to change the quanity text box input. I would welcome any help. I just can not seem to get it to work. Code: <script language="javascript" type="text/javascript"> function checkQuantity(frm) { var succesful = false; var numQuantity; numQuantity = parseInt(frm.Quantity.value); var numTotalPrice; if (numQuantity != 0) { numTotalPrice = numQuantity * 4; frm.TotalPrice.value = numTotalPrice; //new String(numTotalPrice); successful = true; } else { alert("Sorry must order more than 0"); successful = false; } return succesful; } </script> Code: <form action="" onsubmit="return checkQuantity(this)" style="width: 193px"> <table cellpadding="4" style="width:111%"> <tr> <td class="style1"> Quanity:</td> <td class="formInputCell"> <input name="Quantity" type="text" style="width: 55px" /></td> </tr> <tr> <td class="style1"> Total Price $ </td> <td class="formInputCell"> <input name="TotalPrice" type="text" style="width: 55px" /></td> </tr> <tr> <td class="style2"></td> <td><input id="Submit1" type="submit" value="Buy Now" class="buttonstyle" /></td> </tr> </table> </form> I've set up a mock registration form page so I can learn a bit about javascript's form validation. (newbie) I want to try to attempt to style the border of a form field green when the user enters the correct info into the form text field and red on all other fields if the user doesnt enter any info into them. When i test it, enter the right info into the username field, leave the others blank, and hit the submit button it styles the username field green ok but it doesnt make the next fields (password and so on) red. Could someone please explain what I am doing wrong? here is my code so far... Note: just for testing purposes I've put return false on everything so it displays a message when everythings ok. Code: .... <script type="text/javascript"> window.onload = function() { document.forms[0].username.focus(); } function validate(form) { var form = document.getElementById("reg"); var e = document.getElementById("error"); e.style.background = "red"; for(var i = 0; i < form.elements.length; i++) { var el = form.elements[i]; if(el.type == "text" || el.type == "password") { if(el.value == "") { e.innerHTML = "Please fill in all fields!"; el.style.border = "1px solid red"; el.focus(); return false; } else { el.style.border = "1px solid green"; return false; } } } var un = form.username; un.value = un.value.replace(/^\s+|\s+$/g,""); if((un.value.length < 3)|| (/[^a-z0-9\_]/gi.test(un.value))) { e.innerHTML = "Only letters,numbers and the underscore are allowed (no spaces) - 3-16 characters"; un.focus(); return false; } var pw = form.password; pw.value = pw.value.replace(/^\s+|\s+$/g,""); if((pw.value.length < 3) || (/[^a-z0-9]/gi.test(pw.value))) { e.innerHTML = "Only letters and numbers are allowed (no spaces) - 3-16 characters"; pw.focus(); return false; } e.innerHTML = "You filled in all the fields, well done!"; e.style.background = "green"; return false; } </script> </head> <body> <div id="wrapper"> <div id="header"> <h1>My Cool Website</h1> </div> <div id="content"> <div class="padding"> <h2>Registration</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p> <form id="reg" action="#" method="post" onsubmit="return validate(this)"> <div id="error"></div> <div><label for="username">Username</label></div> <div><input type="text" name="username" id="username" size="30" maxlength="16" /></div> <div><label for="password">Password</label></div> <div><input type="password" name="password" id="password" size="30" maxlength="16" /></div> <div><label for="c_password">Confirm Password</label></div> <div><input type="password" name="c_password" id="c_password" size="30" maxlength="16" /></div> <div><label for="email">Email address</label></div> <div><input type="text" name="email" id="email" size="30" maxlength="200" /></div> <div><label for="c_email">Confirm Email address</label></div> <div><input type="text" name="c_email" id="c_email" size="30" maxlength="200" /></div> <div><label for="firstname">First name</label></div> <div><input type="text" name="firstname" id="firstname" size="30" maxlength="100" /></div> <div><label for="surname">Surname</label></div> <div><input type="text" name="surname" id="surname" size="30" maxlength="100" /></div> <div><label for="gender">Gender</label></div> <div> <div><input type="radio" name="gender" id="gender" value="m" checked="checked" />Male</div> <div><input type="radio" name="gender" value="f" />Female</div> </div> <div><input type="submit" value="Register" name="submit" /></div> </form> </div> </div> <div id="footer"> <p>Copyright © 2009 My Cool Website</p> </div> </div> </body> </html> I have a drop down form which submits the form onchange. Code: <form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" > <label for='selectboxvalue'>Sort by:</label> <select name="selectboxvalue" onchange="this.form.submit();" > <option value="name">Popular</option> <option value="pricelow">Price Lowest First</option> <option value="pricehigh">Price Highest First</option> <option value="datenew">Newest</option> <option value="dateold">Oldest</option> </select> </form> everything is working nicely except I think it makes sense if after the form submits, the last option value clicked is still selected. Is there anyway to do this with some code that says something like: after submit, initially selected = last clicked? How can I add a form field value to a url. I tried the below but it no work. Code: href="index2.php?q=4&id=+document.theForm.lists.value+&picklist" function checkValidFormInput() { if (document.getElementsByName('customerName').value != '') { document.getElementById('customerNameImg').innerHTML = '<img alt="Valid" src="images/greenTick.png">'; } else { document.getElementById('customerNameImg').innerHTML = '<img alt="Invalid" src="images/redX.png">'; } if (document.getElementsByName('customerEmail').length > 0) { document.getElementById('customerEmailImg').innerHTML = '<img alt="Valid" src="images/greenTick.png">'; } else { document.getElementById('customerEmailImg').innerHTML = '<img alt="Invalid" src="images/redX.png">'; } } I need to learn how to clear form fields when a user clicks on them. Here is the site in question: http://www.yourvancouvermortgagebroker.ca/apply They used to work, but then I changed the field value and now it doesn't work on some of the fields (whichever ones I changed). Here is a link to the .js file: http://www.yourvancouvermortgagebroker.ca/js/apply.js I have a form which has various fields which are arrays (so the name of a field may be myField[]). The reason for this is that the form has add buttons to add another field or fields for the purpose of entering another email address, etc., to send invitations and do other things. The problem that I am running into is how to access the individual fields in an array of fields inside javascript to do form validation. So if I have an email address field name emailAddress[], and using the add button, the user of my site adds 3 other copies of the emailAddress[] field, I want to then do form validation onSubmit to ensure those email address are valid using standard procedures. However, inside the javascript code, how do I access the individual fields that make up emailAddress[]? I just cannot find anywhere online the proper way to get at these values. If anyone can help me, I would greatly appreciate it. Happy Holidays Hi there, I have a html form, and I need it so that when a user clicks a button, it adds a field into the form. I also need it to write <td></td> around the new field, and I need it to write this in a specific part row of a table. How would I go about doing this? I've tried searching for the past two hours, but no luck. Many thanks, I appreciate it, Jason Is there a way to give an input or textarea field the focus and set the focus to begin right at the end of the current text in the field?
Hi! I use the :: Form field Progress Bar from DynamicDrive: Form field Progress Bar Now I trided to change the text when the textarea is full "Limit:100%" to "Your max. characters is reached" I trided it but with no luck. This is the main code.. Code: <script type="text/JavaScript"> function textCounter1(field,counter,maxlimit,linecounter) { // text width// var fieldWidth = 137; var charcnt = field.value.length; // trim the extra text if (charcnt > maxlimit) { field.value = field.value.substring(0, maxlimit); } else { // progress bar percentage var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ; document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px"; document.getElementById(counter).innerHTML="Limiet: "+percentage+"%" // color correction on style from CCFFF -> CC0000 setcolor(document.getElementById(counter),percentage,"background-color"); } } function setcolor(obj,percentage,prop){ obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)"; } </script> This is the place where the text is set. Code: ((fieldWidth*percentage)/100)+"px"; document.getElementById(counter).innerHTML="Limiet: "+percentage+"%" Help would be highly appreciated ! greetings Jardin Hi. I have a form and if a field is blank a message pops up. This doesnt stop my php from running though and takes the user to another page. Is there a line to keep them on that page untill all fields are filled out? code so far is simple. <script type="text/javascript" language="JavaScript"> function nameempty() { if ( document.form.subject1.value == '' ) { alert('No name was entered!') return false; } } </script> //then down the bottom I have a small bit that implements that code I need help troubleshooting javascript I am using to concatenate two fields in a form and populating a hidden field with them. Here's the javascript: <script type="text/javascript"> function combName() { var fname = document.forms[0].fname.value; var lname = document.forms[0].lname.value; document.forms[0].name.value = fname + " " lname; } </script> Here are the form fields: <input id="fname" name="fname" type="text"> <input id="lname" name="lname" type="text" onKeyUp="combName()"> <input name="name" type="hidden" id="name" size="20" maxlength="80"> <input name="Submit" type="submit" id="OnSubmit" value="OnSubmit"> What am I doing wrong? Thanks. |