Getting Checkbox Values on Submit

Getting checkbox values on submit

A good method which is a favorite of mine and for many I'm sure, is to make use of foreach which will output each color you chose, and appear on screen one underneath each other.

When it comes to using checkboxes, you kind of do not have a choice but to use foreach, and that's why you only get one value returned from your array.

Here is an example using $_GET. You can however use $_POST and would need to make both directives match in both files in order to work properly.

###HTML FORM

<form action="third.php" method="get">
    Red<input type="checkbox" name="color[]" value="red">
    Green<input type="checkbox" name="color[]" value="green">
    Blue<input type="checkbox" name="color[]" value="blue">
    Cyan<input type="checkbox" name="color[]" value="cyan">
    Magenta<input type="checkbox" name="color[]" value="Magenta">
    Yellow<input type="checkbox" name="color[]" value="yellow">
    Black<input type="checkbox" name="color[]" value="black">
    <input type="submit" value="submit">
</form>

###PHP (using $_GET) using third.php as your handler

<?php

$name = $_GET['color'];

// optional
// echo "You chose the following color(s): <br>";

foreach ($name as $color){ 
    echo $color."<br />";
}

?>

Assuming having chosen red, green, blue and cyan as colors, will appear like this:

red

green

blue

cyan

##OPTION #2

You can also check if a color was chosen. If none are chosen, then a seperate message will appear.

<?php

$name = $_GET['color'];

if (isset($_GET['color'])) {
    echo "You chose the following color(s): <br>";

    foreach ($name as $color){
        echo $color."<br />";
    }
} else {
    echo "You did not choose a color.";
}

?>

##Additional options:
To appear as a list: (<ul></ul> can be replaced by <ol></ol>)

<?php

$name = $_GET['color'];

if (isset($_GET['color'])) {
    echo "You chose the following color(s): <br>";
    echo "<ul>";
    foreach ($name as $color){
        echo "<li>" .$color."</li>";
    }
    echo "</ul>";
} else {
    echo "You did not choose a color.";
}

?>

Get checkbox value on submit

Here is a way to do that. You can loop through the checkboxes and print the values if checkboxes are checked.

const form = document.querySelector('form');
form.addEventListener('submit', e => {  e.preventDefault();
  const values = Array.from(document.querySelectorAll('input[type=checkbox]:checked'))    .map(item => item.value)    .join(',');
  console.log(`test.com/addtocart?${values}`);});

<form>  <input type="checkbox" id="product1" name="product1" value="12">  <input type="checkbox" id="product1" name="product1" value="13">  <input type="checkbox" id="product1" name="product1" value="14">  <button type="submit">Subscribe</button></form>

Do checkbox inputs only post data if they're checked?

Yes, standard behaviour is the value is only sent if the checkbox is checked. This typically means you need to have a way of remembering what checkboxes you are expecting on the server side since not all the data comes back from the form.

The default value is always "on", this should be consistent across browsers.

This is covered in the W3C HTML 4 recommendation:

Checkboxes (and radio buttons) are on/off switches that may be toggled
by the user. A switch is "on" when the control element's checked
attribute is set. When a form is submitted, only "on" checkbox
controls can become successful.

Get checked checkbox values in an array on form submit

Use $('input[type="checkbox"]:checked'), note the space was removed between input[type="checkbox"] and the pseudo class :checked:

UPDATED EXAMPLE HERE

 $("#calform").submit(function (e) {

     var allVals = [];

     $('input[type="checkbox"]:checked').each(function () {
      //     removed the space ^

         allVals.push($(this).val());
     });
     alert(allVals);

     e.preventDefault();
 });

Get the check box value after submitting a form

At "pg/members/searchuser"

Update 2.0
You use this code:

<?php

if(isset($_POST['meta_data_array_search_criteria']))
{  

   foreach($_POST['meta_data_array_search_criteria'] as $val)
   {
        foreach($val as $checkbox_data)
        {
            echo $checkbox_data."<br/>";
        }
   }
 } else 
 {
     echo "No checkbox checked";
 }
?>

How to select the checkboxes:
There are 2 methods, with JS or with PHP.
The jQuery snippet:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
{


<?php

if(isset($_POST['meta_data_array_search_criteria']))
{  

   foreach($_POST['meta_data_array_search_criteria'] as $val)
   {
        foreach($val as $checkbox_data)
        {

            ?>
            $('input:checkbox[value="<?php echo $checkbox_data;?>"]').attr('checked','checked');
            <?php
        }
   }
 } else 
 {
     echo "No checkbox checked";
 }
?>
})
</script>

What it does? It will select those checkboxes,which values we got from $_POST.

How to get multiple checkbox values on submit reactjs

You need to save multiple values on the same object per recipient, I did this change on your handleInputChange function, now it creates an object per recipient

const handleInputChange = (e, name) => {
    updateRecicpientEmails((prevState) => ({
      ...prevState,
      [name]: {
        email: e.target.value
      }
    }));
  };

and I call it like this

handleInputChange(event, `recipient_${index}`, false)

removed _email from there.

And for the handle permission, just add a new property to the recipient object with the checkbox value

const handlepermission = (index, value) => {
    updateRecicpientEmails((currentRecipients) => ({
      ...currentRecipients,
      [index]: {
        ...currentRecipients[index],
        allow: value
      }
    }));
  };

this function runs on input change, so just add this to prop to the input:

onChange={({ target: { checked } }) => {
  handlepermission(`recipient_${index}`, checked);
}}

To be honest is easier if you use the native form submit handler and FormData API, here is an example:

https://codesandbox.io/s/formdata-api-example-xkvi8

Jquery get all checked checkboxes values in form submission

If you are interested only in values you can use jQuery.map():

var price_range = jQuery(".et_pb input[type=checkbox]:checked").map(function(idx, ele) {    return ele.value.indexOf('500') > -1 ? '4' : ele.value;}).get();

console.log(price_range);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class="et_pb">    <span class="field_options_title">Desired Price Range</span>    <input type="checkbox" id="price_range_12_0" class="input" value="Under $200,000" data-id="" data-value="1" checked>    <label for="price_range_12_0"><i></i>Under $200,000</label>

    <input type="checkbox" id="price_range_12_1" class="input" value="$200,000 - $300,000" data-value="2" data-id="">    <label for="price_range_12_1"><i></i>$200,000 - $300,000</label>

    <input type="checkbox" id="price_range_12_2" class="input" value="$300,000 - $400,000" data-id="" data-value="3" checked>    <label for="price_range_12_2"><i></i>$300,000 - $400,000</label>
    <input type="checkbox" id="price_range_12_3" class="input" value="$400,000 - $500,000" data-id="" data-value="4" checked>    <label for="price_range_12_3"><i></i>$400,000 - $500,000</label>
    <input type="checkbox" id="price_range_12_4" class="input" value="$500,000+" data-value="5" data-id="">    <label for="price_range_12_4"><i></i>$500,000+</label></span>

Get checkbox value on form submit and store in a variable using jQuery

$("form").submit(function() {
    var aVariable = $('input.test[type="checkbox"]:checked', this).val();
});

.val() returns undefined if called on an empty jQuery object, which would be the case here if no checkboxes are checked.

Getting Checkbox Values on Submit