php - Submit more than one form in Javascript/ajax or jquery -
this trying have 3 forms in 1 page, need have because 1 form open in modal dialog, wish submit 3 forms when user click in single button, ajax implementation of sucess en error function in form submit
<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']; ?>
you can following:
var combinedformdata = $("#form1,#form2,#form3").serialize(); this serialize 3 forms 1 query string. make sure input names don't overlap.
a complete implementation this:
<?php // php code return html inserted in #result div // demonstration purposes. if (count($_post) > 0) { echo "<p>you posted:</p><ul>"; foreach ($_post $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> please note php code illustration , testing. should neither implement form handling this, nor put in same file form. it's bad style :-)
here working jsfiddle:https://jsfiddle.net/kla1pd6p/
Comments
Post a Comment