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:

 

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, I need to make sure to be backed up by Venyu fist in case my data gets damaged.

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


The Javascript



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.

  1. A coworker stored production assets in Dropbox. Chaos ensued.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.