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>

Dieter Pollier · Accepted Answer · 2016-06-25 14:53:14Z

1

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!');
       }
    });

})
});

});

answered Jun 25, 2016 at 14:53

Dieter Pollier

8391 gold badge6 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tosho Trajanov · Accepted Answer · 2016-06-25 15:21:22Z

0

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>

edited Jun 25, 2016 at 15:21

answered Jun 25, 2016 at 14:26

Tosho Trajanov

7908 silver badges19 bronze badges

6 Comments

spyda46 Over a year ago

This doesn't seem to be working for me, the first works but the second form does not, I just get the pop up and no redirection to the script.php page

spyda46 Over a year ago

I've had another go and can't seem to get the second script to work, it doesn't get redirected to the script1.php page, I've edited the question with full source -- Thanks !

Tosho Trajanov Over a year ago

Can you please replace alert('Note has been edited!'); with alert(form.attr('action'));. Let me know what is the alert

spyda46 Over a year ago

It responds with the script1.php name, I think its possible i need to rethink if i need ajax here as its not doing what I wanted. Thanks for your help, this works but not for what I need

Tosho Trajanov Over a year ago

I am assuring you the snippet is working as expected. I update the answer with the whole HTML. If you open the Dev Tools and follow the AJAX calls in the Network tab, you can see that if you click on the first button a request is sent to script1.php, if you click on the second one, a request is sent to script2.php

|

Collectives™ on Stack Overflow

Ajax POST multiple forms with multiple PHP destinations

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related