CODEWITHSUNDEEP
javascriptjqueryforms
Rob
Rob

Reputation: 510

Jquery form submit button (chrome issue)

I'm trying to prevent a form from being submitted twice. I'm doing that by catching clicks on a submit button and disabling it while the form submit goes on in the background.

Here's a very basic example of the code I'm using:

$("button").click(function(){
    $(this).attr("disabled","true").html("Wait here while posted...");
});

Working example: http://jsfiddle.net/t93Vw/

This works perfectly in firefox and IE, but in chrome the form is not submitted. Why is this different behaviour, and does anyone have a quick fix?

Upvotes: 1

Views: 1307

Answers (5)

ronish
ronish

Reputation: 568

For it to work on chrome, do the following updates in your codes:

(1) your form

<form action="/test" method="post" id="myForm">
  <input type="text" name="somefield"/>
  <button id="submitbutton" type="submit">Send</button>
</form>

(2) Use jquery to submit the form:

$("button").click(function(){ 
  $('form#myForm').submit();
  $(this).attr("disabled","true").html("Wait here while posted...");
});

Upvotes: 0

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

Try .prop( propertyName, value ) and don't wrap true in quotes

value Type: String or Number or Boolean A value to set for the property.

$("button").click(function (e) {
    e.preventDefault(); //stop default behavior of form submit
    $(this).prop("disabled", true) // disable button
        .text("Wait here while posted...") //change text of button 
        .closest('form').submit();//find closest form and submit it
});

.closest()

event.preventDefault()

Fiddle Demo

Upvotes: 2

b4ttl3m4st3r
b4ttl3m4st3r

Reputation: 106

Not quite sure what's the error but maybe this will help?

$("button").click(function(e){
    e.preventDefault();
    $(this).attr("disabled","true").html("Wait here while posted...");
});

Upvotes: 0

dfsq
dfsq

Reputation: 193261

If you want to submit a form then you should use onsubmit event:

$("form").submit(function () {
    $(':submit', this).prop("disabled", true).html("Wait here while posted...");
});

onclick is for click, form has a special event for submission. Advantage is that it will properly behave on Enter key submit.

Demo: http://jsfiddle.net/t93Vw/1/

Upvotes: 5

Stphane
Stphane

Reputation: 3456

The type of the button may be the reason ... try this

<form action="/test" method="post">
    <input type="text" name="somefield"/>
    <button id="submitbutton">Send</button>
</form>


$("button").click(function(){
    $(this).prop("disabled",true).html("Wait here while posted...")
       .parent().get(0).submit();
    e.preventDefault();
});

Upvotes: 1

Related Questions