Append element before submit form

Question

I want to hash my password on client side before submitting (I have my own reasons, I know what I'm doing) to the server. I am using jsSHA (it works, I alerted output) to hash the password.

I create a new element, assign the hashed password to it's value and append it to the form. But the form still doesn't submit it.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsSHA/2.0.2/sha.js"></script>
 <form id = "form" name="form" method="post" action="verify.php" class="login">
   Username: <input type="text" name="username" style = "width: 350px"><br>
   Password: <input type="password" name="pwd" id="pwd" style="width: 350px; margin-left: 3px;"><br>
   Remember Me: <input type="checkbox" name="rememberme" value="1"><br>
   <input type="submit" name="submit" value="Login!" class="loginbutton" onclick="submitForm();">
 </form>

JS

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("password");
    password.name="password";
    password.type="hidden";
    password.id = "password";
    password.value = hash;
    form.appendChild(password);
    pwd.value = "";
    form.submit()
}

Sent params:

username: user
pwd: ""
rememberme: "1"
submit: "Login!"

How can I password: *some value* to these sent parameters? What am I doing wrong?

Answer 1

You are creating a password element instead of an input element with type="password" . Browsers only send data from form elements they know (input, button, textarea etc.) Furthermore you are setting properties on the element, but setting attributes is probably safer in terms of compatibility.