Question

我有一个弹出shadowbox风格的小网页形式。然后提交表单，并通过ajax发送信息。这在firefox中起作用，但是在safari中，按下提交它会关闭阴影框并且似乎只是提交表单（没有ajax）。

按钮的html代码和东西......

  <div id="booking_box_header"></div>
 <div id="booking_box_content">


  <div id="booking_box_left">


</div>

<div id="booking_box_right_container">

<form id="booking_form_1" method="post">

    <input name="event_id" value="4" type="hidden">
    <input name="time_id" value="18" type="hidden">
    <input name="booking_email" value="blah@domain.com" type="hidden">

    <div id="booking_box_right">
      <input name="booking_name" type="text"> 
      <input name="booking_mobile" type="text">

      <div id="ticket_select">
      <select name="booking_state" id="booking_state"></select>

         // the submit button
        <input id="next" value="Next" type="submit">

      </div>

    </div>
  </form>
</div>

相关的Jquery代码如下：

 $('#booking_form_1').submit(function() {

  var booking_email = $('input[name=booking_email]').val();
  var event_id = $('input[name=event_id]').val();
  var time_id = $('input[name=time_id]').val();

 // bring up the loading
  $('#booking_box_content').html(loader_img);

  // submit the data to the booking form again
  $.ajax({
    type: 'POST',
    url: 'process.php',
    cache: false,
    data: 'booking_step=1&event_id='+event_id+'&time_id='+time_id+'&booking_email='+booking_email+'',
    success: function(data) {
      $('#booking_box_content').html(data);
    }
  });


});

我想知道safari是否不喜欢重新绑定提交函数，因为它似乎只是工作，好像我甚至没有编写任何JS代码......你觉得怎么样？

Answer 1

我不能真正代表Safari，因为我没有使用它，但症状（表格提交像往常一样）与我过去的经历敲响了钟声。如果JavaScript事件处理程序（例如onsubmit）引发异常，则几乎每个浏览器中的默认操作都是继续执行用户启动的任何操作。您可以考虑使用JavaScript调试器（如果有任何Safari，则为dunno）或将整个提交处理程序包装在try / catch块中并alert()处理异常文本。这很可能会让你直接找到真正的问题。

Answer 2

我认为你需要添加

return false;

在ajax调用之后停止发生默认提交操作。

这是来自api

的EG

$('#target').submit(function() {
  alert('Handler for .submit() called.');
  return false;
});

Answer 3

试试这个jQuery。它使用表单的提交事件和jQuery prevent default来阻止表单提交。详情见documentation of the submit event。

 $('#booking_form_1').submit(function(e) {
  e.preventDefault();
  var booking_email = $('input[name=booking_email]').val();
  var event_id = $('input[name=event_id]').val();
  var time_id = $('input[name=time_id]').val();

 // bring up the loading
  $('#booking_box_content').html(loader_img);

  // submit the data to the booking form again
  $.ajax({
    type: 'POST',
    url: 'process.php',
    cache: false,
    data: 'booking_step=1&event_id='+event_id+'&time_id='+time_id+'&booking_email='+booking_email+'',
    success: function(data) {
      $('#booking_box_content').html(data);
    }
  });


});

为什么这在firefox中有效但在safari中无效？

3 个答案: