Submit button not being sent with request when submitting via 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();
});

So I'm trying to do some validation in my JavaScript before I submit my form to PHP. If the user tries to submit the form, I check the inputs to see if they're blank and if any of them are then I don't submit the form. That functionality works fine, but when the form submits, the <input type='submit' name='signup' /> doesn't show up in _POST. All the other inputs do. It was working fine before I implemented the event listener.

This is what $_POST looks like after successfully submitting:

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

Have I done something incorrectly? It definitely works fine if I remove the event listener, but I don't understand why that if preventing the submit button from being included in the request...

EDIT: I found the solution thanks to a link Andre posted. I posted my own answer, but I can't accept it yet.

there is no `value` to `submit` which might be why! Try with `` etc — Professor Abronsius, Dec 09 '16 at 17:28
I did try adding a value, it didn't make a difference. In fact, when I remove the event listener and submit the form like normal, PHP assigns a default value of "Submit" to submit elements it seems. I've been using `if (isset($_POST['signup']))` to check for form submission and that's been working fine without an explicit value! — Eric David Sartor, Dec 09 '16 at 17:43

score 2 · Answer 1 · edited May 23 '17 at 12:30

I think the easier way it's using: onsubmit='return validaForm(this)'

so...

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

and

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

References:

javascript: validate form before submit?

HTML/Javascript: Simple form validation on submit

get all the elements of a particular form

The second link there provided a solution. I was calling `event.preventDefault()` immediately, then attempting to re-submit the form after validation. The correct way of doing this was to only call `event.preventDefault()` if I actually detected a problem. That's fixed it! Thanks for the references. I guess I didn't find a solution when googling because I was convinced the event listener was the problem, not the code itself... — Eric David Sartor, Dec 09 '16 at 17:50

score 1 · Accepted Answer · answered Dec 09 '16 at 17:54

The problem was that I was calling event.preventDefault() at the wrong time. I've changed my JavaScript to this:

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

I only prevent the default submission if I actually find an issue. Previously, I was preventing the initial submission every time, and then attempting to re-submit once I validated everything. Something about this caused the signup variable not to get passed into the request. Props to Andre Rodrigues for posting a link to another question that mentioned this!

score 0 · Answer 3 · answered Dec 09 '16 at 17:36

0

Not sure if it it helps, but you at least need to pass the event argument to the callback like this, or else you can't access it :

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

answered Dec 09 '16 at 17:36

axm__

2,463
1
18
34

That's not true in my experience. If you trigger an event without passing the event in, and then do a `console.log(event)`, it is still available. I don't know the behind the scenes reason, but it seems that `event` is one of those values that's always available in an event, similar to how `this` is always made available. – Eric David Sartor Dec 09 '16 at 17:46
1

I just found out that firefox blocks the global event (you're using the global event), which is the reason why i always get undefined. (see: http://stackoverflow.com/questions/37367752/event-global-object-in-firefox) Anyway, glad you found a solution. – axm__ Dec 09 '16 at 18:15
Well there's the issue, I only ever use Chrome...lesson learned, always pass the event in! – Eric David Sartor Dec 09 '16 at 19:27

Submit button not being sent with request when submitting via JavaScript

3 Answers3