formulario presentado dos veces en Chrome/Safari

Question

estoy tratando de realizar un formulario de envío básica, pero los siguientes somete al servidor dos veces en Chrome y Safari (pero se comporta como se espera en 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> 

lo haría desea utilizar el atributo onsubmit para realizar la validación en los campos antes del envío, pero donde sea que el valor devuelto sea true, el formulario se envía dos veces.

he tratado de obligar a un controlador de jQuery para la forma, pero aquí también, donde no se impida el comportamiento por defecto, el formulario se envía dos veces, por ejemplo:

<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> 

Aunque supongo que hay algo deslumbrante Obvio error aquí con un nuevo par de ojos, estoy profundamente confundido por qué el envío, con o sin validación, hace una publicación duplicada en el servidor en Chrome y Safari. Estaría agradecido por cualquier idea.

Answer 1

Este problema está realmente asociado con Facebox (http://defunkt.github.com/facebox/). La inicialización de Facebox causa un segundo conjunto de solicitudes después de que se carga su página. Por lo tanto, si publica en /myaction/create, Facebox iniciará un segundo conjunto de solicitudes con la URL base establecida en /myaction/create. Una solución es redirigir a una URL que maneja las solicitudes de obtención después de hacer una publicación, por lo que no termina realizando la publicación dos veces. Muchas gracias por su ayuda.

Answer 2

Puede intentar return false; después de su alerta y eliminar event.preventDefault();. Tal vez también necesite return true; en su cláusula adicional. Creo que tengo eso trabajando en algún lado.

Answer 3

no estoy 100% seguro, pero por favor, intente éste:

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

si eso no funciona, por favor, eche un vistazo a

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

Esto alertará que todos los acontecimientos que están obligados a su form. Tal vez hay más controladores de eventos? De lo contrario también alerta/log

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

y

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

por si acaso.

Answer 4

Ok, no estoy seguro de cuánto esto ayudará, pero intente eliminar la entrada de envío y enviar el formulario a través de javascript. Así, por ejemplo

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

Entonces, en lugar de escuchar el onsubmit, puede intentar

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

Ahora estás debería funcionar también ... pero de esta manera se puede depurar donde estás problema es .... Esto solo debe enviarse una vez ... ¡buena suerte!