表单未获取更新的字段值

时间:2016-07-09 11:49:54

标签: javascript html forms

我尝试在发送之前使用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消息,如果一切正确,则会显示错误消息,如果散列密码正确,则会显示电子邮件)

2 个答案:

答案 0 :(得分:2)

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

您还需要return false功能中的encryptForm(),以阻止正常的表单提交。

答案 1 :(得分:0)

我可以看到,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();
  });

});