Unable to reload the same page after clicking submit button

Question

I'm making a login page where if the email address already exists i want to stay on the same page and prompt the user that the email address already exists. Here is the function which is the onClick function that will be called when the button is clicked

function login() {

    var username = document.getElementById("username").value;
    var pword = document.getElementById("pword").value;
    var confpwd = document.getElementById("confpwd").value;
    var email = document.getElementById("email").value;
    var fname = document.getElementById("fname").value;
    var lname = document.getElementById("lname").value;
    var gender = document.getElementById("gender").value;
    var t = 1;

    if (t.toString() !== '0') {
        var er = "Email-id already exists";
        event.preventDefault();
        document.getElementById("nemail").value = er;
        document.getElementById("username").value = username;
        document.getElementById("pword").value = "";
        document.getElementById("confpwd").value = "";
        document.getElementById("fname").value = fname;
        document.getElementById("lname").value = lname;
        document.getElementById("gender").value = gender;
    }

}

Please clarify what your actual question is. – Tyler Roper Mar 02 '17 at 17:11 — Tyler Roper, Mar 02 '17 at 17:11

score 2 · Answer 1 · edited May 23 '17 at 12:00

2

You must pass a function to the <form onsubmit="return login()">. The login function must return true if you want to submit and false otherwise. See this answer for more details: JavaScript code to stop form submission

Working codepen to illustrate: http://codepen.io/DeividasK/pen/YZqwLO

edited May 23 '17 at 12:00

Community

1
1

answered Mar 02 '17 at 17:12

Deividas

6,437
2
26
27

1

When not specified, the `event` parameter is actually assumed by most browsers. **EDIT:** Correction, it's IE and Chrome. Firefox does not seem to abide. (See [here](https://jsfiddle.net/tr_santi/0dbwLehc/) for a demo.) – Tyler Roper Mar 02 '17 at 17:14
Nice, I did not know that. Thanks! – Deividas Mar 02 '17 at 17:15
When i'm doing that i'm getting this error Uncaught TypeError: Cannot read property 'preventDefault' of undefined at XMLHttpRequest.get1.onreadystatechange – aeshna Mar 02 '17 at 17:15
@Santi..I use chrome but still getting this problem – aeshna Mar 02 '17 at 17:17
@aeshna It means you are not passing the event in the onClick function. Your html should look likes this `onSubmit="login(this)"`. – Deividas Mar 02 '17 at 17:17
@DeividasKaržinauskas i'm passing it for the button i.e. onclick="login(this)"; as i have two more buttons for different functions – aeshna Mar 02 '17 at 17:21
@DeividasKaržinauskas but along with loading the same page i want to set some value in the input field as i have done in my code.If i do this then i wont be able to set value and prompt the client that the email id already exists – aeshna Mar 02 '17 at 17:35
@aeshna you can update the value in the `login()` function before returning false. The page is not reloaded so the value will be updated. – Deividas Mar 02 '17 at 17:36
But i have to use 3 buttons.One to registor the user and 2 for other functions.And for registor button i'm writing this function – aeshna Mar 02 '17 at 17:40
@aeshna since form can have only one action when it's submitted, writing it on the `form` tag works as expected. You can do this with `onclick` as well. See this pen with all examples: http://codepen.io/DeividasK/pen/YZqwLO – Deividas Mar 02 '17 at 17:44
This is my button I tried return false or event.preventDefault().Nothing seems to work.Even when i'm using just onclick="login();",It does not work – aeshna Mar 02 '17 at 17:52
var url="#"; window.location.href =url; window.location.replace(url); This is working – aeshna Mar 02 '17 at 18:17
@aeshna please create a codepen / plunker / jsfiddle so I can inspect it. – Deividas Mar 02 '17 at 18:18
event.preventDefault() is working when i'm putting it just after the if statement. – aeshna Mar 03 '17 at 15:58

score 1 · Answer 2 · answered Mar 02 '17 at 17:17

Depending on how your code is setup to submit. You may just need to insert a return when the code realizes the email address is a duplicate. Something along this path might help prevent the page from moving forward.

if (ListOfExistingEmails.indexof(email) > 0 ) return false;

Unable to reload the same page after clicking submit button

2 Answers2