JavaScript - Form Onchange Event!
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? Similar TutorialsHello, 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> Hi, I am trying to copy the value of one textbox to another using onchange event. For some reason, my code does not work, please let me know where I went wrong. here is my code: Code: <html> <head> <script type="text/javascript"> function copyText() { document.getElementById("field2").value=document.getElementById("field1").value; } </script> </head> <body> Field1: <input type="text" id="field1"/><br /> Field2: <input type="text" id="field2" onchange="copyText()"/> </body> </html> Thank you. HI, i know very little about javascript, just enough to get me into trouble actually lol. Here is what im working with. I have a custom Instant messenger for members. It uses embed object macromedia as well as javascript to diplay the window and send messages. What i want to do is simply add an onchange that when one person is typing it shows they are typing (ie xxxxx is typing....) My experience is in php and html and i looked thru the script and the javascript functions but im not sure what im looking for exactly. Do i need to have access to the swf or fla file and be able to edit them to do this? I dont see any form inputs or i would know exactly where to put the onchange lol. Im guessing the input is in the swf or fla file not sure how that works. what im guessing is that in the embed or the object tags (ill play with it) i can put something like Code: document.write('test on change\n'); i think i need to wrap that in doc write script type=javascript in quotes so it parses. If i can get that text to show up inside the IM where i want it then i can try to figure out how to set focus on box and recongize onchange and do some testing. I think i might even be able to doc write the onchange command but not sure. Thanks Hi I'm a newbie. Please help me. I'm using Joomla. I've got a dropdown which reads the filename from the database. When the user selects it I want an onchange event to open the pdf. I've been at it for 2 days now. Code: <?php $con = mysql_connect('localhost', 'root', ''); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("metnet", $con); $sql="SELECT * FROM newsletter"; $result = mysql_query($sql); echo "<form method='post'>"; $dropdown = "<select name='sname' onChange='location(this.form.sname)' >"; while($row = mysql_fetch_assoc($result)) { $dropdown .= "\r\n<option value='{$row['fpath']}'>{$row['fpath']}</option>"; } $dropdown .= "\r\n</select>"; echo $dropdown; ?> I am trying to add an onchange event to a select tag. This is my code, but it does not appear to be working. Any advice is appreciated. Thanks... Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title></title> <script type="text/javascript"> function myLoad () { var mySelect = document.getElementsByName('test'); mySelect.onchange = function(){alert('hi')}; } </script> </head> <body onLoad="myLoad()"> <select name="test" > <option value="1">1</option> <option value="2">2</option> </select> </body> </html> All, first post on the forum. I hope this is relatively simple. I've looked around for the answer, but I thin think the search terms (update onchange event) are a bit too common... Code: document.getElementById("tester").innerHTML= "hello"; document.getElementById("tester").onmouseover = "alert('hello')"; You see I'm trying to change an event like I'd change a property. The first will change the text to hello. I'd like the second to change the onmouseover event to display a hello world alert... but it doesn't seem to do anything. How can I change events? Jason Hi All, Need a bit of help here, need this SELECT to submit the page and end up at the below URL, correctly passing the GET values through the string. <code> <select name="dir-fact-misma" id="dir-fact-misma" class="text100" tabindex="" onChange="alta_nueva.action='alta.php?page=p2#alta'; return true;"> <option value="Si" <?php if(!isset($_POST['dir-fact-misma']) || $_POST['dir-fact-misma'] == 'Si') print "Selected='Selected '"; ?>>Si</option> <option value="No" <?php if(isset($_POST['dir-fact-misma']) && $_POST['dir-fact-misma'] == 'No') print "Selected='Selected '"; ?>>No</option> </select> </code> the form in which this SELECT is placed needs to be submitted so that other fields in the form are not lost, they are saved in Session Variables. the same javascript but activated through an onclick event works perfect elsewhere in the same form with the following code, i think its the onChange that doesn't work for some reason. <code> <input name="p1" type='submit' id="p1" onclick="alta_nueva.action='alta.php?page=p1#alta'; return true;" value='1' /> </code> the page is programmed in PHP. Any help is appreciated. Hi All, I am really strugling with this and I hope somebody can help me on this. I would like to have a dropdown to only show when a certain value is chosen from another drop down. So if in this dropdown the value ETS Rep Discount is chosen he should show the other dropdown Code: <div class="row"> <div class="fieldName">Discount Type</div> <div class="fieldValue"> <asp:DropDownList ID="discountTypeDropDownList" runat="server" AutoPostBack="True" Width="295px" OnSelectedIndexChanged="DiscountTypeDropDownList_SelectedIndexChanged"> <asp:ListItem Value="<%$ AppSettings:DiscountType.General %>">General Discount</asp:ListItem> <asp:ListItem Value="<%$ AppSettings:DiscountType.Golf %>">Golf Only Rep Discount</asp:ListItem> <asp:ListItem Value="<%$ AppSettings:DiscountType.ETS %>">ETS Rep Discount</asp:ListItem> </asp:DropDownList> </div> </div> Code: <div class="row"> <div class="fieldName">Category</div> <div class="fieldValue"> <asp:UpdatePanel ID="UpdatePanelCategory" runat="server"> <ContentTemplate> <asp:DropDownList ID="CategoryDropDown" runat="server" Width="295px"> </asp:DropDownList> <asp:Label ID="CategoryRequiredLabel" runat="server" Font-Bold="True" ForeColor="Red" Visible="False">required!</asp:Label> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="discountTypeDropDownList" /> </Triggers> </asp:UpdatePanel> </div> </div> thanks in advance Hi all, I want to reload an html page onChange event of dropdown list and retain the old values filled in the page. Plz help..... Hello, I am working on a CGI/Ajax application to interface with a database. I have the back-end Perl/CGI application working, so now it it is time to design the web interface and respective forms. So here goes, I am attempting to create dynamic list boxes, but I am unable to pass a value to the 'onChange' event. Here is my code (this is a proof of concept and highly stripped down): Code: <html> <head> </head> <body> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> var array = [ 'name', 'age', 'year']; function init(sel_val){ for (var i = 0; i < array.length; i++){ document.write(i + " " + array[i] + "<br />"); } for (var i = 0; i< array.length; i++){ document.product.id_type.options[i] = new Option(i + array[i], i); } } function OnChange(sel_val) { // for(i = document.product.id_style.length - 1; i > 0; i--) // document.product.id_style.options[i] = null; // document.product.id_style.options[0] = new Option("something else", 15); alert("pressed" + " " + sel_val + "<br />"); } </script> <form name="product"> <select name="id_type" size="5" style="width: 150px;" onChange="OnChange()"></select> <select name="id_style" size="5" style="width: 150px;" ></select> </form> <script> init(); </script> </body> </html> I'm well versed in Perl and Java but I am a JavaScript newbie, so go easy. I understand that sel_val is not being set, but I'm not sure how it should (or could) be set. I would like to use a hash instead of integer values for `i` document.product.id_type.options[i] = new Option(i + array[i], i); becomes document.product.id_type.options[i] = new Option(hash[key], key); Any thoughts, comments, criticisms, jokes are welcome. Thanks in advance for the assist. Hello, I have this onchange event that occurs after user selection of a dropdown menu. When a user makes a selection it queries the database and delivers some data. The value of the dropdown is stored in a database, but the problem is when the page is refreshed the delivered data disapears, only reappearing if you change the dropdown. How can I make the onchange event run when the page loads so that if there is already a selection, the database data will always be there, only to change if the user changes the selection? Here is the JS: Code: <script type="text/javascript"> function showCustomer(str) {var xmlhttp; if (str=="") {document.getElementById("txtHint").innerHTML=""; return;} if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();} else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} xmlhttp.onreadystatechange=function() {if (xmlhttp.readyState==4 && xmlhttp.status==200) {document.getElementById("txtHint").innerHTML=xmlhttp.responseText;}} xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send();} </script> And the onchange line: Code: <SELECT Name=""customers"" id=""customers"" onchange=""showCustomer(this.value)""> Etc... Please ignore the double sets of quotes. Hi All, I have a script that is called by the onchange event on my text field (it compares the date entered into the field and issues an alert if the date is earlier than the current date). This worked great on my data entry form but I also want to use the same script in my update form. In the update form the text field is already receiving a value via php: Code: <input name="DateNeeded" type="text" class="formField" id="DateNeeded" onchange="checkDate(this)" value="<?php echo $row_rstRequestDetails['DateNeeded']; ?>" /> and this is causing my onchange event to fire when the page is loaded. Is there a way to suppress the onchange event for the initial page load? Thanks, Ken Hi, I have a form consisting of nine text fields (labelled 1-9) and nine radio buttons for each of the text fields. I want to enable the radio buttons when text is entered into the field corresponding to that particular radio button. Is there a way of achieving this using a JavaScript onChange event? Thank you in advance. Hello, I'm working on a quote generator and I'm running into an issue with onChange events not firing when a text field is dynamically populated via a child window. Here's my setup: I have 3 text boxes (quantity, price, markup) that are multiplied together in order to give the total of that product. Each text box has an onChange event [called calculator()] that calls an external javascript file, which handles the multiplication and instantly updates the total of that product. Up to this point, everything works fine - - when I manually edit any of the 3 inputs, the total updates correctly. However, my problem is that I now have the "price" text box being dynamically populated, and when it updates it is not firing the onChange event attached to it. The text box is being filled by way of launching a child window and running the following code within it: Code: function call_submit() { opener.document.quote_form.item_price_1.value=document.child.prods.options[document.child.prods.selectedIndex].id self.close(); } I've also tried to call the calculator function from within the child window, with no luck: Code: function call_submit() { opener.document.estimator_form.item_price_1.value=document.child.prods.options[document.child.prods.selectedIndex].id calculator () self.close(); } So, as of right now, the following is happening - - I launch the child window, I select the product to add to the quote, the child window closes and the price is correctly populates within the "price" text box, BUT the total stays at zero. If I manually edit any of the fields, it then catches back up and properly updates the total. Is their any way to fire the onChange event at the time when the text field is populated from the child window? Any help would be appreciated. Thanks in advance. 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. 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; } 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! 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> Hey Everyone, I would like to let a select menu drop down with the click of a button or image. So, I have: Code: <select> <option>Option1</option> <option>Option2</option> <option>Option3</option> <option>Option4</option> </select> So, how do I trigger this select menu to drop down, except for clicking on the down arrow? Thanx in forward Please help me with this code to determine whether the check box has been checked. I get "Thank you" even if I don't check the check box. <script type="text/javascript"> var uncheck = document.getElementById().checked == false; var accept; function checkAccept() { var uncheck; if (uncheck == false){ alert ("You must accept the terms."); } else (uncheck == true) { alert ("Thank you."); } } </script> <form> <br />Please accept the terms by clicking the box below: <br />Accept terms: <input type="checkbox" id="accept" value="Y" /> <br /><input type="button" name="btn" value="Accept" onclick="checkAccept()" /> </form> </body> </html> |