Ajax POST具有多个PHP目标的多个表单

时间:2016-06-25 14:19:15

标签: php jquery ajax forms

我有一个包含两个表单的页面,每个表单为其帖子使用不同的PHP页面。我只能找到使用相同PHP post脚本的多个表单的示例/文档。我正在努力让这个工作起来,有什么帮助吗?

这是JQUERY,如果我使用一个表单就可以了,我试图添加一个ID标签,但它似乎不起作用:

         $(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 个答案:

答案 0 :(得分:1)

你必须循环你的表格:

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

})
});

});

答案 1 :(得分:0)

您需要做的是简单地动态获取action属性。您可以使用函数内的form.attr('action');轻松完成此操作。见下文 -

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

  });

});

更新:

<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>