Question

我的情况是我有一些带有某些字段的表单。

我有5个输入字段，我想使用jquery ajax验证2个字段用户名和购买代码。如果这两个字段有效，请像borwser一样自然地提交表单（不是ajax）。

这是我的jquery

$(document).ready(function() {  

  $('#submit').click({status:'initial'}, function(e) {  

     e.preventDefault(); 

     $('.error').hide();
     $('.success').hide();

     // get data from form
     var username = $("input#username").val(); 
     var itemCode = $("input#itemCode").val(); 
     var dataString = 'username ='+ username + '&itemCode=' + itemCode;  

     $.ajax({  
      type: "POST",  
      url: "verify_purchase.php",  
      data: dataString,  
      success: function(html) {  

         // valid purchase
         if (html == 'valid') {
             form.submit();
         } else{
             // if wrong purchase details
             // do some stuff 
         };                  
      }  
    });  

});

问题是，当我提交表单时，ajax工作正常，但我的表单后来没有像浏览器提交表单那样提交。

任何帮助??

Answer 1

如果验证返回错误，则只需使用javascript来阻止自然提交，而不是检查用户是否点击了提交按钮。

所以这样：

<form action="/somewhere.php" action="post" 
    onsubmit="return startValidatingForm();">

javascript函数看起来像：

function startValidatingForm(){
    // Do ajax and validation

    return html == "valid";
}

现在，如果ajax请求发现任何错误，该函数将返回false，这将阻止表单实际提交。如果函数返回true，表单将以自然方式提交。

Answer 2

在您拥有的代码中，我认为错误就是这一行：

form.submit();

我无法在任何地方看到form。纯粹依靠你提供的代码，你可以这样做：

$('#submit').parents('form').submit()

但是，我认为更好的整体方法是向表单添加submit事件处理程序，并在验证失败时停止“自然”提交，而不是处理提交按钮的click事件。根据表单和浏览器的不同，它可以由某人在文本字段中返回时提交，因此提交按钮的点击事件不一定可靠。

所以，如果您有这样的表格：

<form id="my_form" action="purchase.php" method="post">

然后脚本可能如下所示：

$('#my_form').submit(function (e) {
    $('.error').hide();
    $('.success').hide();

    // get data from form
    var username = $(this).find("input#username").val(); 
    var itemCode = $(this).find("input#itemCode").val(); 
    var dataString = 'username ='+ username + '&itemCode=' + itemCode;  

    $.ajax({  
        type: "POST",  
        async: false,
        url: "verify_purchase.php",  
        data: dataString,  
        success: function(html) {  

        // valid purchase
        if (html == 'valid') {
            return true;
        } else{
            // if wrong purchase details
            e.preventDefault();

            // do some stuff
            return false;
        };                  
  } 
});

Answer 3

而不是：

form.submit();

试试这个：

//use $('#submit') not $(this) {ajax context}
$('#submit').off('click').click(); //this should reaffect native click behaviour on submit

Answer 4

通常为了提交表单，你应该将它的id提供给JQuery，因为JQuery需要一个选择器来查找DOM中的元素并在其上调用一个函数。例如，您有一个表格如下：

<form id="orderForm" action="orderhandler.php" ...>
some fields...
</form>

这里是为了通过jQuery提交表单来编写

$('form#orderForm').submit();

或

$('form#orderForm').trigger('submit');

如何ajax验证几个表单字段然后提交自然方式？/

4 个答案: