I have a large form which has a lot of fields including some select options. I want to prevent users from changing the select option without using "disabled". Because disabled does not include the fields in POST request.

I tried the following with javascript :

field.readonly = true;

But i found readonly does not work with select like they do with text inputs. So how i can prevent users from being able to change the select value. Please keep in mind that i want to POST the value of select with the form post.

I have a large form which has a lot of fields including some select options. I want to prevent users from changing the select option without using "disabled". Because disabled does not include the fields in POST request.

I tried the following with javascript :

field.readonly = true;

But i found readonly does not work with select like they do with text inputs. So how i can prevent users from being able to change the select value. Please keep in mind that i want to POST the value of select with the form post.

• javascript
• html
• forms

• Prevent all keyboard and mice events on the element. – Randy Casburn Commented May 15, 2018 at 18:12
• Why is it a select, if it's not meant to be changed? You could make it a text input or remove the other options? – William_Wilson Commented May 15, 2018 at 18:13
• 1 i assume you mean field.readOnly = true – epascarello Commented May 15, 2018 at 18:14

3 Answers 3

You can simply use a css property pointer-events: none; in the select tag. It prevents any clicks to be triggered in the dropdown so that the dropdown won't work and you can get the value of the dropdown in the form submit too.

.disabledByMe{
  pointer-events: none;
}

<select name="test" class="disabledByMe">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

You can use preventDefault() and return false; from keyboard and mouse action.

<select onkeydown="event.preventDefault(); return false;" onmousedown="event.preventDefault(); return false;">
    <option>A</option>
    <option>B</option>
</select>

Alternatively, what I generally do is make what I want not disabled, get the postdata, and set them back to disabled.

var $disabled = $('#form").find(':disabled');
$disabled.prop('disabled', false);

var postdata = $('#form').serialize();
$disabled.prop('disabled', true);

$.post('/file.php', postdata, function(data) {});

Not sure if you meant make a <select> unchangeable once they have been changed or they start that way. I assume the former (changed only once?) But if the latter, it's a simple modification let me know if you have a problem. This Demo does the following:

• Disables the <select> once the user uses it.
• Assigns <select> value to a <input type='hidden'> value.
• The <input type='hidden'> is assigned [name=X]; X = select.name or X = select.id
• The form is setup to send data to a live test server. The response is redirected to an <iframe>.
• If successful, the response should indicate key/value pair(s), ${nameOfSelect/HiddenInput}:{valueOfSelect/HiddenInput}

Demo

var M = document.forms.main;
var F = M.elements;
var FS = F.fieldset0;

FS.addEventListener('change', freeze);

function freeze(e) {
  if (e.target.tagName === "SELECT") {
    var tgt = e.target.id;
    e.target.disabled = true;
    var cache = document.querySelector(`input[name=${tgt}]`);
    cache.value = e.target.value;
  }
}

[type=submit] {
  display: block;
}

<form id='main' action='https://httpbin/post' method='post' target='view'>

  <fieldset id='fieldset0'>
    <select id='select0' name='select0'>
      <option default value=""></option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
      <option value="E">E</option>
    </select>
    <select id='select1' name='select1'>
      <option default value=""></option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
      <option value="E">E</option>
    </select>
    <select id='select2' name='select2'>
      <option default value=""></option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
      <option value="E">E</option>
    </select>
  </fieldset>
  <input id='cache0' name='select0' type='hidden'>
  <input id='cache1' name='select1' type='hidden'>
  <input id='cache2' name='select2' type='hidden'>
  <input type='submit'>

  <iframe name='view'></iframe>