After clicking 'ok' in the alert box it should remain in the same page

Question

I have a two input boxes with name and email. Those names and emails are already stored in the database. One unique URL will be genereated for each user and email will be sent to the user along with URL. Once the user clicks the unique url it goes to new page and there they have enter the already registered name and email.If the name or email ,either of them is not correct we have an alert box mentionioning that "there is some error,enter the proper email or name". This is my expected output Now if I click the 'ok' in the alert box it should stay in the same page. But actual output is It's going to some valid page and it's displaying an json response in the page

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

I have tried history.go(-1),it's not working. So what is happening is when the user click on the email link it goes /id/id1/url/welcome page. If the entry is wrong it gives an alert and it's going to /id/id1/url/valid page. But I wanted to stay in the same page Any input please

score 0 · Accepted Answer · answered Feb 12 '20 at 17:08

Your form is still submitted when clicking the submit button. To prevent this behavior, try to use event.preventDefault, or return false when calling onclick

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

or

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

score 0 · Answer 2 · answered Feb 12 '20 at 17:34

This is happening because of the action attribute in the form tag:

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

When an action attribute is mentioned in the form tag, clicking on the submit button will cause the browser to redirect to the url mentioned in it.

you should remove this since in your code there is already a handler function for the submit button that does the same thing.

The method attribute is also not required here since you are making an ajax call and inside the handler function.

Lastly, please look at the answer above. It's also good to follow that practice. calling event.preventDefault() stops the event from bubbling up which is useful in alot of cases.

this post should give you more information about the same :

event bubbling in javascript

After clicking 'ok' in the alert box it should remain in the same page

2 Answers2