Form changes with radio button selection

richard.york · December 19th, 2003, 04:35 PM

I think you are making things a bit too complex. Here is a working version.

Code:

<html>
    <head>
    <body>
        <STYLE TYPE="text/css"> 
 
        .forminput { 
            display: none; 
            width: 400px; 
            height: 120px; 
            background-color: #ffffff; 
            border: thin none #003399;
            padding: 5px 5px 5px 5px;
        }

    </style> 
    <SCRIPT LANGUAGE="JavaScript">

        function showLayer(number)
        {
            // Hide last displayed form

            these_forms = new Array();
            these_forms[0] = 1;
            these_forms[1] = 2;
            these_forms[2] = 3;

            for (var i = 0; i < these_forms.length; i++)
            {
                if (these_forms[i] != number)
                {
                    if (document.getElementById("idForm" + these_forms[i]).style.display == 'block')

                        document.getElementById("idForm" + these_forms[i]).style.display = 'none'

                }
            }

            // Show selected form

            document.getElementById("idForm" + number).style.display = 'block';            
        }

    </SCRIPT> 
</head> 

<body> 
<div align="center">
<form name="form1" method="post" action="javascript:void(0);"> 
  <table width="600" border="1" cellspacing="0" cellpadding="0"> 
    <tr> 
      <td>
          <input type="radio" name="radio" value="idtext" onClick="showLayer(1)">Form Set 1</input>
      </td>
      <td>
          <input type="radio" name="radio" value="idform1" onClick="showLayer(2)">Form Set 2</input>
      </td> 
      <td>
          <input type="radio" name="radio" value="idform2" onClick="showLayer(3)">Form Set 3</input>
       </td> 
    </tr>
</table>
</form>
<table width="600" border="1" cellspacing="0" cellpadding="0">
    <tr> 
    <td colspan="3"> 
        <div id="idForm1" class='forminput'> 
            <FORM ACTION="showdata.htm" METHOD="GET" NAME="frmExample1"> 
                <B>Name:</B><BR> 
                    <INPUT TYPE="Text" NAME="Name" VALUE="" CLASS="input"> 
                <BR> 
                <B>E-mail:</B><BR> 
                    <INPUT TYPE="Text" NAME="Email" VALUE="" CLASS="input"> 
                <BR>
            </FORM>
        </div> 
        <div id="idForm2"  class='forminput'> 
            <FORM ACTION="showdata.htm" METHOD="GET" NAME="frmExample1"> 
                <B>Address:</B><BR> 
                    <INPUT TYPE="Text" NAME="Name" VALUE="" CLASS="input"> 
                <BR>
                <B>City:</B><BR> 
                    <INPUT TYPE="Text" NAME="Email" VALUE="" CLASS="input"> 
                <BR> 
            </FORM> 
        </DIV>   
        <DIV id="idForm3" class='forminput'> 
          <FORM ACTION="showdata.htm" METHOD="GET" NAME="frmExample2"> 
            <B>Phone Number</B><BR> 
            <INPUT TYPE="Text" NAME="Phone" VALUE="" CLASS="input"> 
            <BR> 
            <B>State</B><BR> 
            <INPUT TYPE="Text" NAME="State" VALUE="" CLASS="input"> 
            <BR> 
          </FORM> 
        </DIV></td> 
    </tr> 

  </table> 
</div> 
</body> 
</html>

: )
Rich

:::::::::::::::::::::::::::::::::
Smiling Souls
http://www.smilingsouls.net
:::::::::::::::::::::::::::::::::

richard.york · December 19th, 2003, 04:49 PM

Ok some mark-up errors in there.. but you get the idea. You cannot use both the visibility and the display property at the same time, at least in this application. The z-index, left, top properties that you were using didn't do anything so I toasted those. Also the point of having a style sheet is to mimimize repetition, so I changed your style sheet to use a single class instead of three id references and your JavaScript to change the style property instead of the class. Your radio form should be set-up as one form and not three, as separate forms you have no relation between radio buttons, thus your dilemma. I didn't look too closely at your Javascript I just did what I would have done there. If you're forming JavaScript via PHP that script could still be made dynamic to fill any situation where you want to be able to display a different form dynamically.

hth,
: )
Rich

:::::::::::::::::::::::::::::::::
Smiling Souls
http://www.smilingsouls.net
:::::::::::::::::::::::::::::::::

jekel13 · December 19th, 2003, 04:49 PM

Thank you--If I spent any more time on this I would have gone crazy. Sometimes it just takes an outside eye to see what your doing wrong.

Thanks again.

Rob :-)

nikolai · December 19th, 2003, 05:00 PM

I don't know why I used the "visibility" style instead of the "display" one. I got the two confused. I've written a similar application and, now that I dig through it's source, see that I used "display".

The problem with "visibility" is that something that's "invisible" still affects the layout of the objects in the page.

I'm glad it's working, and thanks Rich very much for your insight and correction!

Take care,

Nik
http://www.bigaction.org/

jekel13 · December 19th, 2003, 05:14 PM

Rich,

If I want 1 of the forms to be visible on page load, how do I do that? I know how to have that radio button select, but not the form visible.

Thanks,

Rob :)

richard.york · December 19th, 2003, 06:10 PM

Quote:

quote:
If I want 1 of the forms to be visible on page load, how do I do that? I know how to have that radio button select, but not the form visible.

I think its as easy as placing a style='display: block' inside the div tag of the one you want to be visible by default. The style attribute will override the display property defined in the class, but both should be the same in terms of referencing the property via JS. Give that a try. Otherwise you can add JS code outside the scope of the function, in global scope, that sets the display property via getElementById of the default element to 'block'.

Quote:

quote:
I don't know why I used the "visibility" style instead of the "display" one. I got the two confused. I've written a similar application and, now that I dig through it's source, see that I used "display".

Well I wouldn't have known but I just designed an application that does something similar and ran into the same problem. Glad to be of help : )

: )
Rich

:::::::::::::::::::::::::::::::::
Smiling Souls
http://www.smilingsouls.net
:::::::::::::::::::::::::::::::::

avail1now · February 17th, 2006, 04:56 PM

were you able to get your form to change based on user's choice of which radio button? could you share a link of how this worked, I have a similar need as this.

cheers, deano