CODEWITHSUNDEEP
javascriptjqueryforms
Bijan
Bijan

Reputation: 8594

Remove 'disabled' property from Form and re-enable

I have a form with some inputs and some of those inputs are disabled. Because they are disabled, they won't submit the data that is contained in them. So I use the following jQuery code to remove the disabled property on submit.

jQuery(function ($) {        
    $('form').bind('submit', function () {
        $(this).find(':input').prop('disabled', false);
    });
});

When user clicks the submit button, the disabled property is removed, the data in those fields are sent, and a file is downloaded (I use headers so user is on same page). However, because the disabled property is now removed, the user can modify those fields and resubmit the form with their own data, which I do not want.

My question is, how can I modify my code to re-disable those certain fields once the form is submitted.

Upvotes: 1

Views: 1437

Answers (3)

jayms
jayms

Reputation: 4018

To directly answer your question: You could re-disable your buttons in a callback-function if you submit your form with an asynchronous xmlhttprequest.

However, I think the easiest solution is to add the data yet another time as type="hidden" like this:

<input type="text" value="samedata" disabled>
<input type="hidden" name="actualnamedfield" value="samedata">

Only the first one is visible and only the second one gets submitted.

Upvotes: 0

Bijan
Bijan

Reputation: 8594

I found a workaround.

Instead of setting each input as disabled, I set them as readonly but to make it have the same styling as a disabled field, I added the following CSS

input:read-only {
    background-color: #EBEBE4;
    color: #545454;
    border-style: hidden;
    padding: 3px;
}

jsFiddle to show a sample of the difference between the two

Upvotes: 0

ngasull
ngasull

Reputation: 4216

You're probably looking for readonly rather than disabled (and without jQuery):

<input type="text" name="readOnlyValue" value="666" readonly="readonly" />

This topic has been asked differently and answered in details here. In short:

  • disabled prevents focus and prevents from sending the data
  • readonly allows the focus but prevents modifying and lets the data be sent

Be careful though as the user is easily able to change the input's value by hacking the page. So you should be ready to handle malicious users on the server side.

Upvotes: 1

Related Questions