Ajax阻止我的表单提交

I have create a form for listing promotion in hotel, and I got ajax for search the promotion by check in and check out date. My promotion list have a submit button for booking.

When my page load, I just retrieve the promotion list from database with some random date, and I got search form for user use to filter the promotion by using ajax submit but when ajax trigger, the booking button is not submit.

Please help me. Thanks in advance

This is the ajax code:

$("#submitform").click(function(){
    $.ajax({
    data:$("#checkpromofrm").serialize(),
    url:'<?php echo '/'.APP_ROOT.'/promotion/checkpromotion'?>',
    type:"POST",
    success:function(respone){
    $('#hideform').html(respone);
    }
    });
    return false;
});

And this is my search form:

<form name="frmrate" action="" id="checkpromofrm">
    Check-in
    <input type="text" id="popupDatepicker"  style="width:100px;" name="txtstartdate" value="<?php $currentdate = date('d-M-Y', strtotime('1 days'));
                    echo $currentdate;
                }
            ?>"/>

    Check-out:
    <input type="text" id="elapsed"  style="width:140px;text-align:left; border:none;padding-left:0px;"  value="<?php $currentdate = date('d-M-Y', strtotime('2 days'));
                    echo $currentdate;
                }
            ?>" readonly="readonly" name="EndDateCheckRate"/>
    <input type="submit" id="submitform" value=" Check"  name="" />
</form>

This is my promotion list:

<form action="<?php echo '/' . APP_ROOT . '/'; ?>promotion/<?php echo $newroom['h_id']?>/hotel" method="post">
    <tr id="songlist">
        <td width="100">
            <img src="<?php echo '/'.APP_ROOTAdmin.'/'.$newroom['r_picpath'];?>" align="left"  />   
        </td>
        <td >
            <p><span style="color:#1A7CBC;font-weight:bold;">
                <input type="hidden" name="r_cat" value="<?php echo $newroom['r_cat']; ?>"  />
                <input type="hidden" name="brf" value="<?php $newroom['brf'] ?>"  />
                <?php echo $newroom['r_cat'];?> Single</span>
                <font><b>
                    <i><br />
                        <?php if($newroom['brf']=='0')
      { echo "Breakfast not included"; }
      else { echo "Breakfast included";}?>
                    </i></b>
                </font>
            </p>
        </td>


        <td align="center" valign="middle">
            <input type="hidden" name="txthid" value="<?php echo $HoDetail['h_id']; ?>" />
            <input type="hidden" name="txtrid" value="<?php echo $newroom['r_id']?>" />
            <input type="submit" class="bookbutton red" value="Book now" onclick="return check(num);" /><br />
            Only <?php echo $newroom['s_room']?> rooms left
        </td> 
    </tr>
</form>

Your success callback function refers to an element that isn't appearing on your screen (at least not with the provided code. Also, you might want to verify that the URL you're generating with PHP is actually pointing to a valid URL.

$("#submitform").click(function(){
  $.ajax({
    data:$("#checkpromofrm").serialize(),
    url:'<?php echo '/'.APP_ROOT.'/promotion/checkpromotion'?>',
    type:"POST",
    success:function(respone){
      $('#hideform').html(respone);  //<-- doesn't exist 
    }
  });
  return false;
});

First, your jquery script must be in any php file, because you are using php script in it. So, it will not work if you are using .js file for that.

Now, let's simplify and upgrade your jquery script to 1.9.x version,

$(document).ready(function() {     
     $(document).on('click', '#submitform', function() {
          var data = $('#checkpromofrm').serialize();
          $.post ("<?php echo '/' . APP_ROOT . '/promotion/checkpromotion'; ?>", {data:data}, function(response) {
               // do something with response
          });

          return false;
     });
})

Here, php script should be inside double quotes, and php code using single quotes.

EDIT

Let's do some tests, Use it one by one.

Test 1: jQuery test. Alert should be popup at page load.

$(document).ready(function() {
     alert("jQuery Loaded Successfully.");
})

Test 2: Form submition test. Page should not be refresh on clicking #submitform. After submitting form, refresh page (press f5). On refreshing popupbox should not appear telling "want to resubmit" or similar?

$(document).ready(function() {
     $(document).on('click', '#submitform', function() {
          return false;
     });
})