Ajax阻止我的表单提交

时间:2013-04-22 03:14:52

标签: php jquery ajax

我已经在酒店创建了一个列表促销的表格,我通过登记入住和退房日期获得了搜索促销的ajax。我的促销列表有一个预订提交按钮。

当我的页面加载时,我只是从一些随机日期从数据库中检索促销列表,并且我获得了用户使用的搜索表单,使用ajax提交来过滤促销,但是当ajax触发时,预订按钮不会提交。 / p>

请帮帮我。提前致谢

这是ajax代码:

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

这是我的搜索表单:

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

这是我的促销清单:

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

2 个答案:

答案 0 :(得分:0)

您的成功回调函数是指未出现在屏幕上的元素(至少没有提供的代码。此外,您可能希望验证使用PHP生成的URL实际上是否指向有效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;
});

答案 1 :(得分:0)

首先,你的jquery脚本必须在任何php文件中,因为你正在使用php脚本。因此,如果您使用.js文件,它将无法工作。

现在,让我们简化并将您的jquery脚本升级到1.9.x版本,

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

这里,php脚本应该在双引号内,而php代码则使用单引号。

修改

让我们做一些测试,逐个使用。

测试1:jQuery测试。警告应该在页面加载时弹出。

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

测试2:表格底层测试。单击#submitform时不应刷新页面。提交表单后,刷新页面(按f5)。刷新弹出框时不应该出现“要重新提交”或类似的内容吗?

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