Submitting the value of a disabled input field

JavascriptHtml

Javascript Problem Overview


I want to disable an input field, but when I submit the form it should still pass the value.

Use case: I am trying to get latitude and longitude from Google Maps and wanna display it, but I don't want the user to edit it.

Is this possible?

Javascript Solutions


Solution 1 - Javascript

> I wanna Disable an Input Field on a > form and when i submit the form the > values from the disabled form is not > submitted. > > Use Case: i am trying to get Lat Lng > from Google Map and wanna Display it.. > but dont want the user to edit it.

You can use the readonly property in your input field

<input type="text" readonly="readonly" />

Solution 2 - Javascript

I know this is old but I just ran into this problem and none of the answers are suitable. nickf's solution works but it requires javascript. The best way is to disable the field and still pass the value is to use a hidden input field to pass the value to the form. For example,

<input type="text" value="22.2222" disabled="disabled" />
<input type="hidden" name="lat" value="22.2222" />

This way the value is passed but the user sees the greyed out field. The readonly attribute does not gray it out.

Solution 3 - Javascript

you can also use the Readonly attribute: the input is not gonna be grayed but it won't be editable

<input type="text" name="lat" value="22.2222" readonly="readonly" />

Solution 4 - Javascript

Input elements have a property called disabled. When the form submits, just run some code like this:

var myInput = document.getElementById('myInput');
myInput.disabled = true;

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionHarsha M VView Question on Stackoverflow
Solution 1 - JavascriptSarfrazView Answer on Stackoverflow
Solution 2 - JavascriptAbu SulaimanView Answer on Stackoverflow
Solution 3 - JavascriptpjnovasView Answer on Stackoverflow
Solution 4 - JavascriptnickfView Answer on Stackoverflow