Matthew Herren Posted October 3, 2009 Share Posted October 3, 2009 I'm making a form, and would like to create an option when clicked a new one was displayed. Say i had three radio buttons were displayed. How many cars would you like to add? () One () Two ()Three and when (o) One was checked there would be: Make Model Color Year Plate If (o) Two they would double car1 car2 make make model model etc... How would this be accomplished. Quote Link to comment Share on other sites More sharing options...
ProXy_ Posted October 4, 2009 Share Posted October 4, 2009 Here is a Quick example of what you want: <html> <head> <SCRIPT type="text/javascript"> function ShowOneCar() { if (document.getElementById("onecar").style.display = 'none') { document.getElementById("onecar").style.display = ''; } if (document.getElementById("carset").style.display = '') { document.getElementById("carset").style.display = 'none'; } } function ShowTwoCars() { document.getElementById("twocars").style.display = ''; } </script> </head> <body> <table border="0"><tr><td> <input type="radio" onClick="ShowOneCar()">One</td><td><input type="radio" onClick="ShowTwoCars()">Two</td></tr> <tr><td id="carset"> <div style="display: none;" id="onecar"><input type="radio">Make<br> <input type="radio">Model<br> <input type="radio">Color<br> <input type="radio">Year</div> </td></tr> <tr> <td id="twocar"> <div style="display: none;" id="twocars"><input type="radio">Car 1 Make <input type="radio">Car 2 Make<br> <input type="radio">Car 1 Model <input type="radio">Car 2 Model<br> <input type="radio">Car 1 Color <input type="radio">Car 2 Color<br> <input type="radio">Car 1 Year <input type="radio">Car 2 Year<br> </div> </td></tr></table> </body> </html> i didn't do anything with the looks, i mainly created the functions. Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted October 4, 2009 Share Posted October 4, 2009 I'm making a form, and would like to create an option when clicked a new one was displayed. Say i had three radio buttons were displayed. How many cars would you like to add? () One () Two ()Three and when (o) One was checked there would be: Make Model Color Year Plate If (o) Two they would double car1 car2 make make model model etc... How would this be accomplished. First, Java and JavaScript are two completely different things. Other than their names, they are not related at all. In fact, they were created by two separate companies. Second: http://www.w3schools.com Quote Link to comment Share on other sites More sharing options...
Matthew Herren Posted October 5, 2009 Author Share Posted October 5, 2009 Ok well it works thank you but now i've come across this problem. When you click one radio it stays clicked, and if you want to click another the last one stays visible. Here's the link to the form: http://beccastowing.com/formdata/auto/form1.php Here's the coding: <head> <script language="JavaScript" src="/scripts/gen_validatorv31.js" type="text/javascript"></script> <SCRIPT type="text/javascript"> function ShowOneCar() { if (document.getElementById("onecar").style.display = 'none') { document.getElementById("onecar").style.display = ''; } if (document.getElementById("carset").style.display = '') { document.getElementById("carset").style.display = 'none'; } } function ShowTwoCars() { if (document.getElementById("twocars").style.display = 'none') { document.getElementById("twocars").style.display = ''; } if (document.getElementById("carset").style.display = '') { document.getElementById("carset").style.display = 'none'; } } function ShowThreeCars() { if (document.getElementById("threecars").style.display = 'none') { document.getElementById("threecars").style.display = ''; } if (document.getElementById("carset").style.display = '') { document.getElementById("carset").style.display = 'none'; } } </script> </head> <body> <div class="form"> <ul> <form name="auto1" method="post" action="submit.php" onsubmit="return Validate();"> <li><H2>Step 1 Contact Info.</H2></li> <li><div id='auto1_errorloc' class='error_strings'></li> <li>Name</li> <li> <label for="name">First</label> <input type="text" name="name" maxlength="20"> <label for="last">Last</label> <input type="text" name="last" maxlength="20"> <label for="mi">M.I.</label> <input type="text" name="mi" maxlength="2"> </li> <li>Phone(s)</li> <li> <label for="hp">Main</label> <input type="text" name="hp" maxlength="10"> <label for="male">Cell</label> <input type="text" name="cp" maxlength="10"> <label for="work">Work</label> <input type="text" name="work" maxlength="10"> </li> <li><label for="email">E-mail</label> <input type="text" name="email" maxlength="50"></li> <li><label for="add">Street</label> <input type="text" name="add" maxlength="30"></li> <li><label for="add2">Street 2</label> <input type="text" name="add2" maxlength="30"></li> <li><label for="city">City</label> <input type="text" name="city" maxlength="20"> <label for="state">State</label> <input type="text" name="state" maxlength="2"> <label for="zip">Zip</label> <input type="text" name="zip" maxlength="5"></li> <li> <label for="password">Password</label> <input type="password" name="password"> <label for="passwrod_conformation">Confirm Password</label> <input type="password" name="password_confirmation"> </li> <li><input type="radio" onClick="ShowOneCar()">One <input type="radio" onClick="ShowTwoCars()">Two <input type="radio" onclick="ShowThreeCars()">Three</li> <div style="display: none;" id="onecar"> <li><H2>Vehicle Information</H2></li> <li>Vehicle 1</li> <li> <label for="make">Make</label> <input type="text" name="make" maxlength="20"> </li> <label for="model">Model</label> <input type="text" name="model" maxlength="20"> </li> <label for="color">Color</label> <input type="text" name="color" maxlength="10"> </li> <label for="plate">Plate #</label> <input type="text" name="plate" maxlength="7"> </li> </div> <div id="twocar"> <div style="display: none;" id="twocars"> <li><H2>Vehicle Information</H2></li> <li>Vehicle 1</li> <li> <label for="make">Make</label> <input type="text" name="make" maxlength="20"> </li> <label for="model">Model</label> <input type="text" name="model" maxlength="20"> </li> <label for="color">Color</label> <input type="text" name="color" maxlength="10"> </li> <label for="plate">Plate #</label> <input type="text" name="plate" maxlength="7"> </li> <li>Vehicle 2</li> <li> <label for="make2">Make</label> <input type="text" name="make" maxlength="20"> </li> <label for="model2">Model</label> <input type="text" name="model" maxlength="20"> </li> <label for="color2">Color</label> <input type="text" name="color" maxlength="10"> </li> <label for="plate2">Plate #</label> <input type="text" name="plate" maxlength="7"> </li> </div> <div style="display: none;" id="threecars"> <li><H2>Vehicle Information</H2></li> <li>Vehicle 1</li> <li> <label for="make">Make</label> <input type="text" name="make" maxlength="20"> </li> <label for="model">Model</label> <input type="text" name="model" maxlength="20"> </li> <label for="color">Color</label> <input type="text" name="color" maxlength="10"> </li> <label for="plate">Plate #</label> <input type="text" name="plate" maxlength="7"> </li> <li>Vehicle 2</li> <li> <label for="make2">Make</label> <input type="text" name="make" maxlength="20"> </li> <label for="model2">Model</label> <input type="text" name="model" maxlength="20"> </li> <label for="color2">Color</label> <input type="text" name="color" maxlength="10"> </li> <label for="plate2">Plate #</label> <input type="text" name="plate" maxlength="7"> </li> <li>Vehicle 3</li> <li> <label for="make3">Make</label> <input type="text" name="make" maxlength="20"> </li> <label for="model3">Model</label> <input type="text" name="model" maxlength="20"> </li> <label for="color3">Color</label> <input type="text" name="color" maxlength="10"> </li> <label for="plate3">Plate #</label> <input type="text" name="plate" maxlength="7"> </li> <li> </div> <button type="reset" value="Reset">Reset</button> <button type="submit" value="Submit">Submit</button> </li> </ul> </form> <script language="JavaScript" type="text/javascript"> var frmvalidator = new Validator("auto1"); frmvalidator.EnableOnPageErrorDisplaySingleBox(); frmvalidator.EnableMsgsTogether(); frmvalidator.addValidation("name","req","Please enter your First Name"); frmvalidator.addValidation("name","maxlen=20","Max length for First Name is 20"); frmvalidator.addValidation("name","alpha","Alphabetic chars only for First Name"); frmvalidator.addValidation("last","req","Please enter your Last Name"); frmvalidator.addValidation("last","maxlen=20","Max length is 20"); frmvalidator.addValidation("last","alpha","Alphabetic chars only for Last Name"); frmvalidator.addValidation("mi","maxlen=2","Max length is 2"); frmvalidator.addValidation("mi","alpha","Alphabetic chars only for Middle Initial"); frmvalidator.addValidation("email","maxlen=50", "Max length is 50"); frmvalidator.addValidation("email","req", "Please enter a email address"); frmvalidator.addValidation("email","email", "Please enter a valid email address."); frmvalidator.addvalidation("hp","req", "Phone is required"); frmvalidator.addValidation("hp","maxlen=10", "Max length is 10 You don't have to add () or any separators"); frmvalidator.addValidation("hp","numeric","Numeric chars only"); frmvalidator.addValidation("add","req","Please enter your home address"); frmvalidator.addValidation("add","maxlen=20","Max length is 30"); frmvalidator.addValidation("add","alpha","Alphabetic chars only"); frmvalidator.addValidation("add2","maxlen=20","Max length is 30"); frmvalidator.addValidation("add2","alpha","Alphabetic chars only"); frmvalidator.addValidation("city","req","Please enter your City"); frmvalidator.addValidation("city","maxlen=20","Max length is 20"); frmvalidator.addValidation("city","alpha","Alphabetic chars only"); frmvalidator.addValidation("state","req","Please enter your State"); frmvalidator.addValidation("state","maxlen=2","Max length is 2 (example=KY)"); frmvalidator.addValidation("state","alpha","Alphabetic chars only"); frmvalidator.addValidation("zip","req","Please enter your Zip code"); frmvalidator.addValidation("zip","maxlen=5","Max length is 5"); frmvalidator.addValidation("zip","alpha","Alphabetic chars only"); frmvalidator.addValidation("cp","maxlen=10","Max length for is 10"); frmvalidator.addValidation("cp","numeric","Numeric chars only"); frmvalidator.addValidation("work","maxlen=10","Max length for is 10"); frmvalidator.addValidation("work","numeric","Numeric chars only"); frmvalidator.addValidation("make1","req","Please enter the make of you vehicle"); frmvalidator.addValidation("make1","maxlen=20","Max length for make is 20"); frmvalidator.addValidation("make1","alpha","Alphabetic chars only"); frmvalidator.addValidation("model1","req","Please enter the model of your vehicle"); frmvalidator.addValidation("model1","maxlen=20","Max length is 20 for model"); frmvalidator.addValidation("model1","alpha","Alphabetic chars only"); frmvalidator.addValidation("color1","req","Color is required please fill in"); frmvalidator.addValidation("color1","maxlen=10","Max length is 10"); frmvalidator.addValidation("color1","alpha","Alphabetic chars only"); frmvalidator.addValidation("plate1","maxlen=7", "Max length is 7 for Plate #"); frmvalidator.addValidation("plate1","req", "Please enter your plate number"); frmvalidator.addValidation("plate1","alnum_s", "Please enter a valid plate number XXX XXX"); frmvalidator.addValidation("make2","req","Please enter the make of you vehicle"); frmvalidator.addValidation("make2","maxlen=20","Max length for make is 20"); frmvalidator.addValidation("make2","alpha","Alphabetic chars only"); frmvalidator.addValidation("model2","req","Please enter the model of your vehicle"); frmvalidator.addValidation("model2","maxlen=20","Max length is 20 for model"); frmvalidator.addValidation("model2","alpha","Alphabetic chars only"); frmvalidator.addValidation("color2","req","Color is required please fill in"); frmvalidator.addValidation("color2","maxlen=10","Max length is 10"); frmvalidator.addValidation("color2","alpha","Alphabetic chars only"); frmvalidator.addValidation("plate2","maxlen=7", "Max length is 7 for Plate #"); frmvalidator.addValidation("plate2","req", "Please enter your plate number"); frmvalidator.addValidation("plate2","alnum_s", "Please enter a valid plate number XXX XXX"); frmvalidator.addValidation("make3","req","Please enter the make of you vehicle"); frmvalidator.addValidation("make3","maxlen=20","Max length for make is 20"); frmvalidator.addValidation("make3","alpha","Alphabetic chars only"); frmvalidator.addValidation("model3","req","Please enter the model of your vehicle"); frmvalidator.addValidation("model3","maxlen=20","Max length is 20 for model"); frmvalidator.addValidation("model3","alpha","Alphabetic chars only"); frmvalidator.addValidation("color3","req","Color is required please fill in"); frmvalidator.addValidation("color3","maxlen=10","Max length is 10"); frmvalidator.addValidation("color3","alpha","Alphabetic chars only"); frmvalidator.addValidation("plate3","maxlen=7", "Max length is 7 for Plate #"); frmvalidator.addValidation("plate3","req", "Please enter your plate number"); frmvalidator.addValidation("plate3","alnum_s", "Please enter a valid plate number XXX XXX"); function Validate() { if (document.registration_form.password.value != document.registration_form.password_confirmation.value) { alert("The two passwords are not identical! "+ "Please enter the same password again for confirmation"); return false; } return true; } </script> </body> </html> And my validation only validate first, last , and email. Nothing else. Quote Link to comment Share on other sites More sharing options...
ProXy_ Posted October 5, 2009 Share Posted October 5, 2009 Here is the fix for your javascript: <head> <script language="JavaScript" src="/scripts/gen_validatorv31.js" type="text/javascript"></script> <SCRIPT type="text/javascript"> function ShowOneCar() { if (document.getElementById("onecar").style.display == "none") { document.getElementById("onecar").style.display = ''; if (document.getElementById("twocars").style.display == '') { document.getElementById("twocars").style.display = "none"; } if (document.getElementById("threecars").style.display == '') { document.getElementById("threecars").style.display = "none"; } } else { document.getElementById("onecar").style.display = "none"; } } function ShowTwoCars() { if (document.getElementById("twocars").style.display == "none") { document.getElementById("twocars").style.display = ''; if (document.getElementById("onecar").style.display == '') { document.getElementById("onecar").style.display = "none"; } if (document.getElementById("threecars").style.display == '') { document.getElementById("threecars").style.display = "none"; } } else { document.getElementById("twocars").style.display = "none"; } } function ShowThreeCars() { if (document.getElementById("threecars").style.display == "none") { document.getElementById("threecars").style.display = ''; if (document.getElementById("onecar").style.display == '') { document.getElementById("onecar").style.display = "none"; } if (document.getElementById("twocars").style.display == '') { document.getElementById("twocars").style.display = "none"; } } else { document.getElementById("theecars").style.display = "none"; } } </script> <script language="JavaScript" type="text/javascript"> var frmvalidator = new Validator("auto1"); frmvalidator.EnableOnPageErrorDisplaySingleBox(); frmvalidator.EnableMsgsTogether(); frmvalidator.addValidation("name","req","Please enter your First Name"); frmvalidator.addValidation("name","maxlen=20","Max length for First Name is 20"); frmvalidator.addValidation("name","alpha","Alphabetic chars only for First Name"); frmvalidator.addValidation("last","req","Please enter your Last Name"); frmvalidator.addValidation("last","maxlen=20","Max length is 20"); frmvalidator.addValidation("last","alpha","Alphabetic chars only for Last Name"); frmvalidator.addValidation("mi","maxlen=2","Max length is 2"); frmvalidator.addValidation("mi","alpha","Alphabetic chars only for Middle Initial"); frmvalidator.addValidation("email","maxlen=50", "Max length is 50"); frmvalidator.addValidation("email","req", "Please enter a email address"); frmvalidator.addValidation("email","email", "Please enter a valid email address."); frmvalidator.addvalidation("hp","req", "Phone is required"); frmvalidator.addValidation("hp","maxlen=10", "Max length is 10 You don't have to add () or any separators"); frmvalidator.addValidation("hp","numeric","Numeric chars only"); frmvalidator.addValidation("add","req","Please enter your home address"); frmvalidator.addValidation("add","maxlen=20","Max length is 30"); frmvalidator.addValidation("add","alpha","Alphabetic chars only"); frmvalidator.addValidation("add2","maxlen=20","Max length is 30"); frmvalidator.addValidation("add2","alpha","Alphabetic chars only"); frmvalidator.addValidation("city","req","Please enter your City"); frmvalidator.addValidation("city","maxlen=20","Max length is 20"); frmvalidator.addValidation("city","alpha","Alphabetic chars only"); frmvalidator.addValidation("state","req","Please enter your State"); frmvalidator.addValidation("state","maxlen=2","Max length is 2 (example=KY)"); frmvalidator.addValidation("state","alpha","Alphabetic chars only"); frmvalidator.addValidation("zip","req","Please enter your Zip code"); frmvalidator.addValidation("zip","maxlen=5","Max length is 5"); frmvalidator.addValidation("zip","alpha","Alphabetic chars only"); frmvalidator.addValidation("cp","maxlen=10","Max length for is 10"); frmvalidator.addValidation("cp","numeric","Numeric chars only"); frmvalidator.addValidation("work","maxlen=10","Max length for is 10"); frmvalidator.addValidation("work","numeric","Numeric chars only"); frmvalidator.addValidation("make1","req","Please enter the make of you vehicle"); frmvalidator.addValidation("make1","maxlen=20","Max length for make is 20"); frmvalidator.addValidation("make1","alpha","Alphabetic chars only"); frmvalidator.addValidation("model1","req","Please enter the model of your vehicle"); frmvalidator.addValidation("model1","maxlen=20","Max length is 20 for model"); frmvalidator.addValidation("model1","alpha","Alphabetic chars only"); frmvalidator.addValidation("color1","req","Color is required please fill in"); frmvalidator.addValidation("color1","maxlen=10","Max length is 10"); frmvalidator.addValidation("color1","alpha","Alphabetic chars only"); frmvalidator.addValidation("plate1","maxlen=7", "Max length is 7 for Plate #"); frmvalidator.addValidation("plate1","req", "Please enter your plate number"); frmvalidator.addValidation("plate1","alnum_s", "Please enter a valid plate number XXX XXX"); frmvalidator.addValidation("make2","req","Please enter the make of you vehicle"); frmvalidator.addValidation("make2","maxlen=20","Max length for make is 20"); frmvalidator.addValidation("make2","alpha","Alphabetic chars only"); frmvalidator.addValidation("model2","req","Please enter the model of your vehicle"); frmvalidator.addValidation("model2","maxlen=20","Max length is 20 for model"); frmvalidator.addValidation("model2","alpha","Alphabetic chars only"); frmvalidator.addValidation("color2","req","Color is required please fill in"); frmvalidator.addValidation("color2","maxlen=10","Max length is 10"); frmvalidator.addValidation("color2","alpha","Alphabetic chars only"); frmvalidator.addValidation("plate2","maxlen=7", "Max length is 7 for Plate #"); frmvalidator.addValidation("plate2","req", "Please enter your plate number"); frmvalidator.addValidation("plate2","alnum_s", "Please enter a valid plate number XXX XXX"); frmvalidator.addValidation("make3","req","Please enter the make of you vehicle"); frmvalidator.addValidation("make3","maxlen=20","Max length for make is 20"); frmvalidator.addValidation("make3","alpha","Alphabetic chars only"); frmvalidator.addValidation("model3","req","Please enter the model of your vehicle"); frmvalidator.addValidation("model3","maxlen=20","Max length is 20 for model"); frmvalidator.addValidation("model3","alpha","Alphabetic chars only"); frmvalidator.addValidation("color3","req","Color is required please fill in"); frmvalidator.addValidation("color3","maxlen=10","Max length is 10"); frmvalidator.addValidation("color3","alpha","Alphabetic chars only"); frmvalidator.addValidation("plate3","maxlen=7", "Max length is 7 for Plate #"); frmvalidator.addValidation("plate3","req", "Please enter your plate number"); frmvalidator.addValidation("plate3","alnum_s", "Please enter a valid plate number XXX XXX"); function Validate() { if (document.registration_form.password.value != document.registration_form.password_confirmation.value) { alert("The two passwords are not identical! "+ "Please enter the same password again for confirmation"); return false; } return true; } </script> </head> <body> <div class="form"> <ul> <form name="auto1" method="post" action="submit.php" onsubmit="return Validate();"> <li><H2>Step 1 Contact Info.</H2></li> <li><div id='auto1_errorloc' class='error_strings'></li> <li>Name</li> <li> <label for="name">First</label> <input type="text" name="name" maxlength="20"> <label for="last">Last</label> <input type="text" name="last" maxlength="20"> <label for="mi">M.I.</label> <input type="text" name="mi" maxlength="2"> </li> <li>Phone(s)</li> <li> <label for="hp">Main</label> <input type="text" name="hp" maxlength="10"> <label for="male">Cell</label> <input type="text" name="cp" maxlength="10"> <label for="work">Work</label> <input type="text" name="work" maxlength="10"> </li> <li><label for="email">E-mail</label> <input type="text" name="email" maxlength="50"></li> <li><label for="add">Street</label> <input type="text" name="add" maxlength="30"></li> <li><label for="add2">Street 2</label> <input type="text" name="add2" maxlength="30"></li> <li><label for="city">City</label> <input type="text" name="city" maxlength="20"> <label for="state">State</label> <input type="text" name="state" maxlength="2"> <label for="zip">Zip</label> <input type="text" name="zip" maxlength="5"></li> <li> <label for="password">Password</label> <input type="password" name="password"> <label for="passwrod_conformation">Confirm Password</label> <input type="password" name="password_confirmation"> </li> <li><input type="radio" onClick="ShowOneCar()">One <input type="radio" onClick="ShowTwoCars()">Two <input type="radio" onclick="ShowThreeCars()">Three</li> <div style="display: none;" id="onecar"> <li><H2>Vehicle Information</H2></li> <li>Vehicle 1</li> <li> <label for="make">Make</label> <input type="text" name="make" maxlength="20"> </li> <label for="model">Model</label> <input type="text" name="model" maxlength="20"> </li> <label for="color">Color</label> <input type="text" name="color" maxlength="10"> </li> <label for="plate">Plate #</label> <input type="text" name="plate" maxlength="7"> </li> </div> <div id="twocar"> <div style="display: none;" id="twocars"> <li><H2>Vehicle Information</H2></li> <li>Vehicle 1</li> <li> <label for="make">Make</label> <input type="text" name="make" maxlength="20"> </li> <label for="model">Model</label> <input type="text" name="model" maxlength="20"> </li> <label for="color">Color</label> <input type="text" name="color" maxlength="10"> </li> <label for="plate">Plate #</label> <input type="text" name="plate" maxlength="7"> </li> <li>Vehicle 2</li> <li> <label for="make2">Make</label> <input type="text" name="make" maxlength="20"> </li> <label for="model2">Model</label> <input type="text" name="model" maxlength="20"> </li> <label for="color2">Color</label> <input type="text" name="color" maxlength="10"> </li> <label for="plate2">Plate #</label> <input type="text" name="plate" maxlength="7"> </li> </div> <div style="display: none;" id="threecars"> <li><H2>Vehicle Information</H2></li> <li>Vehicle 1</li> <li> <label for="make">Make</label> <input type="text" name="make" maxlength="20"> </li> <label for="model">Model</label> <input type="text" name="model" maxlength="20"> </li> <label for="color">Color</label> <input type="text" name="color" maxlength="10"> </li> <label for="plate">Plate #</label> <input type="text" name="plate" maxlength="7"> </li> <li>Vehicle 2</li> <li> <label for="make2">Make</label> <input type="text" name="make" maxlength="20"> </li> <label for="model2">Model</label> <input type="text" name="model" maxlength="20"> </li> <label for="color2">Color</label> <input type="text" name="color" maxlength="10"> </li> <label for="plate2">Plate #</label> <input type="text" name="plate" maxlength="7"> </li> <li>Vehicle 3</li> <li> <label for="make3">Make</label> <input type="text" name="make" maxlength="20"> </li> <label for="model3">Model</label> <input type="text" name="model" maxlength="20"> </li> <label for="color3">Color</label> <input type="text" name="color" maxlength="10"> </li> <label for="plate3">Plate #</label> <input type="text" name="plate" maxlength="7"> </li> <li> </div> <button type="reset" value="Reset">Reset</button> <button type="submit" value="Submit">Submit</button> </li> </ul> </form> </body> </html> I'll check out the validation problem now Quote Link to comment Share on other sites More sharing options...
Matthew Herren Posted October 5, 2009 Author Share Posted October 5, 2009 Thanks The Check Boxes Work Now. Gotta Run But I'll Check In Tomorrow. Thanks Again Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.