如何禁用输入字段而不影响PHP表单中字段的值？

Question

I'm creating a demo page where certain setting fields have to be disabled. I have tried disabling the input with the value remaining intact, just greyed out. I have disabled the inputs using disabled="true". When submitting the form, the value disappears in spite of being there before. How do I prevent the value from disappearing whilst simultaneously disabling the said fields?

Answer 1

If you want the value to be displayed and and not changed , you can use readonly

<input type="text" name="xxx" value="xxx" readonly="readonly" />

If you want the value to be hidden and submitted to the action file you can use type =hidden

<input type="hidden" name="xxxx" value="xxx" /> 

More about HTML input tag can be found here http://www.w3schools.com/tags/tag_input.asp

Answer 2

disabled form fields are not submitted under any circumstances.

The most common way to avoid this problem is making them readonly and adding an input[readonly] { ... } css rule to make the text gray like in a disabled field.

You might also want to use some JavaScript to prevent it from being focused; could look like this if you have jQuery:

$('input[readonly]').live('focus', function(e) {
    $(this).blur();
});

Answer 3

Just throwing suggestions around here.
You could disable the field as normal with Javascript, but before the field get's disabled you could use Javascript to input the value of that field into a hidden field.

function runme() {
    var newval = $('#field1').val();
    $('#hiddenfield').val(newval);
    $('#field1').attr('disabled', 'disabled');
}

<input id="field1" name="field1" type="text" value="this val" />
<input id="hiddenfield" name="hiddenfield" type="hidden" />
<input type="button" onclick="runme();" />

Answer 4

use readonly attribute instead of disabling

another approach would be to store values in PHP session and keep them on the server.

Answer 5

For input type="file" make sure you do this:

<style>
input[type=file][readonly] {
    pointer-events: none;
}
</style>

<script>
    $('input[type="file"]').prop('readonly', true);
</script>

Answer 6

You could also use a hidden field of the same name with the correct value and retain your disabled field. Although do not trust 100% the data in a hidden / read only field as they could still be changed (through web dev tools or similar)