Question

I have a little webform that pops up shadowbox style. The form then submits and the information is sent via ajax. This works a treat in firefox, however in safari, on pressing submit it closes the shadow box and seems to just submit the form (no ajax).

The html code of the button and stuff…

  <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="[e-mail]" 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>

The relevant Jquery code is as follows:

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


});

I’m wondering if safari doesn’t like me rebinding the submit function because it seems to just be working as is as though I didn’t even write any JS code… what do u think?

Answer 1

I think you need to add

return false;

after the ajax call to stop the default submit action from occuring.

Here’s the EG from the api

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