How Can I Make An Input Field Read Only But Still Have It Send Data Back To A Form?

I have an input field: I want the field to display on my form but don't

Solution 1:

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" />

Solution 2:

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.

Solution 3:

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>

Solution 4:

With Chrome browser on Windows 10 just having name="your_name" and the readonly attributes works fine: client cannot change a value, but it is sent to the server.

Solution 5:

<script type="text/javascript"> 
    function myFn(event) { 
        event.stopPropagation(); event.preventDefault(); 
    } 
</script> 

<input onkeydown="myFn(event)" >