javascript - Multiple select form tag for the same name getting the last option always

Question

I have been trying to select the table number according to its location. My form is working and the record is added to the database however at the number section, the number that is inserting is "32" no matter what I choose, Even if I choose in the select "tnum3" a different number. I don't know what has happened.

The form

<label for="tnum">table number
                        <select type="number" id="tnum1" name="num">
                            <?php for ($i = 2; $i <= 9; $i++) : ?>
                                <option id="in" value="<?php echo $i; ?>"><?php echo $i; ?></option>
                            <?php endfor; ?></select>
                        <select type="number" id="tnum2" name="num" style="display: none;">
                                <?php for ($i = 12; $i <= 23; $i++) : ?>
                                <option id="out" value="<?php echo $i; ?>"><?php echo $i; ?></option>
                            <?php endfor; ?></select>
                        <select type="number" id="tnum3" name="num" style="display: none;">
                                <?php for ($i = 32; $i <= 35; $i++) : ?>
                                <option id="tr" value="<?php echo $i; ?>"><?php echo $i; ?></option>
                            <?php endfor; ?>
                        </select></label><br>

                    <label for="loc">location
                        <select id="loc" name="location"  style="width:100%;" onchange="change_tnum(this.value)" required>
                            <option value="inside" >inside</option>
                            <option value="outside" >outside</option>
                            <option value="Porch" >Porch</option>
                    </select></label><br>

This is the JS function that just toggles the select tags according to the location I choose:

function change_tnum(x){

    $('#tnum1').hide();
    $('#tnum2').hide();
    $('#tnum3').hide();// hide any options already shown
    switch (x) { // show whichever option is appropriate
      case 'inside':
        $('#tnum1').show();
        inside();
        break;
      case 'outside':
        $('#tnum2').show();
        outside();
        break;
      case 'porch':
        $('#tnum3').show();
        terrace();
        break;
      default:
        break;
    }
}

标签： javascriptdatabaseformscodeigniter

Answer 1

I don't see any issue with your select, however even if you set the element to display: none, it's value will still be submitted. Since there are multiple elements of the same name the last value overwrites the previous values.
If you want only one element value then you should add disabled attribute to it. The elements marked disabled are not sent to the server. Reference

So, your code changes to -

function change_tnum(x){

    $('#tnum1').hide();
    $('#tnum1').attr('disabled', true);

    $('#tnum2').hide();
    $('#tnum2').attr('disabled', true);

    $('#tnum3').hide();// hide any options already shown
    $('#tnum3').attr('disabled', true);

    switch (x) { // show whichever option is appropriate

        case 'inside':
            $('#tnum1').show();
            $('#tnum1').attr('disabled', false); // or simply remove disabled attribute
            inside();
            break;

        case 'outside':
            $('#tnum2').show();
            $('#tnum2').attr('disabled', false);
            outside();
            break;

        case 'porch':
            $('#tnum3').show();
            $('#tnum3').attr('disabled', false);
            terrace();
            break;

        default:
            // do something
    }
}

Hope it helps you.