A form submitted twice in Chrome / Safari

Question

I want to execute a basic form message, but the following is sent to the server twice in Chrome and Safari (but behaves as expected in Firefox):

<form id="create-deck-form" action="/decks/create" method="post"> <fieldset> <legend>Create new deck</legend> <label for="deck-name-field">Name</label> <input id="deck-name-field" name="deck-name-field" type="text" value="" maxlength="140" /> <label for="tag-field">Tags</label> <input id="tag-field" name="tag-field" type="text" value="" maxlength="140" /> <input class="add-button" type="submit" value="Create" /> </fieldset> </form> 

I would like to use the onsubmit attribute to do validation in the fields before submitting, but wherever the return value is true , the form is submitted twice.

I tried to associate the jQuery handler with the form, but here too, where the default behavior is not prevented, the form appears twice, for example:

 <script type="text/javascript"> $(document).ready(function() { $("#create-deck-form").submit(function(event){ if($("#deck-name-field").val() == "") { event.preventDefault(); alert("deck name required"); } }); }); </script> 

Although I believe that there is something dazzlingly obvious, I am deeply confused why submission with or without verification makes a duplicate message on the server in Chrome and Safari. I would be grateful for your understanding.

Answer 1

This problem is related to Facebox ( http://defunkt.github.com/facebox/ ). Initializing Facebox raises a second set of requests after the page loads. So, if you send a message to /myaction/create , Facebox will start a second set of requests with the base URL set to /myaction/create . The fix is ​​to redirect to a URL that processes receive requests after posting the message, so you won’t be able to do this twice. Many thanks for your help.

Answer 2

I am not 100% sure, but please try the following:

 <script type="text/javascript"> $(document).ready(function() { $("#create-deck-form").submit(function(event){ if(!$("#deck-name-field").val().length) { return false; } }); }); </script> 

If this does not work, review

 for(e in $("#create-deck-form").data('events')) alert(e); 

This will warn you about all events related to your form . Maybe more event handlers? Otherwise also alert / log

 $("#create-deck-form").attr('onclick') 

and

 $("#create-deck-form").attr('onsubmit') 

just in case.

Answer 3

Can you try return false; after your warning and delete event.preventDefault(); . You might also need to return true; in your else-clause. I believe that I have something working.

Answer 4

Ok, not sure how much this will help, but try removing the input to submit and submit the form via javascript. For example,

 <input id="submit-button" class="add-button" type="button" value="Create" /> 

Then instead of listening onsubmit you can try

 $('#submit-button').click(function(evt) { if(validationSuccess(...)) { $("#create-deck-form").submit(); } else { //display whatever } }); 

Now you should work too ... but this way you can debug where you are the problem ... It should only send once ... good luck!