...

View Full Version : want to Show a particular form field when an option is selected



jerry4all
12-15-2011, 11: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, 12:41 PM
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, 12:50 PM
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, 01: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, 02:29 PM
ok. I got it working, had to change the case in "document.getElementById("MNUm").style.display="none";" to lower case 'u'



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum