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 11 of 11
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    using the onChange feature with Select

    hey i have this code i am trying to get to work and i don't get why its not working so i am going to post it here and if someone who is smarter then me could come on and let me know why its not working and how i can fix it i would greatly appreciate it. if you have any questions let me know and i would be glad to answer them. thanks so much for your help.


    -------------------------------------------------------------
    Code:
    <html lang="en">
    	<title>Sysplex Quickcheck</title>
    	<head>
    		<script language = "JavaScript">
    			function showMe (it, box)
    			{
    				var vis = (box.checked) ? "block" : "none";
    				document.getElementById(it).style.display = vis;
    			}
    			show11(form)
    			{
    				if(form.Question11.value=="1")
    				{
    					showMe('div111', form)
    				}
    				if(form.Question11.value=="2")
    				{
    					showMe('div112', form)
    				}
    				if(form.Question11.value=="3")
    				{
    					showMe('div113', form)
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<form name="form" method="post">
    			<table>
    				<tbody>
    					<tr>
    						<td>
    							How many here you go's?
    							<select name="Question11" onChange="show11(this)">
    								<option SELECTED="" value=""></option>
    								<option value="1">1</option>
    								<option value="2">2</option>
    								<option value="3">3</option>
    							</select>
    						</td>
    					</tr>
    					<tr>
    						<td>
    							<div id="div111" style="display:none">
    								<table>
    									<tbody>
    										<tr>
    											<td>
    												Here you go 1
    												<INPUT TYPE="text" name="Question11a"></INPUT>
    											</td>
    										</tr>
    									</tbody>
    								</table>
    							</div>
    						</td>
    					</tr>
    					<tr>
    						<td>
    							<div id="div112" style="display:none">
    								<table>
    									<tbody>
    										<tr>
    											<td>
    												Here you go 1
    											</td>
    										</tr>
    										<tr>
    											<td>
    												Here you go 2
    											</td>
    										</tr>
    									</tbody>
    								</table>
    							</div>
    						</td>
    					</tr>
    					<tr>
    						<td>
    							<div id="div113" style="display:none">
    								<table>
    									<tbody>
    										<tr>
    											<td>
    												Here you go 1	
    											</td>
    										</tr>
    										<tr>
    											<td>
    												Here you go 2
    											</td>
    										</tr>
    										<tr>
    											<td>
    												Here you go 3
    											</td>
    										</tr>
    									</tbody>
    								</table>
    							</div>
    						</td>
    					</tr>
    				</tbody>
    			</table>
    		</form>
    	</body>
    </html>

  • #2
    New Coder
    Join Date
    Jul 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    bump...still looking for some help.

    I am trying to create a drop down menu where depending on what you choice, you get something different. thanks for your help.
    Last edited by kansurr; 07-10-2007 at 03:37 PM.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I suggest you download Firefox and use the javascript console.

    It was reporting errors the moment the page loaded.

    You need to use this.form of this in your onchange call.

    I'm not sure what you were trying to achieve when you where checked to see if the form was checked as the form has no checked properties.

    Another thing I noticed is you appear to be new to web design. I can tell by your use of tables which you shouldn't be using.

    Read the link in my sig titled "Why Tables for Layout is Stupid?".

    Finally, try this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Sysplex Quickcheck</title>
    <script type="text/javascript">
    function show11(form)
    {
    	if(form.Question11.value=="1")
    	{
    		var it = 'div111';
    	}
    	if(form.Question11.value=="2")
    	{
    		var it = 'div112';
    	}
    	if(form.Question11.value=="3")
    	{
    		var it = 'div113';
    	}
    	var elem = document.getElementById(it).style
    	elem.display = (elem.display == 'none' && document.form1.Question11.value != '') ? "block" : "none";
    }
    </script>
    </head>
    <body>
    <form method="post" name="form1" id="form1">
    	<div> How many here you go's?
    		<select name="Question11" onChange="show11(this.form)">
    			<option selected="selected" value=""></option>
    			<option value="1">1</option>
    			<option value="2">2</option>
    			<option value="3">3</option>
    		</select>
    	</div>
    	<div id="div111" style="display:none"> Here you go 1
    		<input type="text" name="Question11a">
    	</div>
    	<div id="div112" style="display:none">
    		<p>Here you go 1</p>
    		<p>Here you go 2</p>
    	</div>
    	<div id="div113" style="display:none">
    		<p>Here you go 1</p>
    		<p>Here you go 2</p>
    		<p>Here you go 3</p>
    	</div>
    </form>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    The function can be optimized like this:
    Code:
    function show11(oSel)
    {
    	var elem = document.getElementById('div11' + oSel.value).style;
    	elem.display = (elem.display == 'none' && oSel.value != '') ? "block" : "none";
    }
    Code:
    <select name="Question11" onChange="show11(this)">
    If you have a lot of Question dropdowns with the same naming pattern in the same form, you could do this:
    Code:
    function show(oSel, suffix)
    {
    	var elem = document.getElementById('div' + suffix + oSel.value).style;
    	elem.display = (elem.display == 'none' && oSel.value != '') ? "block" : "none";
    }
    Code:
    <select name="Question11" onChange="show(this, 11)">
    <option selected="selected" value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    <div id="div111" style="display:none">...</div>
    <div id="div112" style="display:none">...</div>
    <div id="div113" style="display:none">...</div>
    
    <select name="Question12" onChange="show(this, 12)">
    <option selected="selected" value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    <div id="div121" style="display:none">...</div>
    <div id="div122" style="display:none">...</div>
    <div id="div123" style="display:none">...</div>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    New Coder
    Join Date
    Jul 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you so much for both of your help.

    I looked over both of your responses and put them together and everything and the one thing i noticed is that when you choose 1 and then you choose 2 that 1 doesn't go away. is there anyways to make it go away? all you would have to do is reset them all to none again at the begging of your show function correct?

    As far as the being new to this, yes i am kinda new to the whole webpage thing, but i am a career software programmer.

    the reason that i used the tables was because of they way that my sister gave me the web page. its hard to explain i guess but i do realize that tables aren't a good way to go. I am doing this to try to help out my sister with her website about vegetarian foods. I tried to read your tables are bad link and i just got confused. I am trying to pretty much set up a bunch of questions with answers and a submit button at the end. so is there an easier way to do this? thanks for your help.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    If you only have 1 set of Question dropdown:
    Code:
    var prev;
    function show11(oSel)
    {
    	var elem = document.getElementById('div11' + oSel.value).style;
    	if (prev) prev.display = "none";
    	elem.display = (elem.display == 'none' && oSel.value != '') ? "block" : "none";
    	prev = elem;
    }
    If you have multiple sets of Question dropdown:
    Code:
    function show(oSel, suffix)
    {
    	var elem = document.getElementById('div' + suffix + oSel.value).style;
    	if (window['prev'+suffix]) window['prev'+suffix].display = "none";
    	elem.display = (elem.display == 'none' && oSel.value != '') ? "block" : "none";
    	window['prev'+suffix] = elem; //window['prev'+suffix] is a dynamic global variable
    }
    Last edited by glenngv; 07-10-2007 at 10:37 PM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #7
    New Coder
    Join Date
    Jul 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you very much for your help. I do have multiple Drop Downs and I am trying to keep the numbering system the same so that i could use the same functions just like you are implementing. thank you very much for your guys help.

  • #8
    New Coder
    Join Date
    Jul 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    just wondering, if tables are bad to use what can i use to make my text closer together, if you do <p> then you get huge gaps in the middle or if you do <br> then you get a break line, I want to put one word then another and another down, if you used different <p> then they have gaps. if someone has an easy way to do it please let me know. thanks

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You can use the paragraphs, you just need to use CSS to get rid of their default margins and padding.
    Code:
    p {
    margin:0;
    padding:0;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    New Coder
    Join Date
    Jul 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am not that familiar with CSS, how would i be able to add that to my page easily? Is there a way that i can make it so i have 2 different type of paragraphs so that i can make it so its indented sometimes and sometimes not indented? like using <p> and <p2> or something like that so there is 2 different types of paragraphs

    I was also wondering if i want to ask the same question 3 times, is there a way to make a loop in html? because i didn't know of one but maybe you guys have an idea for that too.

    I was able to fix the CSS to my liking, but does anyone know naything about HTML for loops? so that i can show the same box of text a certain number of times, and know what time it was show?
    Last edited by kansurr; 07-11-2007 at 07:17 PM.

  • #11
    New Coder
    Join Date
    Jul 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    nevermind
    Last edited by kansurr; 07-11-2007 at 07:16 PM.


  •  

    Posting Permissions

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