AJAX调用在Chrome中运行，但不适用于Safari，Firefox或Internet Explorer

Question

I have a single page with multiple forms, submitting each of them with an AJAX call to the same PHP controller. In Chrome, when I submit the form, I get a beforeSend message, and then a success call. In Safari, IE and Firefox, it instead refreshes the page, thus seemingly going right past the ajax call that should keep it from refreshing.

The forms are of this type:

<form method="post" class = "multi-form teacher_account_form" id="personal_form" name="personal_form">
    <div class = "form-group">
        <label for="phone">What is your phone number?*</label>
        <input type="text" class="form-control bfh-phone" data-format="+86 ddd dddd dddd" name="phone" id="phone" value="<?=$this_user[0]['phone']?>">
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-default btn-med account_submit" id="personal_submit" name="personal_submit">Update Personal</button>
    </div>                
</form>

The JS is like this:

var which_button;
$('.account_submit').click(function() {
    which_button = $(this).attr('id');

    // Create empty jQuery objects -
    var $jsOutput = $([]);
    var $jsForm = $([]);

    // url to submit to
    var ajaxURL = "/users/p_teacher_account_work";

    // Assign jQuery selector objects
    switch (which_button) {
        case "work_submit":
            $jsOutput = $('#pay_output');
            $jsForm = $('#pay_form');
            break;
        case "edu_submit":
            $jsOutput = $('#edu_output');
            $jsForm = $('#edu_form');
            break;
        case "image_submit":
            $jsOutput = $('#image_output');
            $jsForm = $('#image_form');
            break;
        case "personal_submit":
            $jsOutput = $('#personal_output');
            $jsForm = $('#personal_form');
            break;
    }

    // Lock and load the ajax request -
    var ajax_options = {
        type: 'post',
        url: ajaxURL,
        beforeSend: function() {
            //Display a loading message while waiting for the ajax call to complete
            $jsOutput.html("Updating...");
        },
        success: function(response) {
            $jsOutput.html(response);
        }
    };
    $jsForm.ajaxForm( ajax_options );


});

My php files query the database and send back information to a view which is echoed to the same page that the forms sit on.

Answer 1

It was not working because of a boostrap formhelpers plugin country picker dropdown http://bootstrapformhelpers.com/country/#jquery-plugins that wasn't loading correctly in the problematic browsers. For what it's worth, here is the code that wound up working (not including the removal of that nefarious plugin):

var which_button;
//$('.account_submit').click(function() {
$('form.teacher_account_form').on('submit', function(e) {
    e.preventDefault();
    which_button = $(this).attr('id');

    // Create empty jQuery objects -
    var $jsOutput = $([]);
    var $jsForm = $([]);

    // url to submit to
    var ajaxURL = "/users/p_teacher_account_work";

    // Assign jQuery selector objects
    switch (which_button) {
        case "pay_form":
            $jsOutput = $('#pay_output');
            $jsForm = $('#pay_form');
            break;
        case "edu_form":
            $jsOutput = $('#edu_output');
            $jsForm = $('#edu_form');
            break;
        case "image_form":
            $jsOutput = $('#image_output');
            $jsForm = $('#image_form');
            break;
        case "personal_form":
            $jsOutput = $('#personal_output');
            $jsForm = $('#personal_form');
            break;
    }

    // empty data object
    var form_data = {};

    // variables for data
    $(this).find('[name]').each(function(index, value) {
        var that = $(this),
            name = that.attr('name'),
            value = that.val();

        // load loaded variables into array
        form_data[name] = value;

    });

    $.ajax({
        type: 'post',
        url: ajaxURL,
        data: form_data,
        beforeSend: function() {
            //Display a loading message while waiting for the ajax call to complete
            $jsOutput.html("Updating...");
        },
        success: function(response) {
            $jsOutput.html(response);
        }

    });

    return false;


});