• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 264
  • Last Modified:

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

0
ultramoo
Asked:
ultramoo
  • 3
  • 2
1 Solution
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
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 !:)
0
 
ultramooAuthor Commented:
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 &#42;</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>
<!--<input type="text" id="option1" style="display:none;">-->
... < Click for options ...
 <!-- Need to make '< Click for options ' disappear-->
 <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 ...
 <!-- Need to make '< Click for options ' disappear-->
 <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>
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
This one is more universal and does not use ID for elements. It just uses parent node (reference to DIV that is around "click for options and select) then finding select element from that place and putting it to display block. Then it hides "click for options".

Need more explanation ?
<script type="text/javascript">
function doStuff(element)
{
  element.parentNode.getElementsByTagName('select')[0].style.display='block';
  element.style.display='none'
}
</script>
 
<div>
<span onclick="doStuff(this)"> ... < Click for options ... </span>
<select 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>
</div>

Open in new window

0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
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"];
0
 
ultramooAuthor Commented:
Thanks! I had to play around with it a bit but got it working the way I wanted it to.
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now