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?

score 126 · Answer 1 · edited Aug 12 '20 at 09:43

126

Use JavaScript by adding an onChange attribute to your input tags

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

edited Aug 12 '20 at 09:43

Ed Lucas

5,955
4
30
42

answered May 15 '12 at 14:06

Sliq

15,937
27
110
143

Wow , As that simple !! – mercury Apr 05 '17 at 00:52
2

How to add javascript confirm for that ? – mercury Apr 05 '17 at 01:01
Uncaught TypeError: `Cannot read property 'submit' of undefined at HTMLFormElement.onchange` – Nahid Jun 08 '19 at 03:06
@Nahid your input elements need to be inside of a form tag – Matthew Lock Nov 01 '22 at 04:11

Surreal Dreams · Answer 2 · 2012-05-15T14:42:06.727

28

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.

edited May 15 '12 at 14:42

answered May 15 '12 at 14:08

Surreal Dreams

26,055
3
46
61

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? – user1394849 May 15 '12 at 14:13
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? – Surreal Dreams May 15 '12 at 14:16
no errors at all, I've tried both of the suggestions you've given me. – user1394849 May 15 '12 at 14:30
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? – user1394849 May 15 '12 at 14:31
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. – Surreal Dreams May 15 '12 at 14:41
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... – user1394849 May 15 '12 at 14:55
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. – goat May 15 '12 at 15:07

score 7 · Answer 3 · edited May 01 '19 at 15:23

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

Thank you! I had the problem that when I unchecked the checkbox and submitted the form the argument of the checkbox was not submitted at all. It was submitted only if the checkbox was true. I sorted out creating another input. Find my solution [below in this post](https://stackoverflow.com/a/73029668/13795525) — Pietro, Jul 18 '22 at 23:43

Gorving · Answer 4 · 2012-05-15T19:44:25.627

$(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.

score 2 · Answer 5 · answered Jan 21 '21 at 14:54

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>

score 1 · Answer 6 · answered Jul 18 '22 at 23:39

If you need to submit a form when a checkbox is checked or when it is unchecked like when you are using a switch, a good way is to create an hidden input. If you try to submit the checkbox argument if the checkbox is unchecked the form will not be submitted at all. Find below my solution.

function submitPump(){
    if((document.getElementById('ckPump').checked === null)||(document.getElementById('ckPump').checked === undefined)){
        document.getElementById('pumpState').value = 'off';
        console.log('off');
        document.getElementById('pumpForm').submit();
    }
    if(document.getElementById('ckPump').checked){
        document.getElementById('pumpState').value = 'on';
        console.log('on');
        document.getElementById('pumpForm').submit();
    }else{
        document.getElementById('pumpState').value = 'off';
        console.log('off');
        document.getElementById('pumpForm').submit();
    }
}

.switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
          }
          
          .switch input {display:none;}
          
          .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
          }
          
          .slider:before {
            position: absolute;
            content: '';
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
          }
          
          input:checked + .slider {
            background-color: darkgreen;
          }
          
          input:focus + .slider {
            box-shadow: 0 0 1px darkgreen;
          }
          
          input:checked + .slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
          }

<form action='/' method='post' id='pumpForm'>
  <div style='text-align: center;'>
       <label class='switch'>
          <input type='checkbox' id='ckPump' checked onclick='submitPump()'>
          <div class='slider'></div>
        </label>
  </div>
  <input hidden id='pumpState' name='pumpState'> 
</form>

score 1 · Answer 7 · answered Feb 25 '23 at 06:25

1

To make the checkbox auto-submit, you have to use JavaScript by adding an onChange attribute to your input tag

<input type ="checkbox" name="cBox[]" value = "3" onChange="this.form.submit()">3</input>
.....

answered Feb 25 '23 at 06:25

Ayooluwa Oladele

11
2

score 0 · Answer 8 · answered Nov 27 '20 at 04:39

Submit form when your checkbox is checked

$(document).ready(function () {   
$("#yoursubmitbuttonid").click(function(){           
                if( $(".yourcheckboxclass").is(":checked") )
                {
                    $("#yourformId").submit();

                }else{
                    alert("Please select !!!");
                    return false;
                }
                return false;
            }); 
});

submitting a form when a checkbox is checked

8 Answers8

Linked

Related