How to Ensure a <Select> Form Field Is Submitted When It Is Disabled

How to ensure a select form field is submitted when it is disabled?

<select disabled="disabled">
    ....
</select>
<input type="hidden" name="select_name" value="selected value" />

Where select_name is the name that you would normally give the <select>.

Another option.

<select name="myselect" disabled="disabled">
    <option value="myselectedvalue" selected="selected">My Value</option>
    ....
</select>
<input type="hidden" name="myselect" value="myselectedvalue" />

Now with this one, I have noticed that depending on what webserver you are using, you may have to put the hidden input either before, or after the <select>.

If my memory serves me correctly, with IIS, you put it before, with Apache you put it after. As always, testing is key.

Select With Disabled Options not being Submitted

Based on what you said in the comments, here is some code (a little bit different from the original...) that does what you want (I hope).

$('select').change(function() {

    //enable every options
    $('option').prop('disabled', false);

    //loop though selects
    $('select').each(function() {

        var $loopSelect = $(this);

        //if select value is set
        if($loopSelect.val()) {

            //disabled option matching value in every other select
            $('select')
                .not($loopSelect)
                .find('option[value="'+$loopSelect.val()+'"]')
                .prop('disabled', true);

        }
    });

});

JSFiddle: https://jsfiddle.net/ybms79ve/

Disabling select field and showing disabled as selected option

You can merge both functions into one.

function toggleDisabled() {  var dropdown = $('#s');  var disabled = dropdown.prop('disabled');  if (!disabled) {    // add option to the top of the list    dropdown.prepend('<option>unavailable</option>');  } else {    // remove any option with no value    $('option:not([value])', dropdown).remove();  }  // flip disabled and change current value to first  dropdown.prop('disabled', !disabled).val($('option:first', dropdown).val());}
// just for testing
$('button').click(function() {  toggleDisabled();});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select id="s">  <option value="1">1</option>  <option value="2">2</option>  <option value="3">3</option></select>
<button>click me</button>

Best method for submitting disabled form fields in jQuery?

The best option is to make the inputs readonly - create a click event for the check boxes that simply returns false, and change their background color.

There is no best practice, but that one requires the least fudging.

HTML select option control when disabled is not submitted with the form

here's a code example showing you how to remove the disabled property before submitting the form

http://jsfiddle.net/manuel/dy9Zc/

actually the trick is to just remove the attr on the submit event of the form

HTML form readonly SELECT tag/input

You should keep the select element disabled but also add another hidden input with the same name and value.

If you reenable your SELECT, you should copy its value to the hidden input in an onchange event and disable (or remove) the hidden input.

Here is a demo:

$('#mainform').submit(function() {    $('#formdata_container').show();    $('#formdata').html($(this).serialize());    return false;});
$('#enableselect').click(function() {    $('#mainform input[name=animal]')        .attr("disabled", true);        $('#animal-select')        .attr('disabled', false)     .attr('name', 'animal');        $('#enableselect').hide();    return false;});

#formdata_container {    padding: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div>    <form id="mainform">        <select id="animal-select" disabled="true">            <option value="cat" selected>Cat</option>            <option value="dog">Dog</option>            <option value="hamster">Hamster</option>        </select>        <input type="hidden" name="animal" value="cat"/>        <button id="enableselect">Enable</button>                <select name="color">            <option value="blue" selected>Blue</option>            <option value="green">Green</option>            <option value="red">Red</option>        </select>
        <input type="submit"/>    </form></div>
<div id="formdata_container" style="display:none">    <div>Submitted data:</div>    <div id="formdata">    </div></div>

$_POST for disabled select

This is how the disabled attribute works. When a form control is disabled, the value will be ignored when the form is submitted and the key will not be present in $_POST (or $_GET).

If you want the value to be present in the submitted data, but you don't want the user to be able to change the value on the page (which I imagine is what you are trying to acheive) use readonly="readonly" instead of disabled="disabled".

EDIT

The <select> element does not have a readonly attribute. The above information still stands as it will work for <input>s and <textarea>s.

The solution to your problem here would be to disable the select and use a hidden input to send the value back to the server - e.g.

When the select is enabled:

<select class="txtbx1" name="country">
  <!-- options here -->
</select>

...and when it is disabled:

<select class="txtbx1" name="country_disabled" disabled="disabled">
  <!-- options here, with appropriate value having `selected="selected"` -->
</select>
<input type="hidden" name="country" value="value_of_field" />

Enabled Disabled Select option based on previous dropdown?

You can ensure that the initial selection from #pr_bundling is disabled on page load by moving your update code into a function and calling that on $(document).ready (either directly or via .trigger).

function update_select() {
  let selected = $('#pr_bundling').val();
  $("#pr_cross").find("option").each(function() {
    $(this).removeAttr("disabled");
  });
  $("#pr_cross [value=" + selected + "]").attr("disabled", "disabled");
}
$(document).ready(function() {
  $("#pr_bundling").change(update_select);
  update_select();
  // or you can trigger the change handler:
  // $("#pr_bundling").trigger('change');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>select 1</h3>
<select class="form-control" id="pr_bundling">
  <option value='noselect99' selected>Select</option>
  <option value="A" selected>A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>
<br>

<h3>select 2</h3>
<select class="form-control" id="pr_cross">
  <option value='noselect29' selected>Select</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
</select>

How to Ensure a <Select> Form Field Is Submitted When It Is Disabled