Reputation: 119
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>
Upvotes: 0
Views: 2328
Reputation: 65883
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>
Upvotes: 1
Reputation: 743
You need to use JSON.stringify(doorType)
. And also, as Chris mentioned, you cannot use the same names.
Upvotes: 0