Hello Im trying to have two different forms the user can switch from but this only works on IE and it doesnt work on firefox or chrome. Would anyone know whats wrong with this code? help would be much appreciated. <!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-Language" content="sv" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <title>Switching forms</title> </head> <body> <script language="JavaScript"><!-- function changeForm(what) { for (var i=0; i<what.options.length; i++) { if (what.options[i].selected) { if (document.all) document.all[what.options[i].value].style.visibility="visible"; else if (document.layers) document.layers[what.options[i].value].visibility = "visible"; } else { if (document.all) document.all[what.options[i].value].style.visibility="hidden"; else if (document.layers) document.layers[what.options[i].value].visibility = "hidden"; } } } //--></script> <form> <select name="selectList" onChange="changeForm(this.form.selectList)"> <option value="form1">Private Person</option> <option value="form2" selected>Company</option> </select> </form> <div id="form1" style="position: absolute; top: 100; left: 100; visibility: visible;"> <form name="privperson" method="post" action="/addsite2.php"> <table border="0" width="500px" height="100%" cellpadding="2" cellspacing="2"> <tr> <td width="135" align="left">First Name:</td> <td width="399" align="left"><input type="text" name="firstname" size="31"> *</td> </tr> <tr> <td width="135" align="left">Last Name:</td> <td width="399" align="left"><input type="text" name="lastname" size="31"> *</td> </tr> <tr> <td width="135" align="left">Address:</td> <td width="399" align="left"><input type="text" name="address1" size="31"> *</td> </tr> <tr> <td width="135" align="left"> </td> <td width="399" align="left"><input type="text" name="address2" size="31"></td> </tr> <tr> <td width="135" align="left">Postal Code:</td> <td width="399" align="left"><input type="text" name="postalcode" size="31"> *</td> </tr> <tr> <td width="135" align="left">City:</td> <td width="399" align="left"><input type="text" name="city" size="31"> *</td> </tr> <tr> <td width="135" align="left">State:</td> <td width="399" align="left"><input type="text" name="state" size="31"> *</td> </tr> <tr> <td width="135" align="left">Email:</td> <td width="399" align="left"><input type="text" name="email" size="31"> *</td> </tr> <tr> <td width="135" align="left">Country:</td> <td width="399" align="left"> <select name="country"> </select> *</td> </tr> <tr> <td width="135" align="left"> </td> <td width="399" align="left"> </td> </tr> <tr> <td width="135" align="left"> </td> <td width="399" align="left"> </td> </tr> <tr> <td> <input type="button" value="Go back to step 1" name="B1" style="float: left"> </td> <td> <input type="submit" value="Confirm payment" name="submitprivate" style="float: right"> </td> </tr> </table> </form> </div> <div id="form2" style="position: absolute; top: 100; left: 100; visibility: hidden;"> <form name="company" method="post" action="/addsite2.php"> <table border="0" width="500px" height="100%" cellpadding="2" cellspacing="2"> <tr> <td width="135" align="left" valign="top">Company name:</td> <td width="399" align="left"><input type="text" name="c_companyname" size="31"> *</td> </tr> <tr> <td width="135" align="left" valign="top">Company Address:</td> <td width="399" align="left"><input type="text" name="c_address1" size="31"> *</td> </tr> <tr> <td width="135" align="left" valign="top"> </td> <td width="399" align="left"><input type="text" name="c_address2" size="31"></td> </tr> <tr> <td width="135" align="left" valign="top">Postal Code:</td> <td width="399" align="left"><input type="text" name="c_postalcode" size="31"> *</td> </tr> <tr> <td width="135" align="left" valign="top">City:</td> <td width="399" align="left"><input type="text" name="c_city" size="31"> *</td> </tr> <tr> <td width="135" align="left" valign="top">State:</td> <td width="399" align="left"><input type="text" name="c_state" size="31"> *</td> </tr> <tr> <td width="135" align="left" valign="top">Country:</td> <td width="399" align="left"> <select name="c_country"> </select> *</td> </tr> <tr> <td width="135" align="left" valign="top">Email:</td> <td width="372" align="left"><input type="text" name="c_email" size="31"> *<br /></td> </tr> <tr> <td width="135" align="left" valign="top">VAT Number:</td> <td width="372" align="left"><input type="text" name="c_vatnumber" size="31"><br /> <font size="1">(VAT only applies to companies within European Union)</font><br /></td> </tr> <tr> <td width="135" align="left"> </td> <td width="201" align="left"> </td> </tr> <tr> <td></td> </tr> <tr> <td> <input type="button" value="Go back to step 1" name="B1" style="float: left"> </td> <td> <input type="submit" value="Confirm payment" name="submitcompany" style="float: right"> </td> </tr> </table> </form> </div> </body> </html> Code (markup):
Hi, You can use the following script to solve this prblm. function changeForm(what) { for (var i=0; i<what.options.length; i++) { if (what.options.selected) { if (document.getElementById) document.getElementById(what.options.value).style.visibility="visible"; else if (document.all) document.all[what.options.value].style.visibility="visible"; else if (document.layers) document.layers[what.options.value].style.visibility = "visible"; } else { if (document.getElementById) document.getElementById(what.options.value).style.visibility="hidden"; else if (document.all) document.all[what.options.value].style.visibility="hidden"; else if (document.layers) document.layers[what.options.value].style.visibility = "hidden"; } } } by Baskar/www.smartwebby.com
The problems with your code are in not referencing elements via DOM but in the IE array way and also, getting the dropdown's value in a coherent way. This may work better, although I am not 100% on how brower compatible the function getSelected is (thats a direct result of using frameworks, all i'd do in say mootools is whatDropdown.get("value") and presto!). There's a school of thought that you should iterate all select elements (options) 1 by 1 until you find one that has a selected attribute... this ensures 100% browser compatibility. However, if (what.options.selected) only evaluates in IE. I think selectedIndex is not being set always... If you find what I have written inadequate in browsers other than FF and IE, google for a dropdown value function... <script language="JavaScript"> <!-- var getSelected = function(dropdownObject) { // this is a little function that returns he selected value of a dropdown return dropdownObject[dropdownObject.selectedIndex].getAttribute("value"); }; // end, testd in IE7 and FF3.06 var changeForm = function(whatDropdown) { // defines the form toggler based upon the dropdown element passed var form1 = document.getElementById("form1"), form2 = document.getElementById("form2"); if (getSelected(whatDropdown) == "form1") { form1.style.display = "block"; form2.style.display = "none"; } else { form1.style.display = "none"; form2.style.display = "block"; } }; //--></script> <form> <select name="selectList" onChange="changeForm(this)"> <!-- notice i pass on 'this' which self references the select object --> <option value="form1">Private Person</option> <option value="form2" selected="selected">Company</option> </select> </form> <div id="form1" style="position: absolute; top: 100; left: 100; display: none;"> ... PHP: notice the display: none on form1 (person) <div id="form2" style="position: absolute; top: 100; left: 100; display: block;"> PHP: since company is pre-selected, form 2 is visible. word to the wise: visibility: hidden does not show a form but it allocates the space it uses. display, on the other hand - does not, it just removes it from the dom temporaily until you change it to one that's shown - like block or inline.