How can I "submit" a "disabled" input?

[Martin]

I have a form with several text boxes (<INPUT type="text">) and a
"submit" button. I would like to display one of the text boxes as
"disabled" (dimmed but readable) and yet have that text box submitted
back to the server when the submit button is clicked. How can I make
this happen?

I've tried setting type="hidden" but that didn't get submitted.

I've tried type="text" style="display:none" but that didn't submit
either.

I've tried type="text" disabled="disabled". This gives the appearance
I want but it doesn't get submitted either.

I've tried type="text" readonly="true". That gets submitted but I
don't like the display (it's not obvious that it's read-only).

 

[Leif K-Brooks]

I have a form with several text boxes (<INPUT type="text">) and a
"submit" button. I would like to display one of the text boxes as
"disabled" (dimmed but readable) and yet have that text box submitted
back to the server when the submit button is clicked. How can I make
this happen?

I've tried setting type="hidden" but that didn't get submitted.

It should.

I've tried type="text" style="display:none" but that didn't submit
either.

It should.

I've tried type="text" disabled="disabled". This gives the appearance
I want but it doesn't get submitted either.

It should.

I've tried type="text" readonly="true". That gets submitted but I
don't like the display (it's not obvious that it's read-only).

It should.

Are you sure the form is set up properly? Maybe you forgot to give the
fields a name?

 

[Martin]

OK, I found the errors...

It should.

this gets submitted now.

It should.

this gets submitted now.

It should.

this still does NOT get submitted (and this is the one I want to use).

It should.

this gets submitted now.

 

[rf]

No it shouldn't.

this still does NOT get submitted (and this is the one I want to use).

Read this:
http://www.w3.org/TR/html4/interact/forms.html#h-17.12

"Disabled controls cannot be successful", that is, thay cannot be submitted
with the form.

Just below this:

"In this example the INPUT element is disabled. Therefore, it cannot receive
user input nor will its value be submitted with the form."

You *could* make the element read only. Read only elements "may be
successful".

However, since a disabled (or read only) element cannot be changed by the
user then whatever you send down to the client would (if the control *could*
be sucessful) be send back unchanged to the server. You already know what
you would have got back.

 

[Augustus]

this still does NOT get submitted (and this is the one I want to use).

Disabled elements do not get submitted with the form... that is the way they
operate.

You could do up a workaround using hidden form elements along the lines of:

this gets submitted now.

You could use this option and then using CSS change its appearance so it
looks like a disabled form item (I can't remember if the only difference
between disabled and enabled is the text color becomes #c0c0c0 (silver) on a
disabled element or if the background color changes as well)

 

[Martin]

What I ended up doing is using both a disabled element AND a hidden
element. The disabled element is visible to the user but does not get
submitted; the hidden element (containg the same value) cannot be seen
by the user but does get submitted for processing. The best of both
worlds!

Thanks for the guidance.

 

[aeskreis]

Sorry to bring this post back from the dead, but I ran into this issue as well and stumbled on this post. I found the hidden fields option to be way too annoying, especially since the textfields coudl possibly need to have user input. My solution was to use the readonly attribute, but to maek it look more "disabled", i set the text color to "#777", which gives it that "disabled" look. If you wanted to go a step further and make the text not even able to be highlighted, you could use the jquery plugin "Disable Text Select" (I would link it but im not allowed, just google it) to disable text highlighting. Hope this helps someone in the future

 

[maunakea]

<input id="myinput" type="text" readonly style="color:#AAAAAA">
will be the answer...
readonly disable all changes - CSS/style change the look...

Jquery trick will be
$('#myinput').prop('readonly',true);
$('#myinput').css("color","#AAAAAA");

 

[JTaylor]

The solution here is fairly simple. Disabled elements are not submitted - so just don't keep them disabled when you are going to submit!

During the OnSubmit event (or in a javascript attached to your submit button, etc) - just enable those disabled elements! To keep it real simple just enable all of them on the form.

To prevent input mistakes, you might first hide the entire visible form, or the elements on it just to make sure the user cannot change something in the second or two that the elements become editable before the page refreshes. Set css display:none or visibility:hidden.

Here is an example function you might call in your onsubmit event. It takes a referrence to the form and enables all the fields so they will get submitted...

function EnableAllElements( form )
{
for( i=0; i < form.length; i++ ) form.elements.disabled = false;
}