First to post a working solution gets $20 through paypal. I dont want PMs only post in this thread. 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): best regards Jawn
document.all is not work in ff or chrome . so you have to use instead document.getElementsByTagName('*'). the below codes work you can test it.. <!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.getElementsByTagName('*')) { document.getElementsByTagName('*')[what.options[i].value].style.visibility="visible";} else if (document.layers){ document.layers[what.options[i].value].visibility = "visible"; } } else { if (document.getElementsByTagName('*')) document.getElementsByTagName('*')[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> PHP:
Did you only change the javascript function? because i couldnt get it to work. I get javascript error