jQuery 在 .submit() 表单之后重定向

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10790187/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 09:45:35  来源:igfitidea点击:

redirect after .submit() form

jqueryformsredirectsubmit

提问by jclarke04

I have a HTML form which uses a div (submitme) to trigger the following code.....the code then uses the bValidator plugin to validate the form fields and then checks whether a honeypot field is blank before submitting the form....

我有一个 HTML 表单,它使用 div (submitme) 来触发以下代码......然后代码使用 bValidator 插件来验证表单字段,然后在提交表单之前检查蜜罐字段是否为空...... .

When I exclude the "window.location..." etc the .submit() works and posts the form through, however when including it; the validation/honeypot still works but no form submits.

当我排除“window.location...”等时,.submit() 工作并通过表单发布,但是当包含它时;验证/蜜罐仍然有效,但没有提交表单。

Im new to JQUERY and was wondering if theres something simple im missing or a better way to write the below:

我是 JQUERY 的新手,想知道我是否缺少一些简单的东西,或者是否有更好的方法来编写以下内容:

$("#submitme").click(function(){
    if($('#right-body-div').data('bValidator').validate()) {

        if ($("#honeypot").val() == "") {
                $('#pgpost').submit();
                window.location = "http://www.homepage.co.uk/thankyou";    
                return true;
              }
           window.location = "http://www.homepage.co.uk/nothankyou";
           return false;
    }
});

If possible id like to accomplish this without the use of AJAX/PHP.

如果可能,我想在不使用 AJAX/PHP 的情况下完成此操作。

Your thoughts would be much appreciated.

您的想法将不胜感激。

回答by Mihai Stancu

$('#pgpost').submit(function(e) {  // this handles the submit event
    if($('#right-body-div').data('bValidator').validate()) {
        if ($("#honeypot").val() == "") {
            /*
             * url = $('#pgpost').val('action');
             * data = $('#pgpost').serialize();
             * $.post(url, data, function() {
             *     window.location = "http://www.homepage.co.uk/thankyou";
             * });
             */
            window.location = "http://www.homepage.co.uk/thankyou";
        }
        else {
            window.location = "http://www.homepage.co.uk/nothankyou";
        }
    }

    e.preventDefault();
    return false;
    /*
     * the 2 lines above are meant to prevent the normal behaviour
     * that the <form> would have (which is to submit via browser).
     * 
     * e.preventDefault() is the jquery way prevent the normal behaviour
     * return false is the legacy way to do it, you can use either or both
     * 
     * the reason for which the code didn't validate your form is
     * that e.prevenDefault() was only called inside the IF statement
     * which means that it would only be called if the field was
     * already in valid form. So basically if the form was invalid the normal
     * behaviour is not prevented and the browser submits the form, if the form
     * was valid the submit behaviour was prevented and the redirect was used.
     * 
     */
});

$("#submitme").click(function(){
    $('#pgpost').submit(); // this triggers the submit event
}); 

When handling the submit event via JavaScript you can:

通过 JavaScript 处理提交事件时,您可以:

  • prevent normal behaviour always (our case):
    • when form is valid you submit the datavia JavaScript and maybe you process it before submitting it;
    • when the form is invalid you show error messages;
  • prevent normal behaviour only when form is invalid:
    • when the form is valid you allow normal behaviour (browser submits data);
    • when the form is invalid you show error messages;
  • 始终防止正常行为(我们的案例):
    • 当表单有效时,您通过 JavaScript提交数据,并且可能在提交之前对其进行处理;
    • 当表单无效时,您会显示错误消息;
  • 在表单无效时防止正常行为:
    • 当表单有效时,您允许正常行为(浏览器提交数据);
    • 当表单无效时,您会显示错误消息;

Error messages in your case should state that honeypot is not supposed to be empty.

您的情况下的错误消息应该说明蜜罐不应该是空的。

It makes sense to prevent normal behaviour if: - you need to process the data before it is sent to the server (creating new values, changing present values; not validation); - you need to avoid a page refresh so you send via AJAX;

在以下情况下阻止正常行为是有意义的: - 您需要在将数据发送到服务器之前对其进行处理(创建新值、更改当前值;而不是验证);- 您需要避免页面刷新,以便通过 AJAX 发送;

Just for validation it doesn't make sense to prevent the behaviour, because you can validate then allow the normal behaviour to continue.

仅仅为了验证,阻止行为是没有意义的,因为您可以验证然后允许正常行为继续。