I am seeking to perform a basic form post, but the following submits 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 perform validation on the fields before submission, but wherever the return value is true
, the form is submitted twice.
I have sought to bind a jQuery handler to the form, but here too, where the default behaviour is not prevented, the form is submitted twice, e.g.:
<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>
While I suppose there is something blindingly obvious wrong here to a fresh pair of eyes, I am deeply confused why submission, with or without validation, makes a duplicate post to the server in Chrome and Safari. I'd be grateful for any insight.
This issue is actually associated with Facebox (http://defunkt.github.com/facebox/). Facebox initialization causes a second set of requests after your page loads. So, if you post to /myaction/create
, Facebox will start a second set of requests with the base URL set to /myaction/create
. A fix is to redirect to a URL which handles get requests after doing a post, so you don't end up performing the post twice. Thanks very much for your help.