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 14 of 14
  1. #1
    Regular Coder YaymeQ's Avatar
    Join Date
    Feb 2008
    Location
    virginia
    Posts
    140
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Hide and show form fields

    Supposing I had a form that went something like this:

    Is your hair green?
    How long has it been green?
    Do you like it green?

    Is it daytime right now?
    ect. ect.

    Could I hide how long has it been green and do you like it green if they put no and show it if they put yes?
    Would I do that with CSS? or would it have to be javascript? I don't know anything about javascript.

    Thanks guys.
    Where is the "any" key??!

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    yeah, thats all javascript!!

    It has to do with disableing and ableing a form field!

    heres a good site for you

    http://www.codetoad.com/javascript/e...rm_element.asp

  • #3
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    ...or maybe something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <script type="text/javascript">
    window.onload = function()
    {
    document.getElementById('select1').style.display='none';
    document.getElementById('select2').style.display='none';
    }
    function show()
    {
    document.getElementById('select1').style.display = '';
    }
    function hide()
    {
    document.getElementById('select1').style.display = 'none';
    }
    function show2()
    {
    document.getElementById('select2').style.display = '';
    }
    function hide2()
    {
    document.getElementById('select2').style.display = 'none';
    }
    </script>
    <style type="text/css">
    body,html{spacing:0;padding:0;font-family:tahoma;font-size:10pt;}
    #wrap{width:500px;margin:5px auto;background:#efefff;border:1px solid #222;padding:10px;text-align:center; height:295px;}
    #select1,#select2{width:200px;border:1px solid #000; padding:2px;background:#cfcfcf;margin:5px;}
    </style>
    </head>
    <body>
    <div id="wrap">
    Is your hair green?
    <div style="height:120px;">
    	<input type="radio" name="answer" onClick="show()">YES
    	<input type="radio" name="answer" onClick="hide()">NO
    	</br>
    		<div id="select1">
    			How long has it been green?
    			<input type="text" name="button1">
    			<br/><br/>
    			Do you like it green?
    			<select>
    				<option>Yes</option>
    				<option>No</option>
    			</select>
    		</div>
    </div>
    <hr/>
    <br/>
    Is it Daytime right now?
    	<div style="height:120px;">
    	<input type="radio" name="answer2" onClick="show2()">YES
    	<input type="radio" name="answer2" onClick="hide2()">NO
    	</br>
    		<div id="select2">
    		How long has it been daytime?
    		<input type="text" name="button1">
    		<br/><br/>
    		Do you like it daytime?
    		<select>
    			<option>Yes</option>
    			<option>No</option>
    		</select>
    		</div>
    </div>
    </div>
    </body>
    </html>
    See if it helps

  • Users who have thanked rangana for this post:

    YaymeQ (02-28-2008)

  • #4
    Regular Coder YaymeQ's Avatar
    Join Date
    Feb 2008
    Location
    virginia
    Posts
    140
    Thanks
    14
    Thanked 0 Times in 0 Posts
    okay, but that enables it no matter what they choose. In the example above, suppose they say the hair isn't green. It wouldn't make sense to enable "How long has it been green" if it's not even green. I think I need something a little more complex ... and I even have questions with that one ... oy.

    Edit: Hey rangana you posted that while I was typing, that looks complex give me a moment to look it over.
    Where is the "any" key??!

  • #5
    Regular Coder YaymeQ's Avatar
    Join Date
    Feb 2008
    Location
    virginia
    Posts
    140
    Thanks
    14
    Thanked 0 Times in 0 Posts
    That will definitely work! ... but I have 50+ fields in my form ... need coffee ...
    Where is the "any" key??!

  • #6
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    You haven't told me that it will be as large as 50 items, anyway, there's the edition....this will give you no pain:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <script type="text/javascript">
    window.onload = function()
    {
    var index;
    for(index=1;index<=50;index++)
    document.getElementById('select'+index).style.display='none';
    }
    function show(thisElement)
    {
    document.getElementById('select'+thisElement).style.display='';
    }
    function hide(thisElement)
    {
    document.getElementById('select'+thisElement).style.display='none';
    }
    </script>
    <style type="text/css">
    body,html{spacing:0;padding:0;font-family:tahoma;font-size:10pt;}
    #wrap{width:500px;margin:5px auto;background:#efefff;border:1px solid #222;padding:10px;text-align:center; height:100&#37;;}
    #select1,#select2{width:200px;border:1px solid #000; padding:2px;background:#cfcfcf;margin:5px;}
    </style>
    </head>
    <body>
    <div id="wrap">
    Is your hair green?
    <div style="height:120px;">
    	<input type="radio" name="answer1" onClick="show(1)">YES
    	<input type="radio" name="answer1" onClick="hide(1)">NO
    	</br>
    		<div id="select1">
    			How long has it been green?
    			<input type="text" name="button1">
    			<br/><br/>
    			Do you like it green?
    			<select>
    				<option>Yes</option>
    				<option>No</option>
    			</select>
    		</div>
    </div>
    <hr/>
    <br/>
    Is it Daytime right now?
    	<div style="height:120px;">
    	<input type="radio" name="answer2" onClick="show(2)">YES
    	<input type="radio" name="answer2" onClick="hide(2)">NO
    	</br>
    		<div id="select2">
    		How long has it been daytime?
    		<input type="text" name="button1">
    		<br/><br/>
    		Do you like it daytime?
    		<select>
    			<option>Yes</option>
    			<option>No</option>
    		</select>
    		</div>
    </div>
    </div>
    </body>
    </html>
    See if it helps

  • #7
    Regular Coder YaymeQ's Avatar
    Join Date
    Feb 2008
    Location
    virginia
    Posts
    140
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Ooooh!! thank you thank you thank you!!!! (I'm glad I planned to do it tomorrow!) I knew there had to be a more automated way of doing it ... *Happy dance*
    Where is the "any" key??!

  • #8
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    No problem!..You're completely welcome

  • #9
    Regular Coder YaymeQ's Avatar
    Join Date
    Feb 2008
    Location
    virginia
    Posts
    140
    Thanks
    14
    Thanked 0 Times in 0 Posts
    I'm sorry to be back on this topic again, but do I have to modify the javascript at all or just plug in my div id="select1" 2 3 ect in the html? and is it possible to have a table inside a div inside a table? I was using a table to align all the fields and labels, I think I heard somewhere that css should be used for that though ... but I didn't make the form and I really don't want to redo the whole thing (Mostly because I'm not quite sure what method to use) I'm testing it locally before I put it online (I know you people like to ask for links) so I can't give you a link to it. Sorry.
    Where is the "any" key??!

  • #10
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Quote Originally Posted by YaymeQ View Post
    I'm sorry to be back on this topic again, but do I have to modify the javascript at all or just plug in my div id="select1" 2 3 ect in the html? and is it possible to have a table inside a div inside a table? I was using a table to align all the fields and labels, I think I heard somewhere that css should be used for that though ... but I didn't make the form and I really don't want to redo the whole thing (Mostly because I'm not quite sure what method to use) I'm testing it locally before I put it online (I know you people like to ask for links) so I can't give you a link to it. Sorry.
    One question at a time please. Anyway,
    1. You don't need to modify the javascript. Just have the div names to select1,2,3,......50. You could modify your javascript, but this will be another work load.
    Just remember to have a different divs for different forms.
    Don't worry, the codes i've given you is capable of showing/hiding upto 50 forms

    2. Yes, it is possible to have a table inside a div.

    ...and if nothing work, you could..at all times, zip your files.

    See if it helps

  • #11
    Regular Coder YaymeQ's Avatar
    Join Date
    Feb 2008
    Location
    virginia
    Posts
    140
    Thanks
    14
    Thanked 0 Times in 0 Posts
    I thought so ... I got it to work, but now the div shows up in a different div ... been trying to figure that one out all day. I'm figuring it's gotta be a typo though, last time I had this problem I had ended a table tag like this: </table? Totally threw off the whole thing. lol I might be back.
    Where is the "any" key??!

  • #12
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    It's really difficult to point on which part of the <div> has the error. Unluckily, it is not online,.

    Just tell us how you've gone so far,,,and how many hair is left in your head

  • #13
    Regular Coder YaymeQ's Avatar
    Join Date
    Feb 2008
    Location
    virginia
    Posts
    140
    Thanks
    14
    Thanked 0 Times in 0 Posts
    It works! lol I was missing an opening <td> tag. Ah ha ha. Thanks to you, the form is now perfect!
    Where is the "any" key??!

  • #14
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    No problem!..You're completely welcome.
    Glad to know to find the fix yourself...and funny to realize that it was the <td> that cause the mess.

    Good Luck to the site


  •  

    Posting Permissions

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