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.

AJAX不适用于jQuery

weixin_33712987

3个回复