...

View Full Version : using the onChange feature with Select



kansurr
07-09-2007, 11:21 PM
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.


-------------------------------------------------------------


<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>

kansurr
07-10-2007, 03:26 PM
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.

_Aerospace_Eng_
07-10-2007, 07:14 PM
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

<!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>

glenngv
07-10-2007, 08:24 PM
The function can be optimized like this:

function show11(oSel)
{
var elem = document.getElementById('div11' + oSel.value).style;
elem.display = (elem.display == 'none' && oSel.value != '') ? "block" : "none";
}

<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:

function show(oSel, suffix)
{
var elem = document.getElementById('div' + suffix + oSel.value).style;
elem.display = (elem.display == 'none' && oSel.value != '') ? "block" : "none";
}



<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>

kansurr
07-10-2007, 08:42 PM
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.

glenngv
07-10-2007, 09:00 PM
If you only have 1 set of Question dropdown:

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:

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
}

kansurr
07-10-2007, 09:04 PM
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.

kansurr
07-10-2007, 09:47 PM
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

_Aerospace_Eng_
07-10-2007, 10:26 PM
You can use the paragraphs, you just need to use CSS to get rid of their default margins and padding.

p {
margin:0;
padding:0;
}

kansurr
07-11-2007, 04:25 PM
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?

kansurr
07-11-2007, 06:49 PM
nevermind



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum