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

I have an input field:

<input cid="Topic_Created" name="Topic.Created" size="25" type="text" value="6/5/2011 8:22:45 AM" />

I want the field to display on my form but don't want the user to be able to edit the field. When the user clicks submit I want the form value to be sent back to the server.

Is this possib开发者_如何学Cle. I tried different combinations of disabled = "disabled", readonly = "readonly". Seems I always get nothing sent back for the field.

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

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.

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>

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

<input onkeydown="myFn(event)" >

You can add 'readonly'='true' in the input element. With this the user cant edit and also send the value back to the server.

<input cid="Topic_Created" name="Topic.Created" size="25" type="text" value="6/5/2011 8:22:45 AM" readonly='true' />

You should consider using input type="hidden" when submitting read-only fields. Otherwise, if you still need the value of input field to be visible, you should create another input (type=text) with a different name.

<input cid="Topic_Created" name="Topic.Created" type="hidden" value="6/5/2011 8:22:45 AM" />
<!--This is visible: -->
<input cid="Topic_Created" name="doesntmatter" size="25" type="text" value="6/5/2011 8:22:45 AM" />