成功提交表单后重定向 [英] Redirection after successful form submit

问题描述

我有一个表单，应在按下提交"按钮后提交数据.在按要求标记了几个输入字段之后，在按提交"按钮后，在必填字段中没有输入内容时，该表单始终向我显示-到目前为止，很好.

I have a form which should submit data after pressing the submit button. After tagging a few input fields as required the form always shows me when there is no input in the required field after pressing the submit button - so far, so good.

我想认识到的是，如果提交成功，则可以重定向到另一个页面.如果某些必填字段为空，则表单应显示给我，而无需将我重定向到另一页.

What I would like to realize is that there is a redirection to another page if the submission was successful. If there are some empty required fields the form should show me, without redirecting me to another page.

现在我有以下代码:

提交按钮:

<div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" name="submityes" id="submityes" class="btn btn-danger">Submit</button>
      </div>
  </div>

我还有以下js函数来提交表单并将我重定向到另一个页面:

Also I have the following js function to submit the form and to redirect me to another page:

$('document').ready(function () {
"use strict";
$(function () {
    $('#submityes').click(function () {
        $.ajax({
            type: "POST",
           /*url: "process.php", //process to mail
            data: $('form.contact').serialize(),*/
            success: function (msg) {
                window.location.replace("/submit_resolved.php");
            },
            error: function () {
                alert("error");
            }
        });
    });
});

});

我现在遇到的问题是，无论所有必填字段是否完整，我都将始终重定向到"submit_resolved.php"页面.

The problem I have right now is that I will always be redirected to the "submit_resolved.php" page, whether all required fields are complete or not.

我该如何解决这个问题?我只想在所有必填字段都不为空的情况下进行重定向.

How can I solve this problem? I only want to be redirected when all required fields are not empty.

推荐答案

您应该绑定到submit事件，而不是click事件:

You should bind to the submit event, not click event:

已更新以匹配评论

$(function () {

    var submityesClicked;

    //catch the click to buttons
    $('#submityes').click(function () {
        submityesClicked = true;
    });
    $('#submitno').click(function () {
        submityesClicked = false;
    });

    $('#webform').submit(function (e) {
        e.preventDefault();//prevent the default action

        $.ajax({
            type: "POST",
            /*url: "process.php", //process to mail
             data: $('form.contact').serialize(),*/
            success: function (msg) {
                window.location.replace(submityesClicked ? "/submit_resolved_yes.php" : "/submit_resolved_no.php");
            },
            error: function () {
                alert("error");
            }
        });
    });
});

仅当表单有效时，才会触发submit事件.

The submit event is triggered only if the form is valid.

请注意，submit事件是由表单触发的，而click事件是由input元素触发的.

Note that the submit event is triggered by the form but the click event is triggered by the input element.

这篇关于成功提交表单后重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！