Ajax将get转到原始页面，而不是将帖子发送到其他页面

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();

第三检查您的attackanceform2.php文件路径

第四次与第一次一起使用

<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(){

}) 

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