Pass checkbox values as JSON in JQuery

Question

I need to console.log values of checkboxes as JSON object. I'm a newbie in Javascript and Jquery, so any help will be appreciated. I have the following code:

jQuery(document).ready(function() {
  jQuery("input[type='button']").click(function() {
    var doorType = [];
    jQuery.each(jQuery("input[name='app']:checked"), function() {
      doorType.push(jQuery(this).val());
    });
    jQuery.each(jQuery("input[name='app-sol']:checked"), function() {
      doorType.push(jQuery(this).val());
    });
    console.log(doorType.join(", "));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <h4>Тип дверей:</h4>
  <label><input class="derevo-app" type="radio" value="derevo" name="app"> Дерево</label>
  <label><input class="metal-app" type="radio" value="metal" name="app"> Метал</label>
  <label><input class="pvh-app" type="radio" value="pvh" name="app"> ПВХ</label>
  <label><input class="sklo-app" type="radio" value="sklo" name="app"> Скло</label>
  <h4>Продукція:</h4>
  <label><input class="zamky-app" type="checkbox" value="zamky" name="app"> Замки</label>
  <label><input class="cylindry-app" type="checkbox" value="cylindry" name="app"> Циліндри</label>
  <label><input class="dostup-app" type="checkbox" value="dostup" name="app"> Контроль доступа</label>
  <label><input class="antipanic-app" type="checkbox" value="antipanic" name="app"> Антипаніка</label>
  <label><input class="dovodchyk-app" type="checkbox" value="dovodchyk" name="app"> Доводчики</label>
  <h4>Рішення:</h4>
  <label><input class="elektronne-app" type="radio" value="elektronne" name="app-sol"> Електронне</label>
  <label><input class="mexanichne-app" type="radio" value="mexanichne" name="app-sol"> Механічне</label>
  <h4>Відеокамери:</h4>
  <label><input class="vnutr-app" type="checkbox" value="vnutr" name="app"> Внутрішні</label>
  <label><input class="zovn-app" type="checkbox" value="zovn" name="app"> Зовнішні</label>
  <br>
  <input type="button" value="ПРОДОВЖИТИ">
</form>

You can't have the same name for a bunch of radio buttons and multiple checkboxes. — user5734311
– user5734311, Commented May 9, 2020 at 12:16
@ChrisG Actually, you can. It just creates a comma separated list of values. — Scott Marcus
– Scott Marcus, Commented May 9, 2020 at 12:19

Scott Marcus · Accepted Answer · 2020-05-09 12:18:18Z

1

You need to move your doorType variable declaration outside of the event handler so it retains its value across function calls and then use JSON.stringify() to convert your array to a JSON string.

$(function() {
   var doorType = []; // Must be outside of click event handler 
  
  $("input[type='button']").click(function() {

    $.each(jQuery("input[name='app']:checked"), function() {
      doorType.push(jQuery(this).val());
    });
    jQuery.each(jQuery("input[name='app-sol']:checked"), function() {
      doorType.push(jQuery(this).val());
    });
    console.log(JSON.stringify(doorType)); // JSON.stringify() does the job.
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <h4>Тип дверей:</h4>
  <label><input class="derevo-app" type="radio" value="derevo" name="app"> Дерево</label>
  <label><input class="metal-app" type="radio" value="metal" name="app"> Метал</label>
  <label><input class="pvh-app" type="radio" value="pvh" name="app"> ПВХ</label>
  <label><input class="sklo-app" type="radio" value="sklo" name="app"> Скло</label>
  <h4>Продукція:</h4>
  <label><input class="zamky-app" type="checkbox" value="zamky" name="app"> Замки</label>
  <label><input class="cylindry-app" type="checkbox" value="cylindry" name="app"> Циліндри</label>
  <label><input class="dostup-app" type="checkbox" value="dostup" name="app"> Контроль доступа</label>
  <label><input class="antipanic-app" type="checkbox" value="antipanic" name="app"> Антипаніка</label>
  <label><input class="dovodchyk-app" type="checkbox" value="dovodchyk" name="app"> Доводчики</label>
  <h4>Рішення:</h4>
  <label><input class="elektronne-app" type="radio" value="elektronne" name="app-sol"> Електронне</label>
  <label><input class="mexanichne-app" type="radio" value="mexanichne" name="app-sol"> Механічне</label>
  <h4>Відеокамери:</h4>
  <label><input class="vnutr-app" type="checkbox" value="vnutr" name="app"> Внутрішні</label>
  <label><input class="zovn-app" type="checkbox" value="zovn" name="app"> Зовнішні</label>
  <br>
  <input type="button" value="ПРОДОВЖИТИ">
</form>

answered May 9, 2020 at 12:18

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Артем Over a year ago

Thanks! It works! But is there any way to console.log all input values as separate groups? For example: Door type: ["metal'], Products: ["zamky", "dostup"], Solutions: ["elektronne"], Cameras: ["zovn-app"]

Scott Marcus Over a year ago

@Артем Yes, just either store the separate data in separate arrays or store an object with keys that keep the separate data as arrays.

Ehsan Mahmud · Accepted Answer · 2020-05-09 12:16:46Z

0

You need to use JSON.stringify(doorType). And also, as Chris mentioned, you cannot use the same names.

answered May 9, 2020 at 12:16

Ehsan Mahmud

7434 silver badges11 bronze badges

1 Comment

Scott Marcus Over a year ago

You can use the same name multiple times in a form. It just creates a comma separated list of string values.

Collectives™ on Stack Overflow

Pass checkbox values as JSON in JQuery

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related