javascript - 表单未获取更新的字段值

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 完成。

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() 函数中返回 false，以阻止正常的表单提交。