Radio Button Selection

SunJune

12-20-2010, 05:32 PM

Hi,

I am trying to use the radio button to display the information for the users. For example, when I click radio button "1", the form should display 1 text box each for first name, last name and so on. When the user clicks on radio button 2, there should be text boxes displayed for user 1 and user 2 to enter their info(first name, last name and so on).

I looked at the forum, but couldn't find something similiar.Please advise.

Something like
================================
Number of Users 1 2 3

# if radio button 2 is selected then

User 1
First Name
Last Name

User 2
First Name
Last Name

================================

The code is as below:

<html>
<head>
<script type="text/javascript">

function showUser()
{

for(i=0;i<document.form.users.length;i++)
{
if (document.form.users[i].checked)
val=parseInt(document.form.users[i].value);
for(j=0;j<=val;j++)
{
document.form.write("<table cellSpacing=1 cellPadding=0 width=600 border=0>");
document.form.write("<tr>
<td width='20%' align='right'><font color="#660000"><b>First Name: </b></font></td>");
document.form.write("<td><input type='text' name='fname1' size='25' maxlength='25'></td></tr>");
document.form.write("<tr><td width='20%' align='right'><font color="#660000"><b>Last Name: </b></font></td>");
document.form.write("<td><input type='text' name='lname1' size='25'maxlength='25'></td></tr>");
document.form.write("</table>");

}
}

}

</script>
</head>
<form>
Check the number of users to display additional input fields.<br><br>

<input type="radio" name="users" value="1" onclick = "showUser()"/> 1<br/>
<input type="radio" name="users" value="2" onclick = "showUser()"/>2 <br/>
<input type="radio" name="users" value="3" onclick = "showUser()"/>3 <br/>

</form>

</html>

========================================================
Thanks in advance.

Philip M

12-20-2010, 05:55 PM

You cannot use document.write() for this, and there is no such thing as document.form.write(). document.write statements must be run before the page finishes loading. Any document.write statement that runs after the page finishes loading will create a new page and overwrite all of the content of the current page. So document.write is at best really only useful to write the original content of your page. It cannot be used to update the content of your page after that page has loaded.

Try this:-

<script type = "text/javascript">
function showUser(howMany) {
for (var i=1; i<=3; i++) {
document.getElementById("mydiv" + i).style.display="none";
}
for (var i= 1; i<=howMany; i++) {
document.getElementById("mydiv" + i).style.display="block";
}
}
</script>

<form name = "myform">
Check the number of users to display additional input fields.<br><br>

<input type="radio" onclick = "showUser(1)"/>1<br/>
<input type="radio" onclick = "showUser(2)"/>2 <br/>
<input type="radio" onclick = "showUser(3)"/>3 <br/>

<div id = "mydiv1" style="display:none">
USER 1
First Name <input type = "text name = "fn1" id = "fn1">
Last Name <input type = "text name = "lstn1" id = "lstn1">
</div>
<div id = "mydiv2" style="display:none">
USER 2
First Name <input type = "text name = "fn2" id = "fn2">
Last Name <input type = "text name = "lstn2" id = "lstn2">
</div>
<div id = "mydiv3" style="display:none">
USER 3
First Name <input type = "text name = "fn3" id = "fn3">
Last Name <input type = "text name = "lstn3" id = "lstn3">
</div>

BTW, the time to say "thanks" is afterwards, not beforehand which gives the - doubtless unintended - impression that you take other people's voluntary unpaid assistance and expertise for granted. Or as British politician Neil Kinnock put it, "Don't belch before you have had the meal." Prefer to use "please" beforehand and if you find a response helpful then you can use the "Thank User For This Post" button.

"Success is the ability to go from one failure to another with no loss of enthusiasm." - Sir Winston Churchill, British politician (1874 - 1965)

SunJune

12-21-2010, 04:05 PM

Thanks Philllip for the solution. I think I was going in the wrong direction.But where is the "Thank User For This Post" button".

jmrker

12-21-2010, 04:37 PM

Thanks Philllip for the solution. I think I was going in the wrong direction.But where is the "Thank User For This Post" button".

Look to the lower right of the post you wish to thank! :eek: :D