verN Posted February 26, 2007 Share Posted February 26, 2007 hi I want my form to be hidden and when the user clicks on one of the radio buttons a form appears and vice versa for the other radio button. However, i have tried doing this but the form appears on another page and the radio buttons disappear <html> <body> <SCRIPT LANGUAGE="Javascript" type="text/javascript"> function showForm1() { //document.write('<input type="button" value="Submit" onclick="validateForm();" />'); document.write('<input name="roomNo" type="text" id="roomNo" value="MB146" size="10" />'); } function showForm2() { } </SCRIPT> <form method="post" action="speakers.php" name="form1"> <p>Seminar speaker:</p> <p><input name="radiobutton" type="radio" value="internal" onClick="showForm1();"> Internal speaker (KEG member) <input name="radiobutton" type="radio" onClick="showForm2()" value="external"> External speaker</p> </form> </body> </html> Quote Link to comment Share on other sites More sharing options...
fenway Posted February 26, 2007 Share Posted February 26, 2007 You shouldn't write out the elements conditionally, you should show/hide them instead. Quote Link to comment Share on other sites More sharing options...
verN Posted February 26, 2007 Author Share Posted February 26, 2007 i'm new to php could you explain a bit further what you mean by having them hidden. thanks Quote Link to comment Share on other sites More sharing options...
fenway Posted February 27, 2007 Share Posted February 27, 2007 Nothing to do with PHP... write out all of the elements, and then use CSS styles to show/hide the appropriate sections via JS. Quote Link to comment Share on other sites More sharing options...
verN Posted February 27, 2007 Author Share Posted February 27, 2007 how would I do this show/hide the values can you give me a example this is my improved code now- <html> <body> <SCRIPT LANGUAGE="Javascript" type="text/javascript"> function showForm1() { } function showForm2() { var f = document.getElementById('f'); f.innerHTML = 'Speaker title: <input name="title" type="text" size="10" />'; f.innerHTML += ' Forename: <input name="fName" type="text" size="15" />'; f.innerHTML += ' Surname: <input name="sName" type="text" size="15" />'; f.innerHTML += '<p>Department: <input name="department" type="text" size="30" /> </p>'; f.innerHTML += '<p>University: <input name="uni" type="text" size="30" /></p>'; f.innerHTML += '<p>Email address: <input name="email" type="text" size="25" /></p>'; f.innerHTML += '<p>URL address: <input name="url" type="text" size="50" /></p>'; f.innerHTML += '<p>Contact address line 1: <input name="address1" type="text" size="35" /></p>'; f.innerHTML += '<p>Address line 2: (optional) <input name="address2" type="text" size="35" /></p>'; f.innerHTML += '<p>City: <input name="city" type="text" size="25" /></p>'; f.innerHTML += '<p>Postcode: <input name="postcode" type="text" size="15" /></p>'; f.style.display = 'block'; } // checks to see if atleast one radio button is selected. function formVal() { if (!document.form1.speaker[0].checked && !document.form1.speaker[1].checked) { alert("Please select the seminar speaker!"); return false; } else { return true; } } </SCRIPT> <form method="post" action="speakers.php" name="form1" onsubmit="formVal()"> <p><b>Seminar speaker:</b></p> <p><input name="speaker" type="radio" value="internal" onClick="showForm1();"> Internal speaker (KEG member) <input name="speaker" type="radio" value="external" onClick="showForm2()"> External speaker</p> <div style="display: none;" id="f"></div> <input type="submit" name="Submit" value="Submit" /> </form> </body> </html> Quote Link to comment Share on other sites More sharing options...
fenway Posted February 27, 2007 Share Posted February 27, 2007 Not exactly... you're still using JS to write out HTML... Quote Link to comment Share on other sites More sharing options...
verN Posted February 27, 2007 Author Share Posted February 27, 2007 can you elaborate since i am still learning javascrpit thanks an example would be good I don't understand how to hide and show Quote Link to comment Share on other sites More sharing options...
fenway Posted February 27, 2007 Share Posted February 27, 2007 Pretend it's all being shown, and write out a normal HTML form. Quote Link to comment Share on other sites More sharing options...
verN Posted February 27, 2007 Author Share Posted February 27, 2007 <html> <head> <title>Untitled Document</title> </head> <body> <form name="form1" method="post" action="externalspeakerform.php"> <p><b>Seminar speaker:</b></p> <p><input name="speaker" type="radio" value="internal" onClick="showForm1();"> Internal speaker (KEG member) <input name="speaker" type="radio" value="external" onClick="showForm2()"> External speaker</p> Speaker title: <input name="title" type="text" size="10" /> Forename: <input name="fName" type="text" size="15" /> Surname: <input name="sName" type="text" size="15" /> <p>Department: <input name="department" type="text" size="30" /> </p> <p>University: <input name="uni" type="text" size="30" /> </p> <p> Email address: <input name="email" type="text" size="25" /> </p> <p>URL address: <input name="url" type="text" size="50" /> </p> <p>Contact address line 1: <input name="address1" type="text" size="35" /> </p> <p>Address line 2: (optional) <input name="address2" type="text" size="35" /> </p> <p>City: <input name="city" type="text" size="25" /> </p> <p>Postcode: <input name="postcode" type="text" size="15" /> </p> <p> </p> <input type="submit" name="Submit" value="Submit" /> </form> <p> </p> <p> </p> </body> </html> Quote Link to comment Share on other sites More sharing options...
fenway Posted February 27, 2007 Share Posted February 27, 2007 Great... now wrap each of the section you want hidden with a DIV, and set it's display properly to 'none' in CSS. Now, onclick, simply toggle the display attribute, and voila! 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.