Question

我有一个表单，当我提交它时，我想将结果页面加载到原始页面上的div中。当我点击表单的提交按钮时，它会向原始页面发送获取请求，例如：http://localhost/hr/index_admin_test.php?posteddate=01-10-2015而不是http://localhost/hr/attendanceform2.php的发布请求

在原始页面中，我有以下脚本：

 <script>
 $('#timesheetsearch form').submit(function(){
      var data=$(this).serialize();
      // post data
      $.post('attendanceform2.php', data , function(returnData){
                  $('#timesheets').html( returnData)
      })

      return false; // stops browser from doing default submit process
});
  </script>

在页面正文中我有以下表格和div：

    <div class="content_text" id="timesheetsearch">
            <p> Select the date you wish to view time sheets for:</p>

            <p><form name="timesheetsearch"> <br><input name="posteddate"  value="01-10-2015" id="datepicker" />
            <div id="timesheets"></div>
 <input type="submit"> </form> </p>

Answer 1

1你可以尝试

<form method="post" action="attendanceform2.php" name="timesheetsearch">

第二次尝试

$(document).on('submit','#timesheetsearch form',function(e){
    e.preventDefault();

第3次检查您的attendanceform2.php文件路径

第4次使用第1次

<script>
$(document).ready(function(){
    $('#timesheetsearch form').submit(function(){
    //or you can use this instead>> $(document).on('submit','#timesheetsearch form',function(e){
      e.preventDefault();
      var data=$(this).serialize();
      // post data
      $.post('attendanceform2.php', data , function(returnData){
                  $('#timesheets').html( returnData);
      });

      return false; // stops browser from doing default submit process
 });
});
  </script>

Answer 2

将脚本放在像

这样的表单之后

    <div class="content_text" id="timesheetsearch">
                <p> Select the date you wish to view time sheets for:</p>

                <p><form name="timesheetsearch"> <br><input name="posteddate"  value="01-10-2015" id="datepicker" />
                <div id="timesheets"></div>
     <input type="submit"> </form> </p>

     <script>
     $('#timesheetsearch form').submit(function(){
          var data=$(this).serialize();
          // post data
          $.post('attendanceform2.php', data , function(returnData){
                      $('#timesheets').html( returnData)
          })

          return false; // stops browser from doing default submit process
    });
      </script>

如果在加载表单之前运行脚本，则由于脚本找不到任何表单，因此无法运行。您也可以在

中编写脚本

$(document).ready(function(){

})

如果您确实希望将脚本放在表单之前。希望你的脚本现在正常工作。

Ajax将一个get to orignal页面而不是一个帖子发送到另一个页面

2 个答案: