1

我的情况是我有一个包含一些字段的表单。

我有 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 工作得很好,但是我的表单没有像浏览器提交表单那样提交。

有什么帮助吗??

4

4 回答 4

1

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

所以像这样:

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

javascript 函数看起来像:

function startValidatingForm(){
    // Do ajax and validation

    return html == "valid";
}

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

于 2013-05-25T12:10:33.687 回答
1

在您拥有的代码中,我认为错误是这一行:

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;
        };                  
  } 
});
于 2013-05-25T12:11:33.023 回答
0

代替:

form.submit();

尝试这个:

//use $('#submit') not $(this) {ajax context}
$('#submit').off('click').click(); //this should reaffect native click behaviour on submit 
于 2013-05-25T11:55:13.353 回答
0

通常,为了提交表单,您应该将其 id 提供给 JQuery,因为 JQuery 需要一个选择器才能在 DOM 中找到元素并在其上调用函数。例如,您有一个如下所示的表单:

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

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

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

或者

$('form#orderForm').trigger('submit');
于 2013-05-25T11:55:24.047 回答