在警告框中单击“确定”后，它应保留在同一页面中

Question

我有两个带有姓名和电子邮件的输入框。 这些姓名和电子邮件已经存储在数据库中。 将为每个用户生成一个唯一的 URL，并且电子邮件将与 URL 一起发送给用户。 一旦用户点击唯一的 url，它就会转到新页面，在那里他们输入了已经注册的姓名和电子邮件。如果姓名或电子邮件，其中一个不正确，我们会有一个警告框提到“有一些错误，输入正确的电子邮件或姓名”。 这是我的预期输出现在，如果我单击警报框中的“确定”，它应该保持在同一页面中。 但实际输出是它将转到某个有效页面，并在页面中显示一个 json 响应

<form action="/{{ department_id }}/{{url}}/{{student_id}}/valid" method="POST">
        <div class="form-group">
            <label class="col-md-3 control-label">Enter your name</label>
            <div class="col-md-3">
                <input id="student-name" name="student-name" type="text"  class="form-control input-md"
                    required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">Enter your email</label>
            <div class="col-md-3">
                <input id="student-email" name="student-email" type="email" 
                    class="form-control input-md" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-4 control-label" for="save"></label>
            <div class="col-md-8">
                <input class="btn btn-success show-modal" type='submit' id='submit' value='Go for schedule'>
            </div>

        </div>
        </form>


        <script>
            $("#submit").click(function ()
            {

                var student_name = $("#student-name").val();
                var student_email = $("#student-email").val();

                var departmentId = "{{ result.department_id }}";
                var studentId = "{{ result.student_id }}"
                var url = "{{ result.url }}"               

                    $.ajax({
                        type: 'POST',
                        url: "/" + departmentId + "/" + url + "/" + studentId + "/valid",
                        data: {
                        'student-name': student_name,
                        'student-email': student_email                    

                    },
                    success:function(result)
                    {

                        if(result.error=="NameError")
                        {
                            alert("Name not found, please enter the same name that you used when applied for this role");
                            return false;
                            //history.go(-1);
                            //document.location.href="/"+result.return_data['student_id']+"/"+result.return_data['department_id']+"/"+result.return_data['url']+"/welcome";

                        }
                        if(result.error=="EmailError")
                        {
                            alert("Email not found, please enter the same email that you used when applied for this role");
                            return false;
                            //history.go(-1); 
                            document.location.href="/"+result.student_id+"/"+result.department_id+"/"+result.url+"/welcome";
                        }
                        else{
                            alert("Something is wrong, try reloading the page or contact admin"); 
                            return false;
                            //history.go(-1);
                            document.location.href="/"+result.student_id+"/"+result.department_id+"/"+result.url+"/welcome";

                        }
                    }    
                })
            })
        </script>

我试过 history.go(-1)，它不起作用。 所以发生的事情是当用户点击电子邮件链接时，它会转到 /id/id1/url/welcome 页面。 如果输入错误，它会发出警报，并转到 /id/id1/url/valid 页面。 但我想留在同一页面任何输入请

Answer 1

单击提交按钮时，您的表单仍会被提交。 为了防止这种行为，请尝试使用event.preventDefault ，或者在调用 onclick 时返回 false

$("#submit").click(function (event)
{
    event.preventDefault();
    ...
}

或者

$("#submit").click(function ()
{
    ...
    return false;
}

Answer 2

发生这种情况是因为表单标签中的 action 属性：

<form action="/{{ department_id }}/{{url}}/{{student_id}}/valid" method="POST">

当表单标签中提到了 action 属性时，点击提交按钮将导致浏览器重定向到其中提到的 url。

您应该删除它，因为在您的代码中已经有一个用于执行相同操作的提交按钮的处理函数。

此处也不需要method属性，因为您正在进行 ajax 调用并在处理程序函数内部。

最后，请看上面的答案。 遵循这种做法也很好。 调用 event.preventDefault() 阻止事件冒泡，这在很多情况下很有用。

这篇文章应该给你更多关于相同的信息：

javascript中的事件冒泡