Esto es lo que estoy tratando de hacer. Tengo 3 formularios en una página, debo hacerlo porque un formulario está abierto en el cuadro de diálogo modal. Deseo enviar los 3 formularios cuando el usuario haga clic en un solo botón. También me gustaría. una implementación ajax de la función de éxito en error en el formulario de envío
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> <script> var firstFormData = $("#form1").serialize(); var secondFormData = $("#form2").serialize(); var thirdFormData = $("#form3").serialize(); $.post( URL: test.php firstFormData + secondFormData + thirdFormData ); </script> <form id="form1"> <input type="text" name="one"></input> </form> <form id="form2"> <input type="text" name="two"></input> </form> <form id="form3"> <input type="text" name="three"></input> </form> <button>submit here</button> <?php echo $_POST['one']; echo $_POST['two']; echo $_POST['three']; ?>Esto también debería funcionar para usted:
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> <script> $("#sub").on("click mousedown touchstart", function (){ var firstFormData = $("#form1").serialize(); var secondFormData = $("#form2").serialize(); var thirdFormData = $("#form3").serialize(); $.ajax( { type: 'POST', url: 'test.php', data: { one: firstFormData, two: secondFormData, three: thirdFormData }, success: function(data) { console.log(data); } }); }); </script> <form id="form1"> <input type="text" name="one"></input> </form> <form id="form2"> <input type="text" name="two"></input> </form> <form id="form3"> <input type="text" name="three"></input> </form> <button id="sub">submit here</button> <?php echo $_POST['one']; echo $_POST['two']; echo $_POST['three']; ?>Ya casi has terminado con tu implementación. Para concatenar los formularios, debe usar & .
var firstFormData = $("#form1").serialize(); var secondFormData = $("#form2").serialize(); var thirdFormData = $("#form3").serialize(); $.post('test.php', firstFormData + "&" + secondFormData + "&" + thirdFormData) .done(function(data) { // success function }).fail(function() { // fail function });para agregar un controlador de eventos al botón, puede agregar una identificación y adjuntar un controlador de eventos
<button id="submit-btn">Submit</button>y el controlador de eventos
$('#submit-btn').on('click', function() { // do the ajax call var data = $('#form1,#form2,#form3'); $.post('test.php', data).done(function(data) { alert(data); }); });También puedes simplemente hacer lo siguiente:
var combinedFormData = $("#form1,#form2,#form3").serialize();Esto serializará los tres formularios en una cadena de consulta. Solo asegúrese de que los nombres de entrada no se superpongan.
Una implementación completa se vería así:
<?php // PHP Code to return the HTML to be inserted in the #result div // Just for demonstration purposes. if (count($_POST) > 0) { echo "<p>You successfully posted:</p><ul>"; foreach ($_POST as $key => $val) { echo "<li>$key: $val</li>"; } echo "</ul>"; exit; } ?> <html> <head> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <form id="form1"> <input type="text" name="one"> </form> <form id="form2"> <input type="text" name="two"> </form> <form id="form3"> <input type="text" name="three"> </form> <button id="sendforms">Submit forms</button> <div id="result"></div> <script type="text/javascript"> $(document).ready(function () { $("#sendforms").click(function() { var combinedFormData = $("#form1,#form2,#form3").serialize(); $.post( "test.php", combinedFormData ).done(function(data) { alert("Successfully submitted!"); $("#result").html(data); }).fail(function () { alert("Error submitting forms!"); }) }); }); </script> </body> </html>Tenga en cuenta que el código PHP es solo para ilustración y prueba. No debe implementar el manejo de su formulario de esta manera, ni ponerlo en el mismo archivo que su formulario. Todo es mal estilo :-)
Aquí hay un jsFiddle que funciona: https://jsfiddle.net/kLa1pd6p/