How can I make an input field read only but still have it send data back to a form?

Adding a hidden field with the same name will sends the data when the form is submitted.

<input type="hidden" name="my_name" value="blablabla" />
<input type="text" name="my_name" value="blablabla" disabled="disabled" />

On the assumption you're using a script to create the form, I'd suggest using <input type="hidden" /> which will submit the variable with the form, but also use a regular <input type="text" readonly="readonly" /> to show the variable to the user. This won't submit the value, obviously, but will make it visible (while the hidden input will submit the value, but not show the value).

You could also do this with JavaScript:

var theForm = document.getElementsByTagName('form')[0];
var inputs = document.getElementsByTagName('input');

for (i=0; i<inputs.length; i++){
    if(inputs[i].type == 'hidden'){
        var newInput = document.createElement('input');
        newInput.type = 'text';
        newInput.setAttribute('disabled');
        newInput.value = inputs[i].value;
        theForm.appendChild(newInput);
    }
}

Clumsy JS Fiddle demo.


alternatively u can make a little manipulation with javascript, remove the disabled property before form submitted

<form action="target.php" method="post">
<input type="text" id="anu" name="anu" value="data anu" disabled="disabled" />
<button onclick="document.getElementById('anu').disabled=''">send</button>

Tags:

Html

Css