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.

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>

Get attribute value with jQuery

I'm trying to get the attribute value in jQuery, but isn't working, My code reports undefined. Here is an example:
console.log($(".btn-causas input").find(".active input").attr('d'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="btn-group btn-causas" data-toggle="buttons">
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="security_alert">Security
</label>
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="strike">Strike
</label>
<label class="btn btn-info active">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="dontknow">I DON'T
</label>
</div>

The selector could be simply done like :
$(".btn-causas .active input").attr('d');
Hope this helps.
console.log( $(".btn-causas .active input").attr('d') );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-causas" data-toggle="buttons">
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="security_alert"> Security
</label>
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="strike"> Strike
</label>
<label class="btn btn-info active">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="dontknow"> I DON'T
</label>
</div>

The best way to do that is that you rename the attribute d for data-name and you can get very easy that value with this code:
Html:
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" data-name="dontknow">
Jquery:
var value = $('input[name="options"]:checked').data('name');
alert(value);
This is the best way to do that, this code retrieve the value of a checked input radio with the attribute data-name
Regards!

You don't have active class but as per my understanding you are trying to get selected radio buttons' attribute so try :checked on input

You're specifying wrong selector .btn-causas input, instead use this .btn-causas, See the code below:
Make jQuery find the inputs inside div - .btn-causas instead of finding it inside inputs, as you've done. Inputs doesn't contains a child elements, so you can't find elements inside it.
$(function() {
console.log($(".btn-causas").find(".active input").attr('d'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-causas" data-toggle="buttons">
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="security_alert"> Security
</label>
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="strike"> Strike
</label>
<label class="btn btn-info active">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="dontknow"> I DON'T
</label>
</div>
Hope this helps!

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>