Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML form readonly SELECT tag/input

According to HTML specs, the select tag in HTML doesn't have a readonly attribute, only a disabled attribute. So if you want to keep the user from changing the dropdown, you have to use disabled.

The only problem is that disabled HTML form inputs don't get included in the POST / GET data.

What's the best way to emulate the readonly attribute for a select tag, and still get the POST data?

like image 217
Jrgns Avatar asked Dec 15 '08 15:12

Jrgns


People also ask

How do I make the select box disabled in HTML?

The disabled attribute for <select> element in HTML is used to specify that the select element is disabled. A disabled drop-down list is un-clickable and unusable.

Does readonly input get submitted?

A readonly element is just not editable, but gets sent when the according form submits. A disabled element isn't editable and isn't sent on submit.

What is the difference between a readonly input and a disabled input?

When a textarea is disabled , it will be ignored by a parent form. However, when a textarea is readonly the contents of the textarea will still be submitted with the form even though the user cannot modify the contents.

How do I activate a TextBox if I select an option in a dropdown box in HTML?

When an item (option) is selected in DropDownList (HTML SELECT), the EnableDisableTextBox JavaScript function is executed. Inside this function, based on whether the Other option (item) is selected, the TextBox will be enabled else disabled. The HTML Markup consists of a DropDownList (HTML SELECT) and a TextBox.


2 Answers

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>
like image 121
bezmax Avatar answered Oct 18 '22 23:10

bezmax


We could also disable all except the selected option.

This way the dropdown still works (and submits its value) but the user can not select another value.

Demo

<select>     <option disabled>1</option>     <option selected>2</option>     <option disabled>3</option> </select>
like image 32
vimal1083 Avatar answered Oct 18 '22 23:10

vimal1083