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> Link to comment https://forums.phpfreaks.com/topic/40219-solved-changing-the-form-depending-on-the-radio-button/ 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. Link to comment https://forums.phpfreaks.com/topic/40219-solved-changing-the-form-depending-on-the-radio-button/#findComment-194629 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 Link to comment https://forums.phpfreaks.com/topic/40219-solved-changing-the-form-depending-on-the-radio-button/#findComment-194808 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. Link to comment https://forums.phpfreaks.com/topic/40219-solved-changing-the-form-depending-on-the-radio-button/#findComment-195348 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> Link to comment https://forums.phpfreaks.com/topic/40219-solved-changing-the-form-depending-on-the-radio-button/#findComment-195526 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... Link to comment https://forums.phpfreaks.com/topic/40219-solved-changing-the-form-depending-on-the-radio-button/#findComment-195529 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 Link to comment https://forums.phpfreaks.com/topic/40219-solved-changing-the-form-depending-on-the-radio-button/#findComment-195532 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. Link to comment https://forums.phpfreaks.com/topic/40219-solved-changing-the-form-depending-on-the-radio-button/#findComment-195534 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> Link to comment https://forums.phpfreaks.com/topic/40219-solved-changing-the-form-depending-on-the-radio-button/#findComment-195538 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! Link to comment https://forums.phpfreaks.com/topic/40219-solved-changing-the-form-depending-on-the-radio-button/#findComment-195576 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.