SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast BigKingy's Avatar
    Join Date
    Jun 2004
    Location
    London
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Using Javascript in Forms, HELP!...

    I have been trying to tidy up our Web Forms, by hiding some of the fieldsets from the user's view until they click on a check box, which then displays the extra fields for the user to fill out.

    I have it working fine, except for some strange reason the 2nd check box in the page will not display when clicked on. There is no Javascript error message in the browser, and if I remove the 1st checkbox from the page, the 2nd checkbox suddenly works again.

    It's probably a stupidly easy thing to spot, but for the life of me I cannot find it! (probably a Monday morning thing!).

    Here is the code im using :

    Code:
    <html lang="en">
    <head>
    <title>Form</title>
    
    <script type="text/javascript" language="JavaScript">
    function toggle_it_interest(itemID){ 
          // Toggle visibility between none and inline 
          if ((document.form.cboxint.checked)) 
          { 
            document.getElementById(itemID).style.display = 'inline'; 
          } else { 
            document.getElementById(itemID).style.display = 'none'; 
          } 
      } 
    
    </script>
    <script language="javascript"> 
    
    function toggle_it_prod(itemID){ 
          // Toggle visibility between none and inline 
          if ((document.form.cboxprod.checked)) 
          { 
            document.getElementById(itemID).style.display = 'inline'; 
          } else { 
            document.getElementById(itemID).style.display = 'none'; 
          } 
      } 
    
    </script>
    <script language="javascript"> 
    
     function toggle_it_app(itemID){ 
          // Toggle visibility between none and inline 
          if ((document.form.cboxapp.checked)) 
          { 
            document.getElementById(itemID).style.display = 'inline'; 
          } else { 
            document.getElementById(itemID).style.display = 'none'; 
          } 
      } 
    
    </script>
    <script language="javascript"> 
    
     function toggle_it_com(itemID){ 
          // Toggle visibility between none and inline 
          if ((document.form.cboxcom.checked)) 
          { 
            document.getElementById(itemID).style.display = 'inline'; 
          } else { 
            document.getElementById(itemID).style.display = 'none'; 
          } 
      }
    </script>
    
    </head>
    
    <body>
    
    <form name="form" id="form" action="http://www.mydomain.com/form.asp?formid=1" method="post" style="margin-bottom: 0">
    		<p><FIELDSET><LEGEND>Your Contact Details </LEGEND><BR>
    <TABLE align=center>
    <TBODY>
    <TR>
    <TD vAlign=top>
    <P><FONT color=#6689cc><STRONG>E-Mail</STRONG></FONT></P></TD>
    <TD vAlign=top>
    <P><INPUT maxLength=256 size=25 name=E-Mail></P></TD></TR>
    <TR>
    <TD vAlign=top>
    <P>&nbsp;</P></TD>
    <TD vAlign=top>
    <P>&nbsp;</P></TD></TR>
    <TR>
    <TD vAlign=top>
    <P>First Name</P></TD>
    <TD vAlign=top>
    <P><SELECT name=Title> <OPTION value="" selected>Title:</OPTION> <OPTION value=Mr>Mr</OPTION> <OPTION value=Miss>Miss</OPTION> <OPTION value=Ms>Ms</OPTION> <OPTION value=Mrs>Mrs</OPTION> <OPTION value=Dr>Dr</OPTION> <OPTION value=Prof>Prof.</OPTION></SELECT> <INPUT maxLength=256 size=21 name="Last Name"></P></TD></TR>
    <TR>
    <TD vAlign=top>
    <P><FONT color=#6689cc><STRONG>Last Name</STRONG></FONT></P></TD>
    <TD vAlign=top>
    <P><INPUT maxLength=256 size=31 name="Last Name"></P></TD></TR>
    <TR>
    <TD vAlign=top>
    <P><FONT color=#6689cc><STRONG>Organization</STRONG></FONT></P></TD>
    <TD vAlign=top>
    <P><INPUT maxLength=256 size=31 name=Organization></P></TD></TR>
    <TR>
    <TD vAlign=top>
    <P>Department</P></TD>
    <TD vAlign=top>
    <P><INPUT maxLength=256 size=31 name=Department></P></TD></TR>
    <TR>
    <TD vAlign=top>
    <P>Address</P></TD>
    <TD vAlign=top>
    <P><INPUT maxLength=256 size=31 name=Address1></P></TD></TR>
    <TR>
    <TD vAlign=top></TD>
    <TD vAlign=top>
    <P><INPUT maxLength=256 size=31 name=Address2></P></TD></TR>
    <TR>
    <TD vAlign=top>
    <P>State/Province</P></TD>
    <TD vAlign=top>
    <P><INPUT maxLength=256 size=31 name=Address3></P></TD></TR>
    <TR>
    <TD vAlign=top>
    <P>Postal Code/ZIP</P></TD>
    <TD vAlign=top>
    <P><INPUT maxLength=256 size=15 name="Postal Code"></P></TD></TR>
    <TR>
    <TD vAlign=top>
    <P>Telephone</P></TD>
    <TD vAlign=top>
    <P><INPUT maxLength=256 size=31 name=Tel></P></TD></TR>
    <TR>
    <TD vAlign=top>
    <P>Fax</P></TD>
    <TD vAlign=top>
    <P><INPUT maxLength=256 size=31 name=Fax></P></TD></TR>
    <TR>
    <TD vAlign=top colSpan=4>
    <P align=center><INPUT type=checkbox value="Add my details please" name=Database>Please keep me informed with up to date information.</P></TD></TR></TBODY></TABLE><BR></FIELDSET> 
    <P>&nbsp;</P><INPUT id=cboxprod onclick="toggle_it_interest('interest')" type=checkbox value=on name=cboxint> I know what my interest level is <BR>
    <FIELDSET id=interest style="DISPLAY: none"><LEGEND>Your Interest</LEGEND><BR>
    <TABLE width="100%" align=center>
    <TBODY>
    <TR>
    <TD>
    <P>My interest is:</P>
    <P><INPUT type=radio value="Information Only" name="Interest Level">Information only</P></TD>
    <TD>
    <P>I intend to purchase:</P>
    <P><INPUT type=radio value=Now! name="I intend to purchase">Now!</P></TD></TR>
    <TR>
    <TD>
    <P><INPUT type=radio value="Possible Purchase" name="Interest Level">Possible purchase</P></TD>
    <TD>
    <P><INPUT type=radio value="Within 3 months" name="I intend to purchase">Within 3 months</P></TD></TR>
    <TR>
    <TD>
    <P><INPUT type=radio value="I Have Funding" name="Interest Level">I have funding</P></TD>
    <TD>
    <P><INPUT type=radio value="Within 6 months" name="I intend to purchase">Within 6 months</P></TD></TR>
    <TR>
    <TD>
    <P><INPUT type=radio value="I am applying for funds" name="Interest Level">I am applying for funds</P></TD>
    <TD>
    <P><INPUT type=radio value="Within 12 months" name="I intend to purchase">Within 12 months</P></TD></TR>
    <TR>
    <TD>
    <P><INPUT type=checkbox value="Please call me" name=Salesperson>Salesperson please call</P></TD>
    <TD>
    <P><INPUT type=radio value="More than 12 months" name="I intend to purchase">More than 12 months</P></TD></TR></TBODY></TABLE><BR></FIELDSET> <BR><INPUT id=cboxprod onclick="toggle_it_prod('product')" type=checkbox value=on name=cboxprod> I would like to receive information on a specific product <BR>
    <FIELDSET id=product style="DISPLAY: none"><LEGEND>Please Send Product Information For</LEGEND><BR>
    <TABLE align=center>
    <TBODY>
    <TR>
    <TD colSpan=6>
    <P align=center><INPUT type=checkbox value=on name="General Products"> General Product Information</P></TD></TR>
    <TR>
    <TD colSpan=6></TD></TR>
    <TR>
    <TD></TD>
    <TD vAlign=top>
    <P><STRONG>System 1</STRONG></P></TD>
    <TD></TD>
    <TD vAlign=top>
    <P><STRONG>System 2</STRONG></P></TD>
    <TD></TD>
    <TD vAlign=top>
    <P><STRONG>Specialist Systems</STRONG></P></TD></TR>
    <TR>
    <TD vAlign=top>
    <P><INPUT type=checkbox value="Please send product information for Product 1" name="Product1"> </P></TD>
    <TD vAlign=top>
    <P>Product 1</P></TD>
    <TD vAlign=top>
    <P><INPUT type=checkbox value="Please send product information for Product 2" name="Product2"> </P></TD>
    <TD vAlign=top>
    <P>Product 2</P></TD>
    <TD vAlign=top>
    <P><INPUT type=checkbox value="Please send product information for Product 3" name="Product3"> </P></TD>
    <TD vAlign=top>Product 3</TD></TR>
    <TR>
    <TD vAlign=top>
    <P><INPUT type=checkbox value="Please send product information for Product 4" name="Product4"> </P></TD>
    <TD vAlign=top>
    <P>Product 4</P></TD>
    <TD vAlign=top>
    <P><INPUT type=checkbox value="Please send product information for Product 5" name="Product5"> </P></TD>
    <TD vAlign=top>
    <P>Product 5</P></TD>
    <TD vAlign=top>
    <P><INPUT type=checkbox value="Please send product information for Product 6" name="Product6"> </P></TD>
    <TD vAlign=top>
    <P>Product 6</P></TD></TR>
    </TBODY></TABLE></FIELDSET> <BR><INPUT id=cboxapp onclick="toggle_it_app('apps')" type=checkbox value=on name=cboxapp> I know what my Application is <BR>
    <FIELDSET id=apps style="DISPLAY: none"><LEGEND>My Application is:</LEGEND>
    <TABLE width="100%" align=center>
    <TBODY>
    <TR>
    <TD>
    <P><INPUT type=checkbox value="Application 1," name=Applications>Application 2</P></TD>
    <TD>
    <P><INPUT type=checkbox value="Application 2," name=Applications>Application 2</P></TD></TR>
    <TR>
    <TD>
    <P><INPUT type=checkbox value=Application 3, name=Applications>Application 3</P></TD>
    <TD>
    <P><INPUT type=checkbox value=Application 4, name=Applications>Application 4</P></TD></TR>
    <TR>
    <TD>
    <P><INPUT type=checkbox value="Application 5," name=Applications>Application 5</P></TD>
    <TD>
    <P><INPUT type=checkbox value=Application 6, name=Applications>Application 6</P></TD></TR>
    <TR>
    <TD>
    <P><INPUT type=checkbox value="Application 7," name=Applications>Application 7</P></TD>
    <TD>
    <P><INPUT type=checkbox value="Application 8," name=Applications>Application 8</P></TD></TR>
    <TR>
    <TD>
    <P><INPUT type=checkbox value="Application 9" name=Applications>Application 9</P></TD>
    <TD>
    <P>&nbsp;</P></TD></TR></TBODY></TABLE></FIELDSET> <BR><INPUT id=cboxcom onclick="toggle_it_com('comments')" type=checkbox value=on name=cboxcom> I would like to make a specific request <BR><BR>
    <FIELDSET id=comments style="DISPLAY: none"><LEGEND>Comments</LEGEND>
    <TABLE width="100%" align=center>
    <TBODY>
    <TR>
    <TD>
    <P align=center>Please include any comments or further information about your requirement below:</P>
    <P align=center><TEXTAREA name="Additional Comments" rows=5 cols=60></TEXTAREA></P></TD></TR></TBODY></TABLE></FIELDSET></p>
    		<p align="center">
            	<input type="submit" name="Send" value="Send (click once and wait)">
    			<input type="reset" name="Reset" value="Reset">
          	</p>	
    	  </form>
    
    </body>
    </html>
    Any ideas?

    Sorry for the newbie question!

    Many thanks in advance for any help received.

    Cheers.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Here are the two checkboxes you mentioned.

    Code HTML4Strict:
    <INPUT id=cboxprod onclick="toggle_it_interest('interest')" type=checkbox value=on name=cboxint>
    <INPUT id=cboxprod onclick="toggle_it_prod('product')" type=checkbox value=on name=cboxprod>

    Do you see the problem?

  3. #3
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    also it might be easier to put the toggle functions together into one function that takes 2 arguments eg
    Code:
    function toggle(what, withWhat) {
    	var jWhat = document.getElementById(what);
    	var jStyle = document.getElementById(withWhat);
    	
    	if(jStyle.checked==true) {
    	    jWhat.style.display = 'inline'; 
           } else { 
               jWhat.style.display = 'none'; 
           } 			
    }
    usage:
    Code:
    onclick="toggle('interest', 'cboxprod')"
    Just a thought!
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  4. #4
    SitePoint Enthusiast BigKingy's Avatar
    Join Date
    Jun 2004
    Location
    London
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Guys, thank you so much! I knew it would be something simple, but I just couldnt find it! Cheers!


Bookmarks

Posting Permissions

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