ajax 表单无法正确提交答案

【问题标题】：ajax forms won't submit properlyajax 表单无法正确提交
【发布时间】：2013-12-13 00:18:34
【问题描述】：

也许我只是很困惑。我对 AJAX 比较陌生。我在一个页面上有多个表单，我最终尝试提交，但目前，我只想提交单击其提交按钮的特定表单。由于范围问题，我将“选项”和“绑定”带入了我的单个函数，但我也很乐意在它之外工作。这不起作用（尝试根据它与页面上的其他表单共享的表单类来选择表单，但挑选出它的特定 id）：

$('.teacher_account_form').submit(function(){
var form_submitted = $(this).attr('id');
console.log(form_submitted);

var options = {
    type: 'POST',
    url: "/users/p_teacher_account_work",
    beforeSubmit: function() {
        $('#pay_output').html("Updating...");
    },
    success: function(response) {
        $('#pay_output').html(response);
    }
};

// Using the above options, ajax'ify the form
$(form_submitted).ajaxForm(options);    

});

以下内容有效，但这意味着我正在对我的表单 ID 进行硬编码以进行绑定：

var options = {
type: 'POST',
url: "/users/p_teacher_account_work",
beforeSubmit: function() {
    $('#pay_output').html("Updating...");
},
success: function(response) {
    $('#pay_output').html(response);
}
};

// Using the above options, ajax'ify the form
$('#pay_form').ajaxForm(options);

通过工作，我的意思是我的成功消息从 php 文件回显到页面，并且数据库更新。

更新：我使用的是按钮，而不是输入类型 =“提交”

【问题讨论】：

标签： javascript php jquery ajax forms

【解决方案1】：

不使用 AJAX onsubmit，除非你 eventObject.preventDefault() 或 return false;。如果您将提交更改为按钮并使用click 而不是submit，那么如果没有其他错误，您的页面将正常工作。

【讨论】：

我实际上正在使用一个按钮：
显然，我的意思是<input type='button' />，或<button type='button'></button>，而不是任何type='submit'。

【解决方案2】：

如果您在提交表单时执行ajax 调用，您需要阻止实际表单提交：

$('.teacher_account_form').submit(function(e){
     e.preventDefault();
     //rest of code
}

【讨论】：

【解决方案3】：

试试这个

$('.teacher_account_form').submit(function(e){
e.preventDefault();
/* var form_submitted = $(this).attr('id'); omit this line */
$.ajax({
    type: 'POST',
    url: "/users/p_teacher_account_work",
    cache: false,
    async: true,
    beforeSubmit: function() {
        $('#pay_output').html("Updating...");
    },
    success: function(response) {
        $('#pay_output').html(response);
    }
});
});

【讨论】：

我们都会犯错误@KevinBowersox
似乎它可能工作过一次，然后得到这个：Uncaught TypeError: Cannot read property 'settings' of undefined
我的代码中没有包含设置字，你一定是误把一些原始代码留在了里面
想知道这一行是什么： var form_submitted = $(this).attr('id');还在吗？
我认为可以安全地省略该行

【解决方案4】：

我遇到了一些类似的问题，我所做的是：

 1. form action="##"
 2. instead of input type="submit", use type="button"
 3. at input type="button" add onclick attribute to your function instead of using $("#id").blah
 // Call your function like this
 // example: <input type="button" onclick="some_function()" />
 4. Test your code.

这是我目前正在做的，我没有任何问题。
这可以防止表单被分配给它的功能以外的其他方式提交。
希望这会有所帮助。

【讨论】：

您是否希望更具体、更符合代码要求？不确定您在第 3 步中的意思
我在数字 3 之后添加了一个示例来演示。我使用它来使我的编码更清晰，并且它产生的问题更少。

【解决方案5】：

我需要创建空的 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 );


});

【讨论】：