[RESOLVED] dynamic forms using javascript

verN

Hi all I wanted to know if it was possible to create forms using javascript. Basically I have two radio buttons when one radio button is clicked I want a particular form on the same page to appear and if the other radio button is clicked another form to display.

I am new to this and my problem is that when I click on one of the radio buttons the form appears on another page and the radio buttons disappear.Here's the code below-

<html>
<body>
<?
         // connect to the database
         require_once('../includes/mysql_connection.php');
?>

<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>

thanks

cahva

I am not a javascript guru but something like this would do:

<SCRIPT LANGUAGE="Javascript" type="text/javascript">
<!--
function showForm1()
{
	var f = document.getElementById('f');
	f.innerHTML ='<input name="roomNo" type="text" id="roomNo" value="MB146" size="10" />';
	f.style.display = 'block';
}
-->
</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>
	<div style="display: none;" id="f"></div>
</form>

That should get you started.

NogDog

If this form is for general availability on the web, remember that anywhere from around 5% to 10% of your site visitors (depending on whose statistics you want to believe) will not have JavaScript running on their browsers; so you'll want to have a fallback mechanism of some sort in place if this implementation doesn't make sense when you turn off JS in your browser.

verN

is there another way of producing a form depending on the user's input. The approach mentioned above works however there is going to be atleast ten more text inputs required. Or is this the only way
thanks

JPnyc

Is there a basic set of elements that will ALWAYS be present? I mean there has to be at least one that you start with everytime, probably more than one.

verN

<html>
<body>

<SCRIPT LANGUAGE="Javascript" type="text/javascript">

function showForm1()
{
	var f = document.getElementById('f');
	f.innerHTML =  'Speaker title: &nbsp;<input name="title" type="text" size="10" />';
	f.innerHTML += '&nbsp;&nbsp;Forename:&nbsp;<input name="fName" type="text" size="15" />';
	f.innerHTML += '&nbsp;&nbsp;Surname:&nbsp;<input name="sName" type="text" size="15" />';
	f.innerHTML += '<p>Department:&nbsp;&nbsp;&nbsp;<input name="department" type="text" size="30" /> &nbsp;</p>';
	f.innerHTML += '<p>University:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="uni" type="text" size="30" /></p>'; 
    f.innerHTML += '<p>Email address:&nbsp;<input name="email" type="text" size="25" /></p>';
	f.innerHTML += '<p>URL address: &nbsp;<input name="url" type="text" size="50" /></p>';
	f.innerHTML += '<p>Contact address line 1: &nbsp;&nbsp;&nbsp;&nbsp;<input name="address1" type="text" size="35" /></p>';
	f.innerHTML += '<p>Address line 2: (optional)&nbsp;&nbsp;<input name="address2" type="text" size="35" /></p>';
	f.innerHTML += '<p>City: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="city" type="text" size="25" /></p>';
	f.innerHTML += '<p>Postcode: <input name="postcode" type="text" size="15" /></p>';
	f.style.display = 'block';
}

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>
	<div style="display: none;" id="f"></div>
</form>
</body>
</html>

i don't know what you meant by elements? When the user clicks on the external speaker a particular form appears as shown in the code above.
When the user clicks on internal speaker another form appears. From looking at the code above is this the only way of doing it.

If so, how would I store the values into the database i'm thinking of using hidden values but how would I get access to them form te above code

thanks

JPnyc

Set the default display of one or both to 'none'; Then, when the user clicks on the speaker, set the appropriate one's display to "block".