I want to display a series of textboxes for additional input depending on the the user's selection from a drop down list. When option1 is selected, one textbox appears for additional input. Option2 requires 3 textboxes, option3 needs 2 textboxes, option4 and other require one textbox each.
I have pieced together some code from researching other threads and have come up with the code found here: http://jsfiddle.net/zFQf3/
Can anyone please provide direction?
Thank you.
I redid what you had on jsFiddle (http://jsfiddle.net/zFQf3/29/ or http://jsfiddle.net/zFQf3/47/ if you want a class based solution), but I am not sure how to use that site, so I don't know if it saved. I will copy and paste it here too just in case.
I modified your HTML to this:
<form>
<select id="sel">
<option value="">- select -</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="other">Other</option>
</select>
<label id="label1" for="option1">Text box label 1
<input type="text" id="option1" />
</label>
<label id="label2" for="option2">Text box label 2
<input type="text" id="option2" />
</label>
<label id="label3" for="option3">Text box label 3
<input type="text" id="option3" />
</label>
<label id="label4" for="option4">Text box label 4
<input type="text" id="option4" />
</label>
<label id="label5" for="option5">Other
<input type="text" id="option5" />
</label>
</form>
I added some CSS just for visibility sake:
label {
display:block;
}
I modified your JS to this:
$(function() {
//This hides all initial textboxes
$('label').hide();
$('#sel').change(function() {
//This saves some time by caching the jquery value
var val = $(this).val();
//this hides any boxes that the previous selection might have left open
$('label').hide();
//This just opens the ones we want based off the selection
switch (val){
case 'option1':
case 'option4':
case 'other':
$('#label1').show();
break;
case 'option2':
$('#label1').show();
$('#label2').show();
$('#label3').show();
break;
case 'option3':
$('#label1').show();
$('#label2').show();
break;
}
});
//I'm not really sure why these are here
$("input")
.focus(function () {
$(this).next("span").fadeIn(1000);
})
.blur(function () {
$(this).next("span").fadeOut(1000);
});
});
I think that does what you want.
Your markup is invalid you have multiple id's on the page. An id needs to be unique per the dom.
The easiest way to accomplish what you need is change the id= to class= and show/hide based upon the option.
Using that convention, you would end up with something like this:
$(function() {
$('#sel').change(function() {
$("input").hide().filter("." + $(this).find("option:selected").val()).show();
});
$("input").focus(function() {
$(this).next("span").fadeIn(1000);
}).blur(function() {
$(this).next("span").fadeOut(1000);
});
});
With css that hides everything from the start
input{
display:none;
}
span
{
display:none;
}
Updated example on jsfiddle.
Edited your code http://jsfiddle.net/zFQf3/44/
What the code does is basically get's the value of what was selected and shows whatever has the matching class and label. So for the value of 'option1' it shows anything with the class of option1 and anything with the for (label) of option1.
Also, before it shows anything it hides all labels and textboxes so that it doesn't just show all the textboxes if you were to go through the drop down menu one by one.
