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 回答