与Firefox的ajax兼容性问题

Question

Hi I have created a website that has a form which actions directs to paypal payment. Before directing to paypal page, I created an ajax script that will read an external php file which will save my other data in the form to the database before directing to paypal. I got it work with IE and chrome, but for some reasons, which I don't know why it will not save the data using Firefox 20.0.1.

What I want is that I want to get it work in Firefox. Since this code runs in IE and Chrome.

Heres my internal ajax script:

<script>
    $(function () {
        $('#senrollnow').on('submit', function (e) {
          $.ajax({
            type: 'post',
            url: 'insert.php',
            data: $('#senrollnow').serialize(),
            success: function () {
              alert('form was submitted'+data);
            }
          });
        });
      });
</script>

My HTML Form (index.php):

<form action="https://www.paypal.com/cgi-bin/webscr" name="ligit" method="POST" id="senrollnow" target="_top" >
                            <div class="row">
                                <div class="large-12">
                                    <div class="row">
                                        <div class="large-6 columns">
                                            <input type="text" placeholder="First Name" name="first_name" required />
                                        </div>
                                        <div class="large-6 columns">
                                            <input type="text" placeholder="Last Name" name="last_name" required />
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="large-12 columns">
                                            <input type="email" placeholder="Email" name="email" required />
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="large-12 columns">          

                                            <input type="hidden" name="on0" value="Courses Options">Courses Options
                                            <select name="os0">
                                                <option value="Basic (30 mins)">Basic (30 mins) : $69.00 AUD - monthly</option>
                                                <option value="Basic (1 hour)">Basic (1 hour) : $129.00 AUD - monthly</option>
                                                <option value="Standard (30 mins)">Standard (30 mins) : $69.00 AUD - monthly</option>
                                                <option value="Standard (1 hour)">Standard (1 hour) : $129.00 AUD - monthly</option>
                                                <option value="International (30 mins)">International (30 mins) : $69.00 AUD - monthly</option>
                                                <option value="International (1 hour)">International (1 hour) : $129.00 AUD - monthly</option>
                                            </select> 
                                        </div>
                                    </div>
                                    <br/>
                                    <div class="row">
                                        <div class="large-12 large-centered columns text-center">
                                            <input type="hidden" name="currency_code" value="AUD">
                                            <input class="pulse-shrink" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                                            <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
                                            <!--<input id="button_enroll" type="submit" name="ligit" placeholder="Email" class="button" value="Enrol Now!" /> -->
                                        </div>
                                    </div>
                                    <a class="close-reveal-modal">&#215;</a>
                                </div>
                            </div>
                        </form>

And my PHP: insert.php

require_once "dbconfig.php";

// escape variables for security
$firstname = mysqli_real_escape_string($con, $_POST['first_name']);
$lastname = mysqli_real_escape_string($con, $_POST['last_name']);
$email = mysqli_real_escape_string($con, $_POST['email']);
$type = mysqli_real_escape_string($con, $_POST['os0']);

$date = date_create();
$created = date_format($date, 'Y-m-d H:i:s');

$sql="INSERT INTO student (first_name, last_name, email, type, created)
VALUES ('$firstname', '$lastname', '$email', '$type', '$created')";

if (!mysqli_query($con,$sql)) {
  die('Error: ' . mysqli_error($con));
}

header('Location: index.php');

Answer 1

as I understand you want to load some data to form before submitting it and after them sent form data by default way

I thing you must to do actions send form to paypal and to your server separately. One way is to send ajax form and call event.preventDefault() to prevent default submitting form and on success callback you may do submitting.

the simplest primitive way is to add a class to form e.g.

$('#senrollnow').on('submit', function (e) {
      var form = $(this);
      if(!form.hasClass('pending')) {
          e.preventDefault();
          form.addClass('pending');
          $.ajax({
              type: 'post',
              url: 'insert.php',
              data: $('#senrollnow').serialize(),
              success: function () {
                form.submit();
                // alert('form was submitted'+data);
              }
          });
      }
});