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] => [email protected] [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 <input type='submit' name='signup' value='Submit' /> etc — Professor Abronsius
– Professor Abronsius, Commented Dec 9, 2016 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
– Eric David Sartor, Commented Dec 9, 2016 at 17:43

Community · Accepted Answer · 2017-05-23 12:30:51Z

2

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

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Dec 9, 2016 at 17:39

Andre Rodrigues

3623 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eric David Sartor Over a year ago

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 · Accepted Answer · 2016-12-09 17:54:06Z

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!

axm__ · Accepted Answer · 2016-12-09 17:36:29Z

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 9, 2016 at 17:36

axm__

2,7032 gold badges23 silver badges37 bronze badges

3 Comments

Eric David Sartor Over a year ago

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.

axm__ Over a year ago

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: stackoverflow.com/questions/37367752/…) Anyway, glad you found a solution.

Eric David Sartor Over a year ago

Well there's the issue, I only ever use Chrome...lesson learned, always pass the event in!

Collectives™ on Stack Overflow

Submit button not being sent with request when submitting via JavaScript

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related