Add the value of the hidden input field of other option

Question

I ended by this code after helping with many thanks of others here in this website. Now, in the following code of submitting the form, I want the value of the hidden input field to be instead of Other when shown the result.

<form action="" method="post">
    <div class="row">
        <div class="col-sm-8 col-sm-offs et-2"> 
            <select class="form-control" name="country" id="country" required >
                <option value="">Please select your country</option>
                <option value="A">Country A</option>
                <option value="B">Country B</option>
                <option value="C">Country C</option>
                <option value="Other">Other</option>
            </select>

             <input type ="text" id="country_other" style="display:none">

                <button type="submit" class="btn btn-gpsingh">Next</a>
             </div>
     </div>
  </form>

<script>
$("#country").change(function(){

    var value = this.value;
    if(value =='Other')
    {
        $("#country_other").show();
        $("#country_other").attr('required', false);


    }
     else
    {
       $("#country_other").hide();  
       $("#country_other").val('');
       $("#country_other").attr('required', false);
    }    
});
</script>

Answer 1

Something you could try, if I understood correctly, would be to remove the name attribute from the SELECT menu if the chosen value is other and assign the name attribute instead to the text input element - when the form is submitted the item in the POST array with the name of country would come from the text field and not the select menu...

$('#country').change(function(){
    if( this.value == 'Other' ){
        $('#country_other').show();
        $('#country_other').attr('required', false);

        /* remove name from select & add to text field */
        $('#country_other').attr('name', $(this).attr('name') );
        $(this).removeAttr('name');
    } else {
       $('#country_other').hide();  
       $('#country_other').val('');
       $('#country_other').attr('required', false);

       /* remove name attribute from text field and assign back to select menu */
       $(this).attr('name', $('#country_other').attr('name') );
       $('#country_other').removeAttr('name');
    }    
});