表单未获取更新的字段值

Question

我正在尝试在发送之前使用PGP Javascript API加密表单。 PGP部分有效，但表单不会发送表单字段的js修改值。

这是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>

和表单元素：

<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>

（您可以在[删除]中对其进行实时测试-如果发送的数据不是有效的PGP消息，则PHP部分将显示一条错误消息，如果一切正确，则散列密码会显示该电子邮件）

Answer 1

由于encrypt()是异步函数，因此您必须等待它完成才能提交表单。 您可以使用Promise.all()等待多个诺言完成。

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();
});

您还需要从encryptForm()函数return false ，以防止常规表单提交。

Answer 2

我可以看到，根据您的实现， function encrypt是一个异步函数。 但是javascript的执行流程是自上而下的。 当代码到达提交时，这些值可能尚未准备好。 因此，您可能需要稍微更改程序流程，如下所示。

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

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

    form.submit();
  });

});