Ajax sending a get to orignal page rather than a post to a different page

Question

I have a form that when I submit it I want to load the result page into a div on the original page. When I click the submit button of the form however it is sending a get requst to the original page eg: http://localhost/hr/index_admin_test.php?posteddate=01-10-2015 rather than a post request to http://localhost/hr/attendanceform2.php

In the original page I have the following script:

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

And in the body of the page I have the following form and 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

1st you can try

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

2nd try

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

3rd check your attendanceform2.php file path

4th use it with 1st

<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

Place the script after the form like this

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

If you run your script before loading the form it will not work since script didn't find any form. You can also write your script inside

$(document).ready(function(){

}) 

If you really want your script to place before the form. Hope your script is working correctly now.