There are 2 HTML drop downs with same name in 2 different div IDs, so how to submit drop down value of specific div ID using AJAX/jQuery

Question

Below is my code to populate states list based on selected country. When I select any country from country drop down, it returns proper states list in states drop down. This part is working fine.

When I select country USA, states drop down is filled with states of USA and default selected state is Alaska . Now if I select another state 'Texas' from states drop down list and submits form using AJAX / jQuery, it just sends value 0 in form POST data.

I think this 0 value is coming from <option value="0">-- Select State --</option> of id=before_get_state . I want to make so when form frm_shipping_address is submitted, it should consider value of cbo_state from id="after_get_state" .

So how can I resolve this issue? Please help.

Country & State Drop Downs

<form name="frm_shipping_address" id="frm_shipping_address" novalidate>
    <label>Select Country</label><span class="text-help-form"> * </span>
    <select name="cbo_country" id="cbo_country" class="form-control" onChange="get_state(this.value);">
    -- Country list is filled from MySQL database using while loop -- 
    </select>

    <label>Select State</label><span class="text-help-form"> * </span>
    <div id="before_get_state">
        <select name="cbo_state" id="cbo_state" class="form-control">
            <option value="0">-- Select State --</option>
        </select>
    </div>
    <div id="after_get_state"></div>    
    <button id="btn_continue" class="btn btn-primary btn-lg btn-block"><b>SUBMIT&nbsp;</b></button>
</form>

jQuery / AJAX to get states list for selected country

jquery.min.js , jqBootstrapValidation.js files are included in the page

<script>
function get_state(countrypkid) {
    var int_countrypkid = countrypkid;
    var dataString = "countrypkid="+int_countrypkid;
    $.ajax({
        type: "POST",
        url: "./product_address_get_state_p.php",
        data: dataString,
        success: function(html)
        {
            $("#before_get_state").hide();
            $("#after_get_state").html(html);
        }
    });
}
</script>

product_address_get_state_p.php Page Code

-- Fetching states list from MySQL table for selected country pkid --
-- States list is filled from MySQL database using while loop -- 

product_address.js (form is submitted here)

(function() {
$("#frm_shipping_address input, #frm_shipping_address textarea, #frm_shipping_address select").jqBootstrapValidation({
    preventSubmit: true,
    submitSuccess: function($form, event) {
        event.preventDefault();
        var cbo_country = $("select#cbo_country").val();
        var cbo_state = $("select#cbo_state").val();
        
        $.ajax({
            url: "./product_address_p.php",
            type: "POST",
            data: {
                cbo_country: cbo_country,
                cbo_state: cbo_state
            },
            cache: false,
            success: function(data) 
            { 
                var $responseText=JSON.parse(data);
                if($responseText.status == 'SUC')
                {
                    // Success message
                }
                else if($responseText.status == 'ERR')
                {
                    // Fail message
                }
            },
        })
    },
});
});

Answer 1

As you have two selects-box with same id so its getting value of first select-box only.Instead other way to do above is directly getting the value using $("#after_get_state").find("select").val() .Also, you can check if the div ie: #after_get_state has select inside it or not using .length so if value of length is > 0 then send this select-box value else other.

Demo code :

 console.log("length = "+$("#after_get_state").find("select").length) //check if div has select inside it or not if ($("#after_get_state").find("select").length > 0) { //there..send this value console.log("slected value = "+$("#after_get_state").find("select").val()) } else { //not there send other select-box value }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div id="before_get_state"> <select name="cbo_state" id="cbo_state" class="form-control"> <option value="0">-- Select State --</option> </select> </div> <div id="after_get_state"> <select name="cbo_state" id="cbo_state" class="form-control"> <option value="0">-- Select State --</option> <option value="1" selected>dcdcdc</option> </select> </div>