Html Form Readonly Select Tag/Input

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>

how to set select element as readonly ('disabled' doesnt pass select value on server)

To be able to pass the select, I just set it back to :

  $('#selectID').prop('disabled',false);

  $('#selectID').attr('disabled',false);

when passing the request.

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>

How to make option element readonly but not disabled the select element

You can use disabled on options instead of the whole select tag

<select name="type" tabindex="0"> <option value="" disabled></option> <option value="first" disabled>first</option> <option value="second" disabled>second</option></select>

Make select dropdown readonly and required

In Html5 doesnot support required and readonly

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 .

<body>
<form action="/action_page.php" ><select class="form-control" id="UnidadMedida"  required>                                 <option value="" selected="selected"></option>                                <option value="Unidad">Unidad</option>                                <option value="Kg">Kilogramo</option>                                <option value="oz">Onzas</option>                                <option value="l">Litro</option>                                <option value="gal">Galon</option>                                <option value="m">Metro</option>                                <option value="min">Minuto</option>                                <option value="h">Hora</option>                                <option value="d">Dia</option>                                <option value="ml">Mililitro</option>                                <option value="g">Gramo</option>                                <option value="t">Tonelada</option>                                <option value="sp">Servicios Profesionales</option>                                </select><input type="submit"></form>


</body>

:read-only selector not working on select tag?

You need to assign a unique identifier such as a class or an id to specifically make the first select tag readonly and not both.. for example, here, am using tag and an attribute selector to select the tags which have readonly attribute

select[readonly]:-moz-read-only {  /* For Firefox */  pointer-events: none;}
select[readonly]:read-only {  pointer-events: none;}

<p> ACCEPTED </p><select readonly>  <option>1</option>  <option>2</option>  <option>3</option></select><br><p> UNACCEPTED : selector also applying here </p><select>  <option>1</option>  <option>2</option>  <option>3</option></select>

Html Form Readonly Select Tag/Input

HTML form readonly SELECT tag/input

how to set select element as readonly ('disabled' doesnt pass select value on server)

HTML form readonly SELECT tag/input

How to make option element readonly but not disabled the select element

Make select dropdown readonly and required

:read-only selector not working on select tag?

Related Topics

Leave a reply