Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    19
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Radio Button Selection

    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:&nbsp;</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:&nbsp;</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.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,313
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    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:-

    Code:
    <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)
    Last edited by Philip M; 12-20-2010 at 07:01 PM. Reason: Typo

  • Users who have thanked Philip M for this post:

    SunJune (12-22-2010)

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    19
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks Philllip for the solution. I think I was going in the wrong direction.But where is the "Thank User For This Post" button".

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,148
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Exclamation

    Quote Originally Posted by SunJune View Post
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •