2012-03-19 31 views
10

Estoy creando un formulario de registro para un cliente para un evento que están organizando. Los detalles básicos del usuario se envían a un sistema de terceros (es decir, nombre, correo electrónico, etc.) pero el resto de los campos se deben enviar por correo electrónico al cliente.jquery: enviar un formulario dos veces

necesito algo como esto suceda:

  1. elemento de la lista
  2. usuario rellena el formulario
  3. jQuery bvalidator comprueba la forma de campos obligatorios se somete
  4. forma (a través de AJAX) a una página separada donde se envía un correo electrónico al cliente
  5. El formulario se envía luego (método POST normal) a un sistema de terceros
  6. en El usuario de éxito se devuelve a una url de 'gracias'.

Este es el código que he intentado utilizar, pero se ve atrapado en un bucle repetidamente sometiéndose a la página de 'e-mail', y nunca se somete a la dirección URL externa.

Si reemplazo el $('#form1').submit(); con una alerta, se envía solo una vez a la página de correo electrónico y luego muestra la alerta correctamente.

var myvalidator = $('#form1').bValidator(optionsGrey); 

$('#form1').submit(function() { 
    if (myvalidator.isValid()) { 

    $.ajax({ 
     data: $('#form1').serialize(), 
     type: "POST", 
     url: "email_send.asp", 
     success: function() { 
     $('#form1').submit(); 
     } 
    }); 
    } 
    return false; 
}); 

¿Alguna sugerencia sobre cómo puedo solucionar esto?

Respuesta

27

Probar:


$('#form1').unbind('submit').submit(); 
+0

que funcionaba muy bien, gracias – Dog

3

intentan presentar compromiso.Por evento en su éxito: el método de la llamada ajax llamando unbind

$('#form1').unbind('submit'); 
$('#form1')[0].submit(); // call native submit 

http://api.jquery.com/unbind/

+0

unbind fue sin duda el camino a seguir :) – Dog

+0

1 TKS hacer el truco – Mike

0

Puede utilizar jquery.form plug-in para la presentación del modelo a través de AJAX. Pedido siguiente dirección: http://jquery.malsup.com/form/

Luego, en su script js intentar algo como esto

var myvalidator = $('#form1').bValidator(optionsGrey); 

$('#form1').submit(function(){ 
    if(myvalidator.isValid()){ 
     $(this).unbind('submit').submit(); 

}); 
1

Puede utilizar unbind() para volver al comportamiento predeterminado.

var myvalidator = $('#form1').bValidator(optionsGrey); 

$('#form1').submit(function() { 

    if(myvalidator.isValid()) { 

     $.ajax({ 
      data: $('#form1').serialize(), 
      type: "POST", 
      url: "email_send.asp", 
      success: function(){ 
       $('#form1').unbind('submit'); 
       $('#form1').submit(); 
      } 
     }); 

    } 

    return false; 

}); 
1

Hm no estoy seguro de entender. Siempre se está enviando a email_send.asp, por lo que en cada caso de éxito lo hace, por lo tanto, parece bastante claro por qué se queda atascado en un bucle.

Si entiendo bien, el segundo envío debe ser a otra URL con un controlador de éxito diferente, ¿verdad?

Así, en lugar de presentar el formulario de nuevo sólo podría escribir una función ajax básica:

$('#form1').submit(function() { 
    if (myvalidator.isValid()) { 
    $.ajax({ 
     data: $('#form1').serialize(), 
     type: "POST", 
     url: "email_send.asp", 
     success: function(){ 
     $.ajax({ 
      data: $('#form1').serialize(), 
      type: 'POST', 
      url: 'third_party.asp', 
      success: function() { 
      //display thank you message 
      }    
     }); 
     } 
    }); 
    }  
}); 

EDITAR Aquí está una respuesta actualizada de acuerdo con su comentario:

var myvalidator = $('#form1').bValidator(optionsGrey); 

$('#form1').submit(function(){  
    if(myvalidator.isValid()){ 
    $.ajax({ 
     data: $('#form1').serialize(), 
     type: "POST", 
     url: "email_send.asp", 
     success: function(){ 
     $('#form1').unbind('submit').submit(); 
     } 
    }); 
    } 
    return false; 
}); 
+0

sí, eso es lo que originalmente intentado hacer (2 entradas separadas ajax), pero la presentación de los datos al sistema de terceros no funcionó para mí ... puede haber enviado los datos pero no estaba devolviendo un 'éxito' ... es por eso que decidí enviar el formulario una vez a través de ajax para enviar un correo electrónico, y luego enviar el formulario de la forma convencional la segunda vez ... – Dog

+0

Oh, bien, pero ¿te das cuenta de que el segundo envío será el exakt mismo que antes? ¡Actualizaré mi respuesta por ti! – tbleckert

+0

gracias por la actualización ... la función 'desvincular' fue la clave :) – Dog

0

¿Tiene una razón para tener que utilizar el submit -metodo? La razón por la que ingresa un bucle infinito es porque invoca el mismo detector de eventos de envío nuevamente.

De lo contrario, puede poner en cola dos ajax-submits, uno en la página de correo electrónico y nuevamente en el cliente.

Finalmente, puede desvincular el detector de eventos. Una forma poco conocida de desvincular un detector de eventos es pasar el objeto del evento al unbind -call. Esto sólo se desenlaza el detector de eventos actual:

$('#form1').submit(function(e){ 
    if(myvalidator.isValid()){ 
$form = $('#form1'); 
$.ajax({ 
    data: $form.serialize(), 
       type: "POST", 
       url: "email_send.asp", 
       success: function(){ 
       $form.unbind(e).submit(); 
       } 
      }); 
    } 
    return false; 
}); 
0

Aquí es un código de ejemplo de la presentación del modelo dos veces para diferentes URL sin cambio de dirección. Haga clic en el botón "Prueba" dos veces.

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="ISO-8859-1"> 
    <title>Insert title here</title> 
    <script type="text/javascript" src="jQuery.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $("#testBtn").click(function() { 
      $("#form").submit(); 
      $("#form").submit(function() { 
       $("#form").attr("action", "download"); 
      }); 
     }); 
    }); 
    </script> 
    </head> 
    <body> 
     <form id="form" enctype="multipart/form-data" method="post" 
      action="upload" target="myIFrame"> 
      <input type="hidden" name="FileName" /> 
      <input type="file" name="FileDialog" size="100" /> 
      <input type="submit" /> <input name="txt" type="text" /> 
     </form> 
     <input id="testBtn" type="button" value="Test" /> 

     <iframe style="display: none;" src="javascript:''" id="myIFrame"> 
      <html> 
       <head></head> 
       <body></body> 
      </html> 
     </iframe> 
    </body> 
    </html> 
-1

Me enfrentaba el mismo problema. Luego me di cuenta de que accidentalmente había vinculado mi archivo JavaScript personalizado dos veces, por lo que el formulario fue enviado dos veces por dos scripts. El problema se resolvió quitando un enlace de script del pie de página.

<script src="<?php echo base_path; ?>/js/custom.js"></script> 
<script src="<?php echo base_path; ?>/js/custom.js"></script> 
Cuestiones relacionadas