Get checkbox value on submit

how to get checkbox value from database in php
how to get checkbox value in php if checked
how to get checked and unchecked checkbox array value in php
how to _post multiple checkbox value in php
how to display checked checkbox value in php
php checkbox checked from database
how to get multiple checkbox value in php using array
how to show multiple checkbox checked in php

Lets say I have a form with a few checkboxes. Whenever i submit that form i want all the values of the selected checkboxes to be printed.

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

The usecase for this is as follow:

I have a webshop, i want to add multiple products to my cart at once.

I have a link which is the basic and looks like : test.com/addtocart? After the questionmark i need to add the values of the checkboxes separated by comma's. For example if the value 12 and 14 are selected it should generate a link like this: test.com/addtocart?12,14

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>

PHP: Get Values of Multiple Checked Checkboxes, In this tutorial, our concern is to get values of multiple checkbox in PHP after submitting the form. In this example we are learn how to manage multiple checkbox in reactjs. in this component we are use state array and store multi checkbox value. when you check checkbox at that time we are handel on change event then add and remove value. Multiple Checkbox Example /src/MultiCheckBox.js file. import React from 'react'

A vanilla js solution might be like that.

document.querySelector("button").addEventListener('click', function(e){
  e.preventDefault();
  var form = document.querySelector("form");
  Array.from(form.querySelectorAll("input")).forEach(function(inp){
    if(inp.checked === true) { console.log(inp.value);  } 
  });
});
<form>
<input type="checkbox" id="product1" name="product1" value="12">
<input type="checkbox" id="product2" name="product1" value="13">
<input type="checkbox" id="product3" name="product1" value="14">
<button type="submit">Subscribe</button>
</form>

Get checked Checkboxes value with PHP, If you have multiple options, then you want to get the checked values to store them in variable on form submit, Then you can use this technique. For checkboxes, the contents of the value property do not appear in the user interface. The value property only has meaning when submitting a form. If a checkbox is in checked state when the form is submitted, the name of the checkbox is sent along with the value of the value property (if the checkbox is not checked, no information is sent).

The simplest solution which also returns the proper link.

var form = document.querySelector('form');
var selections = '';
var link = 'https://example.com?';
form.addEventListener('submit', function(e) {
  e.preventDefault();

  document.querySelectorAll('input[type=checkbox]')
    .forEach(function(item) {
      if (item.checked) {
        selections = selections + item.value + ',';
      }
    })
link = link + selections;
console.log(link);
});
<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>

Getting checkbox values on submit in PHP, In the PHP script (checkbox-form.php), we can get the submitted option from the $_POST array. If $_POST['formWheelchair'] is "Yes", then the box was checked. Get Checkbox "Checked" value on form submit - ASP. How do I get whether a checkbox is ticked in a form on a form's submission (true or false)? How do I use the Request object in ASP?

As a copy of 31piy's answer here is one with native js

function $(selector) {
  return document.querySelector(selector);
}

function $$(selector) {
  return document.querySelectorAll(selector);
}

$('form').addEventListener('submit', function(event) {
  event.preventDefault();
  
  $$('input[type=checkbox]:checked').forEach($cbox => {
    console.log($cbox.value);
  });
  
  return false;
});
<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>

Handling checkbox in a PHP form processor, How to Submit a Form Using JavaScript · Can JavaScript email a form? Comments on this entry are closed. coder. The Input Checkbox Value property in HTML DOM is used to set or return the value of the value attribute of an input checkbox field, however the contents of the value attribute does not shown to user. When the form is submitted by the user, the value and the other information sent to the server.

My pure javascript example works cross-bowser and with older browsers. It changes the forms action every time an item is selected/unselected (but you could just keep the link as a string if you've got other code making requests). This way when you come to submit your form the url will always be up-to-date with the selected items only:

function getCheckedOptions(form) {
  var inputs = form.children;  // get all inputs in the form
  var products = [];           // will store the selected products values

  // cycle through all inputs
  for( var i = 0; i < inputs.length; i++ ){
    if( inputs[i].checked ){
      // only record the checked inputs
      products.push(inputs[i].value);
    }
  }

  // update the `action` of the form - alternatively you could just store it as a string to use somewhere else in your code if you're using AJAX or something
  form.action = "http://test.com/addtocart?"+products.join(",");
}
<form onchange="getCheckedOptions(this);">
  <input type="checkbox" id="product1" name="product1" value="12">
  <input type="checkbox" id="product2" name="product2" value="13">
  <input type="checkbox" id="product3" name="product3" value="14">
  <button type="submit">Subscribe</button>
</form>

How to get the value of a form element : check box and radio button, How to Get Local IP Address of System using PHP ? p >The form below contains one checkbox.</ p > label >< button name = "submit" value = 'true'. It includes five checkboxes, each representing a sports such as Cricket, Football, Tennis etc. User can select his/her favorite sport(s) by selecting checkbox(es). Click on 'Submit' button on the form to send value(s) to JSP page 'sports.jsp'.

How to read if a checkbox is checked in PHP?, You can use the jQuery :checked selector in combination with the each() method to retrieve the values of all checkboxes selected in a group. The each() method  If checkbox remains unchecked, the form submits only the hidden value (false) If checked, then the form submits two fields (false and true) and MVC sets true for the model's bool property <input id="Remember" name="Remember" type="checkbox" value="@Model.Remember" /> This will always send the default value, if checked.

How to Get the Values of Selected Checkboxes in a Group Using , A checkbox allows you to select single values for submission in a If both checkboxes are checked and then the form is submitted, you'll get a  To get the value of the Value attribute you can do something like this: $("input[type='checkbox']").val(); Or if you have set a class or id for it, you can: $('#check_id').val(); $('.check_class').val(); However this will return the same value whether it is checked or not, this can be confusing as it is different to the submitted form behaviour.

<input type="checkbox">, While checkboxes can only either submit their value (checked state) or not (​unchecked find parent and sibling checkboxes (quick'n'dirty) Now to display all the list items in the CheckBox a loop is required, populating required name and values from the SelectListItem. On Submitting the form these values from the SelectListItem is iterated over and the expected values extracted and sent using the POST method to the database.

Comments
  • Having more than one element with the same ID is invalid HTML. You should fix that.
  • @CertainPerformance i overlooked that, fixed it now.
  • @31piy thank you so much for your effort. I accept this, great answer.
  • Do you think there's a way to remove the last comma on a link?