Question

For a registration form I’m looking for a way to give the user more options based on a number (#) they choose in an formfield.

I’ve searched and found a way to do this with javascript but it does not allow the tag, it does however accept etc. but not a dropdown menu field.

 <fieldset>
    <legend>Step 2/3: Virtual Machine Options</legend>
                    <div>
                        <label for="vmammount">Order # VM's</label>
                        <select name="vmammount" required="required">
                            <option value=""></option>
                            <option value="1">1</option>
                            <option value="2">3</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>                        
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                        </select>
                    </div>
                    <div>
                        <label for="vmos">VM OS 1</label>
                        <select name="vmos" required="required">
                            <option value=""></option>
                            <option value="1">Windows Server 2008</option>
                            <option value="2">Windows XP</option>
                            <option value="3">Debian</option>
                            <option value="4">CentOS</option>
                        </select>
                    </div>
<div>
                        <label for="vmos">VM OS 2</label>
                        <select name="vmos" required="required">
                            <option value=""></option>
                            <option value="1">Windows Server 2008</option>
                            <option value="2">Windows XP</option>
                            <option value="3">Debian</option>
                            <option value="4">CentOS</option>
                        </select>
                    </div>
                </fieldset>

The OS 1 field is always visible, the other selection field that will follow are dependent on the first field in which the user chooses a value from 1 till 10. Any suggestions?

Answer 1

The best way is to create all os selection elements in HTML / PHP … but only display them if nessesary. Here an example with jQuery, its also possible with plain javascript but needs at least 10times mutch lines of code.

http://jsfiddle.net/vuPwM/2/

<fieldset>
    <legend>Step 2/3: Virtual Machine Options</legend>
        <div>
            <label for="vmammount">Order # VM's</label>
            <select name="vmammount" id="vmammount" required="required">
                <option value=""></option>
                <option value="1">1</option>
                <option value="2">3</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </div>
        <div id="vmos_block">
            <div class="vmos" id="vmos_block_1">
                <label for="vmos_1">VM OS 1</label>
                <select name="vmos[1]" id="vmos_1" required="required">
                    <option value=""></option>
                    <option value="1">Windows Server 2008</option>
                    <option value="2">Windows XP</option>
                    <option value="3">Debian</option>
                    <option value="4">CentOS</option>
                </select>
            </div>

            <div class="vmos" id="vmos_block_2">
                <label for="vmos_2">VM OS 2</label>
                <select name="vmos[2]" id="vmos_2" required="required">
                    <option value=""></option>
                    <option value="1">Windows Server 2008</option>
                    <option value="2">Windows XP</option>
                    <option value="3">Debian</option>
                    <option value="4">CentOS</option>
                </select>
            </div>

            <div class="vmos" id="vmos_block_3">
                <label for="vmos_3">VM OS 3</label>
                <select name="vmos[3]" id="vmos_3" required="required">
                    <option value=""></option>
                    <option value="1">Windows Server 2008</option>
                    <option value="2">Windows XP</option>
                    <option value="3">Debian</option>
                    <option value="4">CentOS</option>
                </select>
            </div>

            <div class="vmos" id="vmos_block_4">
                <label for="vmos_4">VM OS 4</label>
                <select name="vmos[4]" id="vmos_4" required="required">
                    <option value=""></option>
                    <option value="1">Windows Server 2008</option>
                    <option value="2">Windows XP</option>
                    <option value="3">Debian</option>
                    <option value="4">CentOS</option>
                </select>
            </div>
        </div>
</fieldset>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
    $('.vmos').hide();

    $("#vmammount").change(function () {
        $('.vmos').hide();

        if ($(this).val() < 1) {
            return false;
        }

        for (var i = 1; i <= $(this).val() ; i++) {
              $('#vmos_block_' + i).show();          
        }

        return true;
    });
});//]]>  

</script>