Develop Reference

How do I convert a single select drop down to buttons in React/JS?

I had a drop-down for gender single-select: Male/Female
However, our designer wanted to spice it up and turn drop-down into buttons like this:
How can I implement these buttons in Javascript/React where clicking on one button highlights it and then it unhighlights the opposite button?

I learned that Bootstrap has this functionality as long as you include the data-toggle="buttons" in the top div.
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" name="options" autocomplete="off" checked> Option A
</label>
<label class="btn btn-primary">
<input type="checkbox" name="options" autocomplete="off"> Option B
</label>
<label class="btn btn-primary active">
<input type="checkbox" name="options" autocomplete="off" checked> Option C
</label>
</div>

Add an on change listener to bootstrap 4 button group?

I have this (bootstrap 4) button group as follows:
<div id="timeselector" class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active ">
<input type="radio" name="options" id="sec" autocomplete="off" checked>Second
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="min" autocomplete="off">Minute
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="hr" autocomplete="off">Hour
</label>
</div>
I want to add a JS onchange listener and find out which one was pressed (e.g. Second, Minute, or Hour). I don't want to add a listener to each button because there are a lot of buttons like these on my page.
I've tried adding something like this:
$('#timeselector').on("change", function() {
alert(this)
});
But that doesn't work. If I change "change" to "click", it does alert, but it doesn't give me which was selected.
Can someone help with this? Thank you!

You need to use click instead an to attach the event to the input's inside your div :
$('#timeselector input')
$('#timeselector input').on("click", function() {
alert(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<div id="timeselector" class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active ">
<input type="radio" name="options" id="sec" autocomplete="off" checked>Second
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="min" autocomplete="off">Minute
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="hr" autocomplete="off">Hour
</label>
</div>

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>

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!