Question

我有一个包含多个表单的页面，通过对同一PHP控制器的AJAX调用提交每个表单。在Chrome中，当我提交表单时，我会收到beforeSend消息，然后是成功调用。在Safari，IE和Firefox中，它会刷新页面，因此看起来正好经过ajax调用，这样可以防止它刷新。

表格属于这种类型：

<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>

JS是这样的：

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 );


});

我的php文件查询数据库并将信息发送回视图，该视图将回显到表单所在的页面。

Answer 1

尝试使用type =“button”而不是type =“submit”。

如：

   <button type="button" class="btn btn-default btn-med account_submit" id="personal_submit" name="personal_submit">Update Personal</button>

这很hacky，但它适用于我尝试的每个浏览器。 type =“submit”对大多数浏览器来说意味着特殊的东西。

编辑：等等......你在使用Malsup的“jQuery Form Plugin”吗？

Answer 2

两件事：

1。）将您的按钮类型转为button a la：

<button type="button" class="btn btn-default btn-med account_submit" id="personal_submit" name="personal_submit">Update Personal</button>

2。）更改您的事件处理程序以调用$jsForm.ajaxSubmit( ajax_options );而不是$jsForm.ajaxForm( ajax_options );

根据他们的文档，$jsForm.ajaxForm( ajax_options );实际上并未提交表单。事实上，这正如您在Chrome中所期望的那样，表明它在提交表单时在幕后做了一些奇怪的事情。

Answer 3

尝试使用此解决方案获取简单的jQuery选项：

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;
    }

    // Get the form data
    var formData = $jsForm.serializeArray();

    // Lock and load and fire the ajax request -
    $.ajax({
        type: 'POST',
        url: ajaxURL,
        data: formData,
        contentType: "application/x-www-form-urlencoded",
        dataType: "html",
        cache: false, // this will save you a bunch of IE headaches
        beforeSend: function() {
            //Display a loading message while waiting for the ajax call to complete
            $jsOutput.html("Updating...");
        },
        error: function(jqHXR, textStatus, errorThrown) {
            alert("Sorry, something went wrong.\nDetails: " + textStatus + ". " + errorThrown);
        },
        success: function(response) {
            $jsOutput.html(response);
        }
    });
});

现在，您可以按下按钮类型=＆＃34;按钮＆＃34;或者甚至用没有默认onclick事件操作的元素替换它，例如span。

Answer 4

由于在有问题的浏览器中无法正确加载的boostrap formhelpers插件国家选择器下拉列表http://bootstrapformhelpers.com/country/#jquery-plugins，因此无效。对于它的价值，这里是完成工作的代码（不包括删除那个邪恶的插件）：

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;


});

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

4 个答案: