通过 JavaScript 提交时，提交按钮未随请求一起发送

Question

HTML

<form method='POST' id='signup_form'>
    <label for='email'>E-mail:</label><br />
    <input type='email' name='email' /><br /><br />
    <label for='username'>Username:</label><br />
    <input type='text' name='username' /><br /><br />
    <label for='password'>Password:</label><br />
    <input type='password' name='password' /><br /><br />
    <label for='confirmpassword'>Confirm Password:</label><br />
    <input type='password' name='confirmpassword' /><br /><br />
    <input type='submit' name='signup' />
</form>

JavaScript

const signup_form = document.getElementById('signup_form');

signup_form.addEventListener('submit', function() {
    event.preventDefault();

    let missing_input = false;

    for (let i = 0; i < this.children.length; i++) {
        if (this.children[i].type !== undefined && this.children[i].type !== 'submit')
            if (this.children[i].value === '') {
                missing_input = true;
                break;
            }
    }

    if (!missing_input)
        this.submit();
});

因此，在将表单提交给 PHP 之前，我尝试在我的 JavaScript 中进行一些验证。如果用户尝试提交表单，我会检查输入以查看它们是否为空白，如果其中任何一个为空白，则我不提交表单。该功能运行良好，但是当表单提交时，<input type='submit' name='signup' /> 不会出现在_POST 中。所有其他输入都可以。在我实现事件监听器之前它工作正常。

这是$_POST提交成功后的样子：

Array ( [email] => eric@live.ca [username] => ericsartor [password] => asdasdasd [confirmpassword] => asdasdasd)

我做错了什么吗？如果我删除事件侦听器肯定可以正常工作，但我不明白为什么如果阻止提交按钮包含在请求中...

编辑：感谢 Andre 发布的链接，我找到了解决方案。我发布了自己的答案，但我还不能接受。

Answer 1

我认为它的使用方式更简单：onsubmit='return validaForm(this)'

所以...

<form method='POST' id='signup_form' onsubmit='return validaForm(this)'>
    <label for='email'>E-mail:</label><br />
    <input type='email' name='email' /><br /><br />
    <label for='username'>Username:</label><br />
    <input type='text' name='username' /><br /><br />
    <label for='password'>Password:</label><br />
    <input type='password' name='password' /><br /><br />
    <label for='confirmpassword'>Confirm Password:</label><br />
    <input type='password' name='confirmpassword' /><br /><br />
    <input type='submit' name='signup' />
</form>

和

    <script>

    var validaForm = function(signup_form) {

        event.preventDefault();

        let missing_input = false;

        for (let i = 0; i < signup_form.children.length; i++) {
            if (signup_form.children[i].type !== undefined && signup_form.children[i].type !== 'submit')
                if (signup_form.children[i].value === '') {
                    missing_input = true;
                    break;
                }
        }

        if (!missing_input) {
            signup_form.submit();
        } else {
            alert('field empty');
        }

    }

    </script>

参考资料：

javascript: validate form before submit?

HTML/Javascript: Simple form validation on submit

get all the elements of a particular form

Answer 2

问题是我在错误的时间打电话给event.preventDefault()。我已将我的 JavaScript 更改为：

const signup_form = document.getElementById('signup_form');

signup_form.addEventListener('submit', function() {
    let missing_input = false;

    for (let i = 0; i < this.children.length; i++) {
        if (this.children[i].type !== undefined && this.children[i].type !== 'submit')
            if (this.children[i].value === '') {
                missing_input = true;
                break;
            }
    }

    if (missing_input)
        event.preventDefault();
});

如果我真的发现问题，我只会阻止默认提交。以前，我每次都阻止初始提交，然后在验证所有内容后尝试重新提交。这导致signup 变量没有被传递到请求中。支持 Andre Rodrigues 发布指向另一个提到这一点的问题的链接！

Answer 3

不确定它是否有帮助，但您至少需要像这样将 event 参数传递给回调，否则您将无法访问它：

signup_form.addEventListener('submit', function(event) {//content})