ajax表单不会正确提交

Question

也许我只是非常困惑。我对AJAX比较陌生。我在单个页面上有多个表单，我最终尝试提交，但目前，我只想提交其提交按钮被单击的特定表单。由于范围问题，我已将“选项”和“绑定”带入了我的单一功能，但我也乐于在其之外工作。这不起作用（尝试选择基于它与其他形式的网页上共享一个窗体类的形式，而是挑出其特定的ID）：

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

var options = { 
    type: 'POST', 
    url: "https://stackoverflow.com/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: "https://stackoverflow.com/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文件的页面，和数据库的更新。

UPDATE：我使用一个按钮，而不是输入类型= “提交”

Answer 1

我需要创建空的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 = "https://stackoverflow.com/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); 


}); 

Answer 2

试试这个

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

Answer 3

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

Answer 4

如果您执行的表单的提交，你需要防止的实际形式从提交ajax电话：

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

Answer 5

我有些类似的问题，我所做的就是这样的：

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. 

这是我目前正在做的，我没有问题。
这可以防止表单被分配给它的函数提交。
希望这会有所帮助。