How to prevent user from changing the value of a select without using disabled?

Question

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.

Answer 1

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> 

Answer 2

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) {});

Answer 3

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.org/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>