submitting a form when a checkbox is checked

Question

is there are way to submit a form when a checkbox is checked?

<form id="formName" action="<?php echo $_SERVER['PHP_SELF'];?>" method="get">
    <input type ="checkbox" name="cBox[]" value = "3">3</input>
    <input type ="checkbox" name="cBox[]" value = "4">4</input>
    <input type ="checkbox" name="cBox[]" value = "5">5</input>
    <input type="submit" name="submit" value="Search" />
</form>

<?php
    if(isset($_GET['submit'])){
        include 'displayResults.php';
    }
?>

That is what I have currently, but I would like to submit the form without a submit button, when the user checks or unchecks a checkbox. Any help?

Solution 1

Use JavaScript by adding an onChange attribute to your input tags

<input onChange="this.form.submit()" ... />

Solution 2

Yes, this is possible.

<form id="formName" action="<?php echo $_SERVER['PHP_SELF'];?>" method="get">
    <input type ="checkbox" name="cBox[]" value = "3" onchange="document.getElementById('formName').submit()">3</input>
    <input type ="checkbox" name="cBox[]" value = "4" onchange="document.getElementById('formName').submit()">4</input>
    <input type ="checkbox" name="cBox[]" value = "5" onchange="document.getElementById('formName').submit()">5</input>
    <input type="submit" name="submit" value="Search" />
</form>

By adding onchange="document.getElementById('formName').submit()" to each checkbox, you'll submit any time a checkbox is changed.

If you're OK with jQuery, it's even easier (and unobtrusive):

$(document).ready(function(){
    $("#formname").on("change", "input:checkbox", function(){
        $("#formname").submit();
    });
});

For any number of checkboxes in your form, when the "change" event happens, the form is submitted. This will even work if you dynamically create more checkboxes thanks to the .on() method.

Solution 3

I've been messing around with this for about four hours and decided to share this with you.

You can submit a form by clicking a checkbox but the weird thing is that when checking for the submission in php, you would expect the form to be set when you either check or uncheck the checkbox. But this is not true. The form only gets set when you actually check the checkbox, if you uncheck it it won't be set. the word checked at the end of a checkbox input type will cause the checkbox to display checked, so if your field is checked it will have to reflect that like in the example below. When it gets unchecked the php updates the field state which will cause the word checked the disappear.

You HTML should look like this:

<form method='post' action='#'>
<input type='checkbox' name='checkbox' onChange='submit();'
<?php if($page->checkbox_state == 1) { echo 'checked' }; ?>>
</form>

and the php:

if(isset($_POST['checkbox'])) {
   // the checkbox has just been checked 
   // save the new state of the checkbox somewhere
   $page->checkbox_state == 1;
} else {
   // the checkbox has just been unchecked
   // if you have another form ont the page which uses than you should
   // make sure that is not the one thats causing the page to handle in input
   // otherwise the submission of the other form will uncheck your checkbox
   // so this this line is optional:
      if(!isset($_POST['submit'])) {
          $page->checkbox_state == 0;
      }
}

Solution 4

$(document).ready(
    function()
    {
        $("input:checkbox").change(
            function()
            {
                if( $(this).is(":checked") )
                {
                    $("#formName").submit();
                }
            }
        )
    }
);

Though it would probably be better to add classes to each of the checkboxes and do

$(".checkbox_class").change();

so that you can choose which checkboxes submit the form instead of all of them doing it.

Solution 5

You can submit form by just clicking on checkbox by simple method in JavaScript. Inside form tag or Input attribute add following attribute:

    onchange="this.form.submit()"

Example:

<form>
      <div>
           <input type="checkbox">
      </div>
</form>

View more solutions

Comments

[user1394849]

I have implemented this code, however when I check the checkbox the search results do not display. Do I need to alter the php code?

[Surreal Dreams]

It has nothing to do with the PHP - check your JavaScript console to make sure there are no errors. Does it work if you click submit?

[user1394849]

no errors at all, I've tried both of the suggestions you've given me.

[user1394849]

sorry pressed 'add' before I was done. surely it is to do with the php? if(isset($_GET['submit'])) doesn't work if I alter the 'name' of the submit button, any help?

[Surreal Dreams]

On second look, that PHP is fine - it's looking for $_GET['submit'] to have a value, and it should. Do you have the jQuery library included? The second suggestion won't work without it. I expanded the jQuery to include the full block - I realized I don't know how familiar you are with jQuery.

[user1394849]

Yeah I have the jQuery libary included, and it still doesn't work. But it still works when I press the submit button. I don't understand what I'm doing wrong...

[goat]

browsers dont often send the value of submit buttons. You should never test for it server side. instead, test for the actual field value you need, like the checkbox in this case.

[mercury]

Wow , As that simple !!

[mercury]

How to add javascript confirm for that ?

[Nahid]

Uncaught TypeError: Cannot read property 'submit' of undefined at HTMLFormElement.onchange

[samjco]

Hmmm, So what is the $page variable?