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

AJAX未使用onsubmit，除非您eventObject.preventDefault()或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 );


});

ajax表单将无法正确提交

5 个答案: