jquery submit form by clicking checkbox doesn't work

Question

When clicking a checkbox the form should be submitted, but that doesn't happen. A simple alert (as a test) does work. Where does it go wrong?

HTML

<form id="formId" name="formName" action="index.php" method="post">
<input name=entry>
<input type="checkbox" class="checkbox1">1
<input type="checkbox" class="checkbox2">2
<input type="checkbox" onclick="this.form.submit();">5
<input type="submit" name="submit" >
</form>

JS

<script type="text/javascript">

$(document).ready(
  function(){ 
    $(".checkbox1").click(
        function(){ 
            alert('checkbox 1 clicked'); 
        }
    )
    $(".checkbox2").click(
        function(){ 
            $('#formId').submit();
        }
    )
    }
);
</script>

I am a little puzzled how you got the alert to work either? The way the code is written neither should work. I will await updates before assuming my answer is correct (you may have just left out the rest of the code). — iCollect.it Ltd, Sep 05 '14 at 13:14
There is something very odd about this (still looking). My workaround (below) is to trigger the submit button instead when the checkbox is clicked. That submits just fine. — iCollect.it Ltd, Sep 05 '14 at 13:34

iCollect.it Ltd · Answer 1 · 2014-09-05T13:32:30.457

Ignoring the first issue below, I can see your form will not submit from any button press other than a submit button.

My workaround was to trigger a click event on your submit button instead of trying to submit the form with .submit():

e.g. http://jsfiddle.net/tkdxg66m/1/

$(".checkbox2").click(
    function(){ 
        $('#submitme').trigger('click');
    }
)

This is very odd behavior, as submit() should work, so I am looking into it further.

Older answer/issue below:

You have wrapped your code in a function that is never called:

You probably meant to use a DOM ready handler like this:

       $(function(){
            $(".checkbox1").click(
                function(){ 
                    alert('checkbox 1 clicked'); 
                }
            )
            $(".checkbox2").click(
                function(){ 
                    $('#formId').submit();
                }
            )
        });

note: $(function(){your code}); is a shortcut for $(document).ready(function(){your code});

or an IIFE (immediately invoked function expression) executing like this:

       (function(){ 
            $(".checkbox1").click(
                function(){ 
                    alert('checkbox 1 clicked'); 
                }
            )
            $(".checkbox2").click(
                function(){ 
                    $('#formId').submit();
                }
            )
        })();

The DOM ready option makes more sense in this context :)

score 1 · Answer 2 · edited Dec 28 '15 at 08:25

1

Just use the jQuery code below. It will work for submitting a form.

$(document).ready(function(e) {
    $(".checkbox2").click(
        function(){ 
           $("#formId").submit();
        }
    );
});

edited Dec 28 '15 at 08:25

Pang

9,564
146
81
122

answered Sep 05 '14 at 13:30

Gaurav Saini

21
3

Try his form HTML with your code in a JSFiddle... it does not submit.. Very odd indeed. – iCollect.it Ltd Sep 05 '14 at 13:33
What exactly is the difference ? I originally left the document.ready code out for simplifying reasons. I have updated my original post. The code above is complete. – user4011806 Sep 05 '14 at 15:14

score 0 · Answer 3 · answered Sep 05 '14 at 13:08

0

Change "Click" to "Change" - I agree "Click" should work, but it doesn't always for me =/

answered Sep 05 '14 at 13:08

Losbear

3,255
1
32
28

1

dang you are on it today! was about to say same thing! 2nd answer you beat me too, lol – SpYk3HH Sep 05 '14 at 13:08

score 0 · Answer 4 · edited May 23 '17 at 11:44

0

Waddayaknow, problem solved! The thing was: i named the submit-button "submit". That causes the problem. I found this in other stackoverflow-threads; (submit a form using checkbox) and: (Javascript form submit: Object doesn't support this property or method (IE7)). Anyway, thanks for contributing.

edited May 23 '17 at 11:44

Community

1
1

answered Sep 06 '14 at 15:49

user4011806

1
2

jquery submit form by clicking checkbox doesn't work

4 Answers4