CODEWITHSUNDEEP
javascripthtml
Kevin.a
Kevin.a

Reputation: 4296

Get checkbox value on submit

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

Upvotes: 2

Views: 9711

Answers (5)

TimBryanDev
TimBryanDev

Reputation: 173

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>

Upvotes: 0

31piy
31piy

Reputation: 23859

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>

Upvotes: 9

Nick Tirrell
Nick Tirrell

Reputation: 431

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>

Upvotes: 1

flx
flx

Reputation: 1578

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>

Upvotes: 1

marmeladze
marmeladze

Reputation: 6564

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>

Upvotes: 2

Related Questions