前常规表单AJAX请求被提交 [英] AJAX request before regular form is being submitted

问题描述

我是新来的jQuery，你可能会可能会发现一些基本的错误，但请，先试着解释我我怎么处理我的问题:)建议的每一位都将是AP preciated！

I am new to jQuery, you may probably find some basic errors but please, firstly try to explain me how do I deal with my issue :) Every bit of advice will be appreciated!

我有当用户试图提交执行一个jQuery表单验证脚本。我想执行与AJAX请求另一个函数（完成）后的形式进行验证，但在发送前。

I have a jQuery form validation script that is executed while user is trying to submit. I would like another function with AJaX request to be executed (and completed) after the form is validated but before it is sent.

相信我，我已阅读并尝试了在解决类似问题的十几这里，在＃1，但似乎没有要工作还是我简直不能有效地使用它...

Believe me, I have read and tried out over a dozen of solutions to similar questions here, on Stackoverflow but none seemed to be working or I just couldn't use it efficiently...

下面是脚本。在 zglosip 的功能，工作好单独调用的时候;不能从提交（）函数内即。

Here is the script. The zglosip function works okay when called separately; i.e. not from inside the submit() function.

zglosip（）; （函数，我想叫）

function zglosip() {
        $.ajax({
            type : 'post',
            url : 'res/php/nZglos.php',
            data : {
            "erepid" : "111",
            "ip" : "222",
            "poz" : "333"
            },
            success : function(data, textStatus, jqXHR) {
            tempor.html(data);
            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {
            tempor.html(errorThrown);
            },
            dataType : 'text'
            return true;
        });
    };

验证脚本（通过创建净莲Rapini 和修改我）

柱及放大器; tempor是包含一些div的姓名变量

pole & tempor are variables containing names of some divs

$("#forml").submit(function(){  
    //Validate required fields
    if ((pole.val() == "") || (pole.val() == blad)) {
        pole.addClass("podkresl");
        pole.val(blad);
    } else {
        pole.removeClass("podkresl");
    }
    // Validate the e-mail.
    if (!/\b(https?|ftp|file):\/\/[\-A-Za-z0-9+&@#\/%?=~_|!:,.;]*[\-A-Za-z0-9+&@#\/%=~_|]/.test(pole.val())) {
        pole.addClass("podkresl");
        pole.val(blad);
    }


    if ($(":input").hasClass("podkresl")) {
        return false;
    } else {
      if (zglosip() == true) {
          return true
      }
    }
});

正如你已经发现了，我曾试图在zglosIp（后退还提交（）函数的真）返回真（if语句在脚本的底部）。这没有遗憾的工作，我也打过电话zglosip（）在，但我肯定没有用它适当地单独的函数{返回true}。

As you have already found out, I had tried to return true of the submit() function after the zglosIp() returned true (the if statement at bottom of the script). This did not work unfortunately, I have also tried calling zglosip() with separate function{return true} in it but surely I have not used it properly.

推荐答案

您需要首先确保表单没有被提交，然后运行你的Ajax调用，如果调用成功，则继续提交。请注意我删除从zgoslip Ajax调用，并把它提交处理程序的形式。你可以调整你想要的方式：

You want to first ensure the form is not being submitted, then run your ajax call, and if the call is successful, proceed to submit. Note I removed the ajax call from zgoslip and put it in the submit handler for the form. you can restructure it the way you want:

$('form').submit(function(e) { 

     // this code prevents form from actually being submitted
     e.preventDefault();
     e.returnValue = false;

     // some validation code here: if valid, add podkres1 class

     if ($('input.podkres1').length > 0) { 
        // do nothing
     } else {

        var $form = $(this);

        // this is the important part. you want to submit
        // the form but only after the ajax call is completed
         $.ajax({ 
             type: 'post',
             url: someUrl, 
             context: $form, // context will be "this" in your handlers
             success: function() { // your success handler
             },
             error: function() { // your error handler
             },
             complete: function() { 
                // make sure that you are no longer handling the submit event; clear handler
                this.off('submit');
                // actually submit the form
                this.submit();
             }
         });
     }
});

这篇关于前常规表单AJAX请求被提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！