Ajax表单无法正确提交

Question

也许我只是很困惑。 我对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文件回显到页面，并更新了数据库。

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

Answer 1

尝试这个

$('.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);
    }
});
});

Answer 2

除非您使用eventObject.preventDefault()或return false; ，否则onsubmit上不使用AJAX return false; 。 如果将提交更改为按钮， click而不是submit ，那么在没有其他错误的情况下，您的页面将起作用。

Answer 3

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

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

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

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

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


});