Menu
This is what I am trying to do I have 3 forms in one page, i need to have to because one form is open in modal dialog, I wish to submit all 3 forms when the user click in a single button, also I would like a ajax implementation of sucess en error function in the 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'];
?>
267
For Sending or inserting or saving multiple data in single click then you have to use Jquery and javascript code. By using Jquery or Javascript code you can generate dynamic HTML field in your HTML form. We can generate any dynamic HTML field by using Jquery and append into your form fields.
use AJAX submission when: form submits 'to itself' (we show the same form after submission) form is only a part of a larger view (such as a search form where search results may be dynamically added to an area on the page, such as a table or thumbnail grid)
A standard form submit sends a new HTTP request (POST or GET) and loads the new page in the browser. In Ajax, the data is sent to the server (POST or GET) in the background, without affecting the page at all, and the response is then received by javascript in the background, again without affecting the page at all.
We can submit a form by ajax using submit button and by mentioning the values of the following parameters. type: It is used to specify the type of request. url: It is used to specify the URL to send the request to. data: It is used to specify data to be sent to the server.
You can also just do the following:
var combinedFormData = $("#form1,#form2,#form3").serialize();
This will serialize all three forms into one query string. Just make sure the input names don't overlap.
A complete implementation would look like this:
<?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>
Please note that the PHP code is just for illustration and testing. You should neither implement your form handling like this, nor put it in the same file like your form. It's just all bad style :-)
Here is a working jsFiddle:https://jsfiddle.net/kLa1pd6p/
78
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
