Form not picking up updated field value

Question

I am trying to encrypt a form using a PGP Javascript API before sending it. The PGP part works, but the form does not send the js-modified value of the form's fields.

Here is the Javascript :

<script>
        function encryptForm() {
            var password = document.getElementById("form_password");
            var email = document.getElementById("form_email");

            email.setAttribute("type", "hidden");
            password.setAttribute("maxlength", "2000");
            password.setAttribute("type", "hidden");

            var form = document.forms[index];
            var password = form.elements["password"];
            var email = form.elements["password"];

            encrypt(email.value).then(function(encrypted_msg) {
                    email.value = encrypted_msg;
            });
            encrypt(password.value).then(function(encrypted_msg) {
                    password.value = encrypted_msg;
            });

            form.submit();

            return true;
        }

        function encrypt(msg) {
            if (msg.indexOf("-----BEGIN PGP MESSAGE-----") !== -1 && msg.indexOf("-----END PGP MESSAGE-----") !== -1) {
                return msg;
            } else {
                var key = `<?php printf($eassec->getPubkey('server')); ?>`;
                var publicKey = openpgp.key.readArmored(key).keys[0];
                return openpgp.encryptMessage(publicKey, msg).then(function(pgpMessage) {
                    return pgpMessage;
                });
            }
        } 
        </script>

And the form element :

<form onSubmit="return encryptForm()" class="EASboxForm" method="post">
                                <input id="form_email" name="email" type="email" placeholder="email adress" required autofocus>
                                <input id="form_password" name="password" type="password" placeholder="password" maxlength="72" required>
                                <input name="action" type="hidden" value="connect">
                                    <input type="image" class="EASboxFormSend" src="resources/pics/icons/form_continue.svg" alt="Continue">
                            </form>

(You can test it live at [REDACTED] - the PHP part will show an error message if the sent data ain't a valid PGP message, if everything is correct the hashed password and the email will show up)

Answer 1

Since encrypt() is an asynchronous function, you have to wait for it to complete before submitting the form. You can use Promise.all() to wait for multiple promises to complete.

Promise.all([encrypt(email.value).then(function(encrypted_msg) {
    email.value = encrypted_msg;
  }),
  encrypt(password.value).then(function(encrypted_msg) {
    password.value = encrypted_msg;
  })
]).then(function() {
  form.submit();
});

You also need to return false from the encryptForm() function, to prevent the normal form submission.

Answer 2

What I can see is, function encrypt is an asynchronous function as per your implementation. But the execution flow of the javascript is top to bottom. when the code reaches the submit, the values may not be ready. Hence you may need to slightly change the flow of the program as shown below.

encrypt(email.value).then(function(encrypted_msg) {
  email.value = encrypted_msg;

  encrypt(password.value).then(function(encrypted_msg) {
    password.value = encrypted_msg;

    form.submit();
  });

});