title: Append element before submit form
body: <p>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. </p>
  
  <p>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.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jsSHA/2.0.2/sha.js"&gt;&lt;/script&gt;
   &lt;form id = "form" name="form" method="post" action="verify.php" class="login"&gt;
     Username: &lt;input type="text" name="username" style = "width: 350px"&gt;&lt;br&gt;
     Password: &lt;input type="password" name="pwd" id="pwd" style="width: 350px; margin-left: 3px;"&gt;&lt;br&gt;
     Remember Me: &lt;input type="checkbox" name="rememberme" value="1"&gt;&lt;br&gt;
     &lt;input type="submit" name="submit" value="Login!" class="loginbutton" onclick="submitForm();"&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>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()
  }
  </code></pre>
  
  <p><strong>Sent params:</strong></p>
  
  <pre><code>username: user
  pwd: ""
  rememberme: "1"
  submit: "Login!"
  </code></pre>
  
  <p>How can I <code>password: *some value*</code> to these sent parameters? What am I doing wrong?</p>