Ajax POST multiple forms with multiple PHP destinations
Question
I have a page with two forms and each form uses a different PHP page for its post. I can only find examples / documentation on using multiple forms with the same PHP post script. I am struggling to get this to work, can any help ?
This is the JQUERY, that works if i use one form, I've tried to add an ID tag but it didn't seem to work:
$(function () {
$('form').on('submit', function (e) {
var form = $(this);
e.preventDefault();
$.ajax({
type: 'post',
url: form.attr('action'),
data: form.serialize(),
success: function () {
alert('Suppiler Amended!');
}
});
});
});
</script>
</head>
<body>
<?php
echo "<div class='table1'>";
echo "<div class='datagrid'>";
echo "<table id='tblData2'><thead><tr><th>Notes</th><th>Updated By</th><th></th></thead></tr>";
while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC)) {
?>
<tbody><tr>
<td><FONT COLOR='#000'><b><?php echo "".$row["notes"].""?></td>
<td><FONT COLOR='#000'><b><?php echo "".$row["enteredby"].""?></td>
<td><FONT COLOR='#000'><b><a href="edit.php">
<form name="edit" action="script1.php" method="post">
<input type="hidden" name="notes" value="<?php echo"".$row["notes"]."";?>">
<input type="hidden" name="noteid" value="<?php echo"".$row["noteid"]."";?>">
<input type="submit" value="EDIT">
</form>
</a></td>
</tr></tbody>
<?php
$companyid = "".$row['id']."";
}
?>
</table>
</div>
<br>
<form name="notes" action="add-note.php" method="post">
ADD NEW NOTE:<br>
<input type="text" name="newnote" style="height:120px;width:200px;"><br>
<input type="hidden" name="companyid" value="<?php echo"".$companyid."";?>">
<input type="hidden" name="user" value="<?php echo"".$user."";?>">
<br>
<input type="submit" value="ADD NOTE">
</form>
2 answers
solution1
1 2016-06-25 14:53:14
You have to loop over your forms:
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$('form').each(function(i, form) {
$.ajax({
type: 'post',
url: form.attr('action'),
data: form.serialize(),
success: function () {
alert('Note has been edited!');
}
});
})
});
});
solution2
0 2016-06-25 14:26:29
What you need to do is to simply get the action attribute dynamically. You can do that easily with form.attr('action'); inside the function. See bellow -
$(function () {
$('form').on('submit', function (e) {
var form = $(this);
e.preventDefault();
$.ajax({
type: 'post',
url: form.attr('action'),
data: form.serialize(),
success: function () {
alert('Note has been edited!');
}
});
});
});
Update:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
</head>
<body>
<form name="edit" action="script1.php" method="post">
<input type="hidden" name="notes" value="1">
<input type="hidden" name="noteid" value="2">
<input type="submit" value="s1">
</form>
<form name="edit" action="script2.php" method="post">
<input type="hidden" name="notes" value="1">
<input type="hidden" name="noteid" value="2">
<input type="submit" value="s2">
</form>
<script type="text/javascript">
$(function () {
$('form').on('submit', function (e) {
var form = $(this);
e.preventDefault();
$.ajax({
type: 'post',
url: form.attr('action'),
data: form.serialize(),
success: function () {
alert('Note has been edited!');
}
});
});
});
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.