JSF 2.0 command button to prevent multiple submission using jQuery

Question

I am using JSF 2.0 and dealing with the multiple submission when click double-clicked on the submit button.

I have used jQuery to disable a command button when click, and here is my code:

$("input[name='form:submitButton']").click(function() {
    $(this).attr("disabled", true);
    return true;
});

When I click on the button, the submit button disable successfully but the submission does not fire at all.

Anyone could give me some hints on it?

Thank you very much!!

Are you sure the selector is working? What does `alert('xx: ' + $("input[name='form:submitButton']").length)` print? — Tim Büthe, Nov 05 '12 at 09:39
My guess is you have an error in your page as your code works fine here: http://jsfiddle.net/N7n7X/. Check the console for errors — Rory McCrossan, Nov 05 '12 at 09:42
I have just checked. The selector is working and no error has been captured on the console. — Hei, Nov 05 '12 at 09:51

score 1 · Answer 1 · answered Nov 05 '12 at 10:16

1

try

$("input[name='form:submitButton']").click(function() {
    setTimeout("$(this).attr('disabled', true);", 50);
    return true;
});

or

<h:commandButton value="Go"
   onclick="setTimeout('this.disabled = true;', 50);" 
   action="#{bean.go()}"/>

answered Nov 05 '12 at 10:16

Daniel

36,833
10
119
200

score 0 · Answer 2 · edited Nov 05 '12 at 10:07

0

Try something like this

<h:commandButton value="Submit" onclick="document.getElementById(\'' + this.id + '\').disabled=true;">
  <f:ajax execute="@form" listener="#{bean.listener}"/> 
</h:commandButton>

You can add to f:ajax oncomplete="....disabled=false", or update the whole view to re-enable the button.

edited Nov 05 '12 at 10:07

SchmitzIT

9,227
9
65
92

answered Nov 05 '12 at 09:49

mechu

1
1

JSF 2.0 command button to prevent multiple submission using jQuery

2 Answers2