Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to submit 0 if checkbox is unchecked and submit 1 if checkbox is checked in HTML

How to submit value 1 if a checkbox in a checkbox array is checked, and submit 0 if it's unchecked? I tried this but no luck. I am trying to grab this array in a php array when the form is submitted. Please help!

<input id = 'testName0' type = 'checkbox' name = 'check[0]' value = '1' checked> <input id='testNameHidden0'  type='hidden' value='0' name='check[0]'>  <input id = 'testName1' type = 'checkbox' name='check[1]' value = '1' unchekced> <input id='testNameHidden1'  type='hidden' value='0' name='check[1]'>  <input type = 'submit' value = 'Save Changes'> > <script> if(document.getElementById('testName0').checked){   document.getElementById('testNameHidden0').disabled = true; } </script>  <script> if(document.getElementById('testName1').checked){   document.getElementById('testNameHidden1').disabled = true; } </script> 
like image 857
Rishabh Gusain Avatar asked Jul 12 '15 11:07

Rishabh Gusain


People also ask

How submit form if checkbox is checked?

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.

What is the value of checkbox when unchecked?

Note: If a checkbox is unchecked when its form is submitted, there is no value submitted to the server to represent its unchecked state (e.g. value=unchecked ); the value is not submitted to the server at all.

How do I give a checkbox a condition?

First, select the checkbox using a DOM method such as getElementById() or querySelector() . Then, access the checked property of the checkbox element. If its checked property is true , then the checkbox is checked; otherwise, it is not.

How do you make a checkbox unchecked in HTML?

attr("checked","checked"); To uncheck the checkbox: $("#checkboxid").


1 Answers

Simplest one, no javascript required, just put a hidden input before the checkbox:

<input type="hidden" name="check[0]" value="0" /> <input type="checkbox" name="check[0]" value="1" /> 

Inputs need to have the same name. If the checkbox is checked then value 1 will be submitted, otherwise value 0 from the hidden input.

Your case javascript solution, no hidden inputs needed:

<script type="text/javascript">     // when page is ready     $(document).ready(function() {          // on form submit         $("#form").on('submit', function() {             // to each unchecked checkbox             $(this + 'input[type=checkbox]:not(:checked)').each(function () {                 // set value 0 and check it                 $(this).attr('checked', true).val(0);             });         })     }) </script>  <form method="post" id="form">     <input type="checkbox" name="check[0]" value="1" />     <input type="checkbox" name="check[1]" value="1" />     <input type="submit" value="Save Changes" /> </form> 

PHP solution, no hidden inputs needed:

<?php     // if data is posted, set value to 1, else to 0     $check_0 = isset($_POST['check'][0]) ? 1 : 0;     $check_1 = isset($_POST['check'][1]) ? 1 : 0; ?>  <form method="post">     <input type="checkbox" name="check[0]" value="1" />     <input type="checkbox" name="check[1]" value="1" />     <input type="submit" value="Save Changes" /> </form> 

EDIT: the javascript solution is not valid anymore as of jquery 1.6. Based on this, a more proper solution is the following:

<script type="text/javascript">     // when page is ready     $(document).ready(function() {          // on form submit         $("#form").on('submit', function() {             // to each unchecked checkbox             $(this).find('input[type=checkbox]:not(:checked)').prop('checked', true).val(0);         })     }) </script>  <form method="post" id="form">     <input type="checkbox" name="check[0]" value="1" />     <input type="checkbox" name="check[1]" value="1" />     <input type="submit" value="Save Changes" /> </form> 
like image 50
JungleZombie Avatar answered Sep 21 '22 19:09

JungleZombie