Post variables not set when submitting a form with JS

Question

I have a form I submit with javascript as soon as the user clicks a label. There is a weird behavior where the datas are not posted. But if I submit the form with a delay (even with a delay of 0) it works.

Here is the html:

<form action="/other-page" method="post">
    <input id="val-1" type="checkbox" name="filter[]" value="1">
    <label for="val-1">Value 1</label>

    <input id="val-2" type="checkbox" name="filter[]" value="2">
    <label for="val-2">Value 2</label>
</form>

The script:

<script>
    $('label').click(function() {
        var form = $(this).closest('form')

        // if I use the following line the values won't be set
        form.submit()

        // If I use a `setTimeout` it works, even with a delay of 0
        setTimeout(function() {
             form.submit()
        }, 0)
    })
</script>

It's not a big issue as I can make this work with the setTimeout but writing this with a delay of 0 is really ugly. I thought about a browser bug but I tested with Chrome and Firefox and I have the same result.

Any idea about what is happening?

I assume the `click` event is triggered before the values have a actually been changed. — Felix Kling, May 03 '13 at 13:33
You're setting the `action` attribute twice, incorrectly the second time. You should be setting the `method` attribute with `POST`. — Vimal Stan, May 03 '13 at 13:49
I know your javascript is running without, but still consider using the semicolon `;` for better compatibility and to be able to minify your javascript later. — Ron van der Heijden, May 03 '13 at 13:52
@Bondye I use uglifyjs to minify so there is no issue with the lack of semicolon — romainberger, May 03 '13 at 13:57
Still, you will face problems when not using the semicolon for `break/continue/throw`, and there are more cases when you NEED the semicolon.. `var fn = function () {}(function () {})()` And never trust a compressor EVER! even uglifyjs — Ron van der Heijden, May 03 '13 at 14:06
@Bondye The fact that I don't use semicolons here doesn't mean I *never* use semicolons. But that's not the subject of the question and, with no intention to be rude, I am not willing to start an argument about that in the comments :) — romainberger, May 03 '13 at 14:20
Thats why I commented this and told you to consider. But I guess you are the only one working on this project with the knowledge of the javascript compilers for every browser.... — Ron van der Heijden, May 03 '13 at 14:26

score 3 · Accepted Answer · edited May 23 '17 at 11:49

This is because you're listening on the label click. Try listening for checkbox click.

$('input[type=checkbox]').click(function() {
    $(this).closest('form').submit();
});

Clicking on a label means the browser will "click" the associated element. And since you're submitting the form on label click, it won't give the browser the chance to do this.

Why setTimeout with 0 does work, is because this is a trick to post the execution untill the browser is done with its current actions. You can find more info on this at Why is setTimeout(fn, 0) sometimes useful?

score 0 · Answer 2 · answered May 03 '13 at 13:39

0

Somebody (I can't remember his username) posted the solution, but got downvoted so he removed his answer. But his solution was right so here it is:

All I need to do is use the click event on the input instead of the label

$('input[type=checkbox]').click(function() {
        $(this).closest('form').submit()
})

answered May 03 '13 at 13:39

romainberger

4,563
2
35
51

Yeah, I deleted my answer untill I added an explanation – sroes May 03 '13 at 13:41
1

hard to believe this change solves the problem, isn't it more likely that you put it in a domready handler? – metadings May 03 '13 at 13:43

Post variables not set when submitting a form with JS

2 Answers2