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. 

這是我目前正在做的，我沒有問題。
這可以防止表單被分配給它的函數提交。
希望這會有所幫助。