1

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.

Bijan
  • 7,737
  • 18
  • 89
  • 149
  • Is the data in those fields important for the user to see? If not, you could use inputs with `type="hidden"`. Otherwise, just set the `disabled` property back to true after submitting (you can use a class to keep track of which inputs are supposed to be disabled). – blex Mar 22 '16 at 19:45
  • Yeah it is important for user to see but I do not want them to edit it. – Bijan Mar 22 '16 at 19:46
  • How would I re-disable the fields after submission? – Bijan Mar 22 '16 at 19:46
  • When the submit button is pushed, the browser will not post-back and serve HTML again. Only thing that happens is that a file is downloaded which is the behavior I want – Bijan Mar 22 '16 at 20:00

3 Answers3

1

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.

Community
  • 1
  • 1
ngasull
  • 4,206
  • 1
  • 22
  • 36
  • Yeah I actually ended up doing this just before you submitted your answer. See my answer above yours because I wanted it to be styled like a disabled button – Bijan Mar 22 '16 at 20:10
  • Saw that, I was a little upset to see your answer right after I posted mine haha! By the way I encourage you to add some style anyway to "not-normal" (even disabled) inputs as the default browser style can change a lot across browsers. – ngasull Mar 22 '16 at 20:14
  • 1
    I'll give you the answer credit since you posted right before I did and I am pretty sure your (now-removed) comment was the reason I was on this track – Bijan Mar 22 '16 at 20:16
0

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

Bijan
  • 7,737
  • 18
  • 89
  • 149
0

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.

jayms
  • 3,828
  • 2
  • 11
  • 18
  • Right but then I would have 2 fields for every input that is disabled. I just ended up making the field read-only so I don't have to deal with any jQuery/Javascript – Bijan Mar 22 '16 at 20:21
  • Yes, that's exactly what I am suggesting. It requires minimal work, is not conflicting, gives the native disabled-look on any platform and requires no JS. – jayms Mar 22 '16 at 21:03