want to Show a particular form field when an option is selected

jerry4all

12-15-2011, 10:21 AM

Hi,
I'm new to JavaScript. I'm trying to create my form in such a way that if 'Premium' is selected, a the text box with label 'membership no' is displayed and if 'bronze' is select, the drop-down list 'sponsor' is displayed instead....here's what my form looks like...

<form id="form1" name="form1" method="post" action="">
<p>
<label for="select">Membership:</label>
<br />
<select name="select" id="select">
<option value="Premium" selected="selected">premium</option>
<option value="Bronze">bronze</option>
</select>
</p>
<p>Membership No:<br />
<input type="text" name="textfield" id="textfield" />
</p>
OR<br />
Sponsor:
<br />
<select name="select2" id="select2">
<option value="329">329</option>
<option value="234">234</option>
</select>
</form>

appreciate the help

Philip M

12-15-2011, 11:41 AM

Here you are:-

<form id="form1" name="form1" method="post" action="">
<p>
<label for="select">Membership:</label>
<br />
<select name="sel1" id="sel1" onchange = "showDivs()">
<option value = "0" >Select ......</option>
<option value="Premium" >Premium</option>
<option value="Bronze">Bronze</option>
</select>
<br><br>

<div id= "MNum" style="display:none">Membership No:<br />
<input type="text" name="textfield" id="textfield" />
</div>

<div id = "Spons" style="display:none">
Sponsor:
<br />
<select name="sel2" id="sel2">
<option value = "0">Select sponsor ....</option>
<option value="329">329</option>
<option value="234">234</option>
</select>
</div>

<script type = "text/javascript">
function showDivs() {
document.getElementById("MNUm").style.display="none";
document.getElementById("Spons").style.display="none";
var val = document.getElementById("sel1").value;
if (val == "Premium") {
document.getElementById("MNum").style.display = "block";
}
if (val == "Bronze") {
document.getElementById("Spons").style.display = "block";
}
}

</script>

</form>

A fool is someone who when presented with the correct facts arrives at entirely the wrong conclusion. A madman is someone who arrives at the correct conclusion based on the wrong information.

jerry4all

12-15-2011, 11:50 AM

Thanks for the quick reply...I can't seem to get it to work...Or do I have to put the <script> part in the <head> section..thanks

Philip M

12-15-2011, 12:02 PM

Well, it works for me. :) You may certainly place the <script> in the <head> section, but that will not affect its working.

jerry4all

12-15-2011, 01:29 PM

ok. I got it working, had to change the case in "document.getElementById("MNUm").style.display="none";" to lower case 'u'