Develop Reference

AJAX - JSON undefined (jQuery, NodeJS)

I'm currently struggling with an ajax that posts a json to a nodejs route. I want to get the selected values of 4 button-groups. The button-groups have the following ids: quality, costeffectiveness, deliveryscope and rating. Each button-group contains 5 radio-buttons with a value with an own id, such as quality1 or quality2. The values of these buttons range from 1 to 5.
My guess is that I'm missing out things mentioned here: How do I return the response from an asynchronous call?
$(document).ready(function () {
// SUBMIT FORM
$("#ratingForm").submit(function (event) {
// Prevent the form from submitting via the browser.
event.preventDefault();
ajaxPost();
});
function ajaxPost() {
// PREPARE FORM DATA
let ratingData = {
quality: $('input[name=options]:checked', '#quality').val(),
costeffectiveness: $('input[name=options]:checked', '#costeffectiveness').val(),
deliveryscope: $('input[name=options]:checked', '#deliveryscope').val(),
contentment: $('input[name=options]:checked', '#contentment').val()
};
// DO POST
$.ajax({
type: "POST",
contentType: "application/json",
url: "/rating",
data: JSON.stringify(ratingData),
dataType: 'json',
success: function (rating) {
$("#ratingResultDiv").html("<p>" +
"Post Successfully! <br>" +
"--->" + JSON.stringify(rating) + "</p>");
},
error: function (e) {
alert("Error!");
console.log("ERROR: ", e);
}
});
}
});
When I'm assigning variables in a different kind of way and change the route for the expected json, it works like a charm:
// PREPARE FORM DATA
let formData = {
firstname: $("#firstname").val(),
lastname: $("#lastname").val()
};
Working.
NodeJS Route:
router.post('/rating', function (req, res, next) {
console.log("RATINGS: " + JSON.stringify(req.body));
console.log(req.body.quality);
console.log(req.body.costeffectiveness);
console.log(req.body.deliveryscope);
console.log(req.body.contentment);
let rating = {};
rating.quality= req.body.quality;
rating.costeffectiveness = req.body.costeffectiveness;
rating.deliveryscope = req.body.deliveryscope;
rating.contentment = req.body.contentment;
return res.send(rating);
HTML:
<form method="POST" action="/rating">
<form id="ratingForm">
<div class="form-group">
<p class="my-2">Quality</p>
<div class="btn-group btn-group-lg btn-group-toggle" id="quality"
data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="quality" id="quality1" value="1"
autocomplete="off" checked>
1
</label>
<label class="btn btn-primary">
<input type="radio" name="quality" id="quality2" value="2"
autocomplete="off"> 2
</label>
<label class="btn btn-primary">
<input type="radio" name="quality" id="quality3" value="3"
autocomplete="off"> 3
</label>
<label class="btn btn-primary">
<input type="radio" name="quality" id="quality4" value="4"
autocomplete="off"> 4
</label>
<label class="btn btn-primary">
<input type="radio" name="quality" id="quality5" value="5"
autocomplete="off"> 5
</label>
</div>
<p class="my-2">Cost Effectiveness</p>
<div class="btn-group btn-group-lg btn-group-toggle" id="cost-effectiveness"
data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="costeffectiveness" id="cost_effectiveness1" value="1"
autocomplete="off"
checked> 1
</label>
<label class="btn btn-secondary">
<input type="radio" name="costeffectiveness" id="cost_effectiveness2" value="2"
autocomplete="off">
2
</label>
<label class="btn btn-secondary">
<input type="radio" name="costeffectiveness" id="cost_effectiveness3" value="3"
autocomplete="off">
3
</label>
<label class="btn btn-secondary">
<input type="radio" name="costeffectiveness" id="cost_effectiveness4" value="4"
autocomplete="off">
4
</label>
<label class="btn btn-secondary">
<input type="radio" name="costeffectiveness" id="cost_effectiveness5" value="5"
autocomplete="off">
5
</label>
</div>
<p class="my-2">Delivery Scope</p>
<div class="btn-group btn-group-lg btn-group-toggle" id="delivery-scope"
data-toggle="buttons">
<label class="btn btn-info active">
<input type="radio" name="deliveryscope" id="delivery_scope1" value="1"
autocomplete="off"
checked> 1
</label>
<label class="btn btn-info">
<input type="radio" name="deliveryscope" id="delivery_scope2" value="2"
autocomplete="off">
2
</label>
<label class="btn btn-info">
<input type="radio" name="deliveryscope" id="delivery_scope3" value="3"
autocomplete="off">
3
</label>
<label class="btn btn-info">
<input type="radio" name="deliveryscope" id="delivery_scope4" value="4"
autocomplete="off">
4
</label>
<label class="btn btn-info">
<input type="radio" name="deliveryscope" id="delivery_scope5" value="5"
autocomplete="off">
5
</label>
</div>
<p class="my-2">Contentment</p>
<div class="btn-group btn-group-lg btn-group-toggle" id="contentment"
data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="contentment" id="contentment1" value="1"
autocomplete="off"
checked>
1
</label>
<label class="btn btn-secondary">
<input type="radio" name="contentment" id="contentment2" value="2"
autocomplete="off"> 2
</label>
<label class="btn btn-secondary">
<input type="radio" name="contentment" id="contentment3" value="3"
autocomplete="off"> 3
</label>
<label class="btn btn-secondary">
<input type="radio" name="contentment" id="contentment4" value="4"
autocomplete="off"> 4
</label>
<label class="btn btn-secondary">
<input type="radio" name="contentment" id="contentment5" value="5"
autocomplete="off"> 5
</label>
</div>
<div class="modal-footer my-4">
<button type="submit" class="btn btn-lg btn-primary btn-block">Submit rating
</button>
</div>
</div>
</form>
</form>

let req = JSON.parse(req);
Try to put this on your node js script

Problem is in your jQuery selectors. It should be
let ratingData = {
quality: $('#quality input[name=options]:checked').val(),
costeffectiveness: $('#costeffectiveness input[name=options]:checked').val(),
deliveryscope: $('#deliveryscope input[name=options]:checked').val(),
contentment: $('#contentment input[name=options]:checked').val()
};

The problem was, that each button in the button group had the same name. As soon as I gave the buttons in a group an individual name, the values were accessible in json. I'm going to edit my code in the question.

Change color of a Radio button permanently on click

Hi I designed a serious of Radio buttons. I want to change the color of radio buttons permanently on click. Please help me to implement this design. I have written this code here, Which is not working. Any suggestions would be highly appreciated.
$('.btn.btn-default').on("click", function() {
//$('button').not(this).removeClass();
$(this).toggleClass('active');
});
.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" autocomplete="off" checked>
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option4" autocomplete="off">
</label>
</div>
</div>
</div>

You can use add and remove class with siblings like this.
$('.btn.btn-default').on("click", function() {
$(this).addClass('active');
$(this).siblings().removeClass('active')
});
.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" autocomplete="off" checked>
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option4" autocomplete="off">
</label>
</div>
</div>
</div>

Try this code, Its working
$('.btn.btn-default').on("click", function() {
//$('button').not(this).removeClass();
$(this).addClass('active');
});
.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" autocomplete="off" checked>
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option4" autocomplete="off">
</label>
</div>
</div>
</div>

I think you only need to change the toggleClass with addClass as you need to change color permanently.
$('.btn.btn-default').on("click", function() {
$(this).addClass('active');
});

In my case, the below solution worked the best. Thanks all for your valuable inputs.
<style>
.btn-default.active{background-color:blue;}
</style>
<script>
$('.btn.btn-default').on("click",function(){
//$('button').not(this).removeClass();
$(this).addClass('active');
});
</script>
I added .btn-default CSS class to the style.

You just need to add JQuery after loading the whole body.
I think this will help you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<style>
.active{background-color:red;}
</style>
<div class="container">
<div class="row">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" autocomplete="off" checked>
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option4" autocomplete="off">
</label>
</div>
</div>
</div>
<script>
$('.btn.btn-default').on("click",function(){
//$('button').not(this).removeClass();
$(this).toggleClass('active');
});
</script>
</body>
</html>

Double clicking detected with jquery on click

I have a div like so
$('.btn-group label').unbind().click(function() {
$(this).toggleClass('active');
var checked = $(this).find('input').prop('checked');
console.log(checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="invert"> Invert
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="select-color"> Select Colors
</label>
</div>
which has a bug, when I check the console result for a click I get two results false and true from this jquery function
how can I log only the valid one which is true?
On jsfiddle it's working however without double logging https://jsfiddle.net/8wtLc8b6/

Do with change event instead of click
$('.btn-group label').change(function(e) {
$(this).toggleClass('active');
var checked = $(this).find('input').prop('checked');
console.log(checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="invert"> Invert
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="select-color"> Select Colors
</label>
</div>
Why?
Change event run after the changes append in input
$('.btn-group label').change(function(){
console.log('change') //its run only on completely changed
}).click(function(e) {
console.log('click'); //its run before and after changing
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="invert"> Invert
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="select-color"> Select Colors
</label>
</div>

Can't get checked checkboxes in jquery

I'm trying to fill an array but jquery isn't finding the checked checkboxes
$('input[name="frequency"]:checked').map(function() {
frequencies.push($(this).val());
});
<div id="frequencyCheckboxes" class="btn-group" data-toggle="buttons" style="width:270px;">
<label class="btn btn-primary" for="cbm">
<input id="cbM" name="frequency" value="M" type="checkbox" autocomplete="off">M
</label>
<label class="btn btn-primary" for="cbW1">
<input id="cbW1" name="frequency" value="W1" type="checkbox" autocomplete="off">W1
</label>
<label class="btn btn-primary" for="cbW2">
<input id="cbW2" name="frequency" value="W2" type="checkbox" autocomplete="off">W2
</label>
<label class="btn btn-primary" for="cbW3">
<input id="cbW3" name="frequency" value="W3" type="checkbox" autocomplete="off">W3
</label>
<label class="btn btn-primary" for="cbW4">
<input id="cbW4" name="frequency" value="W4" type="checkbox" autocomplete="off">W4
</label>
<label class="btn btn-primary" for="cbW5">
<input id="cbW5" name="frequency" value="W5" type="checkbox" autocomplete="off">W5
</label>
</div>

Can you try below?
var frequencies = [];
$('input[name="frequency"]').click(function() {
frequencies.push($(this).val());
});

i think using each instead map should works
$(input[name="frequency"]).click(function(){
$('input[name="frequency"]:checked').each(function(i,el) {
frequencies.push($(el).val());
})
});

How can I get info from these buttons on the server side

I have these buttons inside a form. How can I know which ones were selected when the user submits the form?
<form action="/">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
<input type="submit value="submit"></input>
</form>

Your button group is a bootstrap style group and means nothing on the server side.
Your inputs will need to be named in order to produce a value from the form's postback.
<form action="/">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input name="check1" type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input name="check2" type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input name="check3" type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>