Populating a Form with a dropdown (jQuery)

Populating a Form with a dropdown (jQuery)

I thought I’d share this, maybe it’ll help somebody else. Basically this will take the value of the drop down (select) and show() that many input fields.

Javascript

$(document).ready(function(){
        $("select[name=example]").change(function () {
        $(".hidden_input").hide();
        var cnt = $("select[name=example]").val();  
            
            while(cnt > 0) {
                $(".hidden_input#"+cnt).show();
                cnt--;  
            }
            
        });
     
});

HTML/CSS

<style>
.hidden_input{
    display: none;
}
</style>
<form>
    <select name="example">
        <option value="1">1 Guests</option>
        <option value="2">2 Guests</option>
        <option value="3">3 Guests</option>
        <option value="4">4 Guests</option>
        <option value="5">5 Guests</option>
        <option value="6">6 Guests</option>
    </select>
</form>
<div id="1" class="hidden_input">1<input name="former" type="text"></div>
<div id="2" class="hidden_input">2<input name="former" type="text"></div>
<div id="3" class="hidden_input">3<input name="former" type="text"></div>
<div id="4" class="hidden_input">4<input name="former" type="text"></div>
<div id="5" class="hidden_input">5<input name="former" type="text"></div>
<div id="6" class="hidden_input">6<input name="former" type="text"></div>

Posted on February 05, 2012