asked on

javascript show and hide form elements

I'm trying get my form to hide a field and then display the field when an option from the drop down select has been chosen. The javascript code so far is working pretty well but I don't know how to modify it so that it shows a select field instead of a input text field. At the same time I'd also like the text '< Click for options' to hide with the new select is visible. Its little more difficult to explain than I though but please see my code below and you should be able to understand what I'm referring to. (I'd also like to have a few of these in the fom so might need to store in array?)

<html>
<head>
<title>Zvonko &#42;</title>
</head>
<body>
<script> 
function checkForOther(obj) { 
 if (!document.layers) { 
 var txt = document.getElementById("option1"); 
 if (obj.value != "PLEASE SELECT") { 
 txt.style.display = "inline"; 
 // gives the text field the name of the drop-down, for easy processing 
 txt.name = "item1"; 
 obj.name = ""; 
 } else { 
 txt.style.display = "none"; 
 txt.name = ""; 
 obj.name = "item1"; 
 } 
 } 
} 
</script> 
 
<form name="frm1" method="POST" action="nextPage.htm"> 
<select name="item1" id="titles" onChange="checkForOther(this)"> 
 <option value="other">PLEASE SELECT</option>
 <option value="Mr.">Mr.</option> 
 <option value="Ms.">Ms.</option>  
</select> 
<input type="text" id="option1" style="display:none;"> 
... < Click for options ... 
 <!-- Need to show select box and make '< Click for options ' disappear
 <select name="option1" style="display:none;">
 <option>32 x 32cm Prints [AUD$30]</option>
 <option>46 x 46cm Canvasses [AUD$150]</option>
<option>66 x 66cm Canvasses [AUD$250]</option>
</select>-->
 
</form> 
</body>
</html>

Open in new window

Pawel Witkowski

Follow those lines:

9: var txt = document.getElementById("option1");

16: txt.style.display = "none";
30: <input type="text" id="option1" style="display:none;">

it works the same for all elements, so:

- in 30 line you define ID for element (id="option1"),
- in line 9 you connect this element with javascript element by document.getElementById(here ID that you give)
- in line 16 you hide it.

So for select:

<option id="someOptionToHide1">bla bla </option>

var optionToHide = document.getElementById('someOptionToHide1');

optionToHide.style.display="none";

This is how it works! Its better that you understand how to do it than to do it for you because you wont be able to change that in future! If you need further explanation just ask !:)

ultramoo

ASKER

ok cool thanks I 've almost got it working. So I followed your code above and was able to get one select working. I want to add about 5 of these so how does it work then? And is there a way to simply the code through an array or somthing? Also how can I get the '< Click for options' to hide aswell?
This is what I've done:

<html>
<head>
<title>Zvonko *</title>
</head>
<body>
<script>
function checkForOther(obj) {
if (!document.layers) {
var txt = document.getElementById("option1");
var optionToHide = document.getElementById('someOptionToHide1');
var optionToHide2 = document.getElementById('someOptionToHide2');
optionToHide.style.display="";
optionToHide2.style.display="";

if (obj.value != "PLEASE SELECT") {
txt.style.display = "inline";
// gives the text field the name of the drop-down, for easy processing
txt.name = "item1";
obj.name = "";
} else {
txt.style.display = "none";
txt.name = "";
obj.name = "item1";
}
}
}
</script>

<form name="frm1" method="POST" action="nextPage.htm">
<select name="item1" id="titles" onChange="checkForOther(this)">
<option value="other">PLEASE SELECT</option>
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
</select>

... < Click for options ...

<select name="someOptionToHide1" style="display:none;">
<option>32 x 32cm Prints [AUD$30]</option>
<option>46 x 46cm Canvasses [AUD$150]</option>
<option>66 x 66cm Canvasses [AUD$250]</option>
</select>
<br>
<select name="item2" id="titles" onChange="checkForOther(this)">
<option value="other">PLEASE SELECT</option>
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
</select>
... < Click for options ...

<select name="someOptionToHide2" style="display:none;">
<option>32 x 32cm Prints [AUD$30]</option>
<option>46 x 46cm Canvasses [AUD$150]</option>
<option>66 x 66cm Canvasses [AUD$250]</option>
</select>
</form>
</body>
</html>

ASKER CERTIFIED SOLUTION

Pawel Witkowski

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Pawel Witkowski

and for arrays:

you can do something like this:

function hideArrayID(array)
{
for (var i =0;i<array.length;i++) array[i].style.display="none";
}

function showArrayID(array)
{
for (var i =0;i<array.length;i++) array[i].style.display="block";
}

var someIDOfElementsToManipulate = ["someId1","someId2","someId3"];

ultramoo

ASKER

Thanks! I had to play around with it a bit but got it working the way I wanted it to.