3

I have a simple form with three-four input fields and a submit button.

Functionality to be implemented: On clicking submit button, submit button should get disabled so that no other click on button can be done. I can't hide the button.

Now as I am disabling submit button using jquery/javascript, request also gets disabled & form didn't post in CHROME/IE8.

Any solutions???

Edited:

Code:

$('#submit').attr('disabled', true); OR $('#submit').prop('disabled', true);// for IE

i even tried $('#submit').attr('disabled', 'disabled'); but same result.

Aakash Sahai
  • 3,935
  • 7
  • 27
  • 41

2 Answers2

3

You say you can't hide the button, but that is the answer you need.

When I had this problem, I hid the button and replaced it with a small "loading" spinner graphic of the same size.

This deals with the problem of giving the user sensible feedback of what's happened, as well as solving the disabled button problem.

If you really need the button to remain in place but disabled, then you could use the same technique to hide the real button and display an alternative button in its place that looks the same but is disabled.

By the way, when I had this problem, it wasn't that the form failed to post at all; it's just that the browser didn't include the disabled button in the fields it posted. This is obviously a problem if your back-end script relies on the button being one of the posted values. If this is the way it's happening for you, then the other solution would be to have a hidden field, and copy the button value into it when you disable the button. This would then still submit the form without the disabled button being posted, but the value you need would be there in the hidden field instead.

Hope that helps.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • I have a loader, but at different position which works through out the application. I need a solution OR a reason why its happening, not tricks. These tricks are already in my mind. Its working in mozilla. Hope you see its not working only in IE8/chrome. – Aakash Sahai Aug 18 '12 at 10:53
  • I've provided you with two solutions. They're not tricks; they're the solutions. Disabled fields don't get included in a form post. That's the way it works; I can't tell you how to change that because that's how it works. What I can do is tell you how to work around it. – Spudley Aug 18 '12 at 11:04
  • I know that disabled fields didnt get posted, but if its working in mozilla, then why not in IE8/chrome. its working in IE9 also. Request get executed and button gets disabled... – Aakash Sahai Aug 18 '12 at 11:10
  • 1
    Browsers aren't all the same. They all try to conform to the same basic features, but stuff like this does differ between them. – Spudley Aug 18 '12 at 11:20
  • thanks, spud. I've been breaking my head on this for the past 12 hours.. the work around seems workable :) – noob Mama Mar 16 '13 at 07:58
0

on the click event - submit the form.

$(document).ready(function(){
    $('#submit-button-id').click(function(e) {
        //stop normal submit
        e.preventDefault();

        //disable button
        $(this).attr('disabled','disabled');

        //submit form
        $('#form-id').submit();
    });
});

This works as well.

$(document).ready(function(){
    $('#form-id').submit(function(e) {
        e.preventDefault();
        somefunction();
    });
});

function somefunction() {
    $('#form-id').unbind('submit');
    $('#submit-button-id').attr('disabled','disabled');
    $('#form-id').submit();
}
Community
  • 1
  • 1
B.Bart
  • 33
  • 1
  • 5
  • TClose : what if all this stuff is written inside a function, and this function gets executed onsubmit attribute?? how to get that 'e'? I dont think 'e' will give me submit event, unless a separate function is written for submit. – Aakash Sahai Aug 18 '12 at 11:41