¿Cómo debo enviar mis formularios por separado?

Escribo los códigos de correo electrónico y enviaría mis formularios cuando hago clic en el botón de envío de cada formulario. mi pregunta es cómo puedo enviar cada formulario por separado e indicar cada resultado por separado. porque cuando mis códigos se ejecutan, todos los formularios se enviarán al mismo tiempo. Aquí están mis códigos:

$("#done").click(function(e) { var url = 'secondpage.htm' $.ajax({ type: "POST", url: url, data: $("#done").serialize(), success: function(data) { $('.divs').empty() $(".divs").html(data) } }); e.preventDefault(); }); 
 form{ width:100px; border:1px solid blue; height:50px; } 
  

necesita un envío de para cambiar el type="submit" botón type="submit"

Nota : se agregaron divs dentro del formulario .para evitar que se elimine el formulario después de la llamada ajax

Actualizado:

 $("form").on('submit',function(e) { var url = 'secondpage.htm' $.ajax({ type: "POST", url: url, data: $(this).serialize(), success: function(data) { $(this).find('.divs').empty $(this).find('.divs').html(data) } }); e.preventDefault(); }); 
 form { width: 100px; border: 1px solid blue; height: 50px; } 
  

Tiene muchos problemas en su código real, de los cuales podemos afirmar:

  • Dando el mismo id para múltiples elementos en la página, puedes usar la class lugar.
  • Con $("#done").serialize() solo está serializando el primer elemento con id="done" y no de ninguna form .
  • Está anulando el contenido de .divs , por lo que borra sus formularios de la página con $('.divs').empty() y $(".divs").html(data) , es mejor que use un elemento específico para mostrar la respuesta y use el método .text() para llenarlo con el contenido.

Intenté refactorizar tu código para que funcione de la manera que deseas, esto es lo que necesitarás:

 $(".done").click(function(e) { var url = 'secondpage.htm'; $.ajax({ type: "POST", url: url, data: $(this).closest('form').serialize(), success: function(data) { //$('.divs').empty() You will erase your form here $(this).closest('.preview').text(data) } }); e.preventDefault(); }); 

Manifestación:

 $(".done").click(function(e) { var url = 'secondpage.htm'; $.ajax({ type: "POST", url: url, data: $(this).closest('form').serialize(), success: function(data) { //$('.divs').empty() You will erase your form here $(this).closest('.preview').text(data) } }); e.preventDefault(); }); 
 form { width: 100px; border: 1px solid blue; height: 50px; }