Getting Disabled Form Fields Using JavaScript Only Or jQuery

Edit: So it seems I need to do more research on my posts :P. As it turns out there is a readonly attribute for the input tag.

you can simply do:

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

and that will show the field and make it submittable in your form.

I am leaving the old post up for those that still want to do use disabled


One of the things I find most annoying about html forms is that disabled fields are not submitted when sending the data. For the longest time I had avoided having to deal with this by sending all my data to my back end scripts using ajax calls. But I am in need to send along some attachments so I can’t do that on this situation.

For some background: I was presenting the user some previously generated data, I want them to be able to edit some of the fields but I want to present others and have them disabled. Now, I could just use a label tag to show the user the data, add the field as a hidden input and that would solve my problem but that just added complexity to my script, I wanted to keep it as simple as possible.

Since I was already bypassing the default submit button in order to check for required fields, I figured I could do something there. So to keep it short here is the code:

The Form

<form action="p.php" id="myForm">
<input type="text" disabled="disabled" value="foo"/> 
<input type="text" value="bar"/> 
<label onclick="Submit();">Submit</label>
</form>

The Javascript


<script type="text/javascript">

function Submit()
{
   // Do other stuff, validation, etc...

   EnableAllFields();
   document.forms["myForm"].submit();
}
function EnableAllFields(){
   var Fields = document.getElementsByTagName('input');
   for(var x = 0; x < Fields.length; x++)
   {
       Fields[x].disabled = false;
   }
}
</script>

For the jQuery version the enable all function is even easier

function EnableAllFields(){
   $('input').prop('disabled', false);
}

So what’s happening is that I am enabling all those disabled fields right before the data is sent. Make sure to do this after all validation is done.

3 Comments


  1. It’s been a while since I’ve really done any web programming, so forgive me if what I say is stupid. Putting the JavaScript aside, what you want to do is POST a form with all of the data in the form, but only some of the fields should be modifiable by the user, right? However, since you marked the input fields as disabled, they weren’t being POSTed?

    Is there some reason you can’t use the read-only HTML attribute instead of disabled? I think it was available in HTML 4 so I wouldn’t expect many (if any) browser compatibility issues.

    Also, c’mon man, it’s JavaScript not Java!! 🙂

    Reply

    1. hahaha you know I found the readonly attribute last week and just had time to update this post and as I am checking my spelling I saw your post…. tsk tsk to me

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *