When I submit the form with Enter, it works without any problems. I can successfully log in. When I submit the form with a button, it logs in successfully on Firefox, but not on Chrome. The problem is, it repeats the function twice and sends a different hashed password. How can I make it to work on Chrome too?

Button:

<div id="submit" name="submit" value="login" class="ui fluid large pink submit button" onclick="submitForm();">Login</div>

Form:

<form id="form" autoplete="off" class="ui large form" id = "form" name="form" method="post" action="php/verify.php" onsubmit="submitForm();">

I added onsubmit="submitForm();" to form, to call the function even when I submit the form with Enter.

Javascript function:

function submitForm(){
    var form = document.getElementById("form");
    var pwd = document.getElementById('pwd');
    var hash = new jsSHA("SHA-256", "TEXT", {numRounds: 1});
    hash.update(pwd.value);
    var hash = hash.getHash("HEX");
    var password = document.createElement("input");
    password.name="password";
    password.type="hidden";
    password.id = "password";
    password.value = hash;
    alert(password.value);
    form.appendChild(password);
    form.submit();
    pwd.value = "";
}

When I submit the form with Enter, it works without any problems. I can successfully log in. When I submit the form with a button, it logs in successfully on Firefox, but not on Chrome. The problem is, it repeats the function twice and sends a different hashed password. How can I make it to work on Chrome too?

Button:

<div id="submit" name="submit" value="login" class="ui fluid large pink submit button" onclick="submitForm();">Login</div>

Form:

<form id="form" autoplete="off" class="ui large form" id = "form" name="form" method="post" action="php/verify.php" onsubmit="submitForm();">

I added onsubmit="submitForm();" to form, to call the function even when I submit the form with Enter.

Javascript function:

function submitForm(){
    var form = document.getElementById("form");
    var pwd = document.getElementById('pwd');
    var hash = new jsSHA("SHA-256", "TEXT", {numRounds: 1});
    hash.update(pwd.value);
    var hash = hash.getHash("HEX");
    var password = document.createElement("input");
    password.name="password";
    password.type="hidden";
    password.id = "password";
    password.value = hash;
    alert(password.value);
    form.appendChild(password);
    form.submit();
    pwd.value = "";
}

• javascript
• html
• forms

5 Answers 5

In your onsubmit handler, you're submitting the form:

 form.submit();

If you do that, the handler has to return false, which means you need

<form ... onsubmit="submitForm(); return false;">

Otherwise you will submit the form manually, then the browser will submit it a second time, since onsubmit didn't return false;

You have two submits:

onsubmit="submitForm();" and onclick="submitForm();"

remove one of them

I can see two possible causes:

1- You have two handlers installed: onSubmit and onClick. Instead, leave the onSubmit handler and use a button with submit type:

<form onsubmit="submitForm()">
  <input type="submit"> <!-- this is equivalent to pressing enter -->
  <button type="submit"></button> <!-- also equivalent -->
</form>

2- If you're going to manually submit the form in the event handler, you should stop the default behavior from taking place, which could account for the 2nd (unprocessed) submit:

function submitForm(event) {
  event.preventDefault()
}

Remove onsubmit="submitForm(); from the <form> tag and create the <input type="submit" onclick="submitForm();> inside the <form> tag.

You can use an input control (type=submit) instead of a div for the login button.
That is something like this:

<input type="submit" value="Login" class="ui fluid large pink submit button"/>

So the onsubmit call will be enough.