title: Performing a Javascript function on a django form before adding to database
body: <p>I have created a template in <code>Django</code> that makes a form based on a model. When the <code>form</code> is submitted currently the data that was previously in the password field of the form is placed into the <code>database</code> rather than the changed value that is included in the "id_Password" field once the <code>onclick</code> action is performed. What I want is the <code>JavaScript</code> to perform its <code>function</code>, then the form is submitted with the data that is on the field once the <code>function</code> has been performed. </p>
  
  <p>Can anyone provide any insight? </p>
  
  <pre><code>{% extends "base.html" %}
  {% load staticfiles %}
  
  {% block content %}
  
  &lt;h2&gt; To add an account to your wallet fill in the form below and click "Add account to wallet" &lt;/h2&gt;
  
  &lt;h3&gt;Load your encryption file&lt;/h3&gt;
  &lt;input type="file" id="input"&gt;
  &lt;form action="/yourwallet/addpassword/" method="post"&gt;{% csrf_token %}
  &lt;script type="text/javascript" src="https://cdn.rawgit.com/ricmoo/aes-js/e27b99df/index.js"&gt;&lt;/script&gt;
      &lt;ul&gt;
      {{form}}
      &lt;/ul&gt;
      &lt;input type="submit" name="submit" value="Add account to wallet" onclick="handleFiles()"&gt;
      &lt;input type="button" name="test" value="test" onclick="handleFiles()"&gt;
  
      &lt;script&gt;
  
          function handleFiles() {
              var file = document.getElementById('input').files[0];
              var reader = new FileReader();
              reader.readAsText(file);
              reader.onload = function(e) {
                  var key = reader.result;
                  var element = document.getElementById("id_Password")
                  var password = element.value;
                  var key_256 = aesjs.utils.utf8.toBytes(key)
                  var textBytes = aesjs.utils.utf8.toBytes(password);
                  var aesCtr = new aesjs.ModeOfOperation.ctr(key_256);
                  var encryptedBytes = aesCtr.encrypt(textBytes);
                  var encryptedHex = aesjs.utils.hex.fromBytes(encryptedBytes);
                  element.value = encryptedHex;   
              };
          }
  
      &lt;/script&gt;
  
  &lt;/form&gt;
  
  &lt;p&gt; Click &lt;a href="/yourwallet/"&gt; here &lt;/a&gt; to return to your wallet. &lt;/p&gt;
  &lt;/body&gt; 
  {% endblock %}
  </code></pre>