In my html form I have 3 radio button for user to choose a room type
<input type="radio" name="room" id="standard" class="left" checked>Standard
<input type="radio" name="room" id="business" class="left">Business
<input type="radio" name="room" id="suite" class="left last">Suite<br>
<div id="select"></div>
In my js file I want it so that when the user change the radio button it will add or show/hide the corresponding select input
my js for this currently is:
$(":radio").change( () => {
const radioButton = $(":radio:checked").val();
if (radioButton == 'standard'){
var label = '<label>Select number of bed: </label>';
var option = '<select class=bed><option value="1">1</option><option value="2">2</option></select>'
var html = '';
$("#select").html('');
html += label;
for (i = 0; i < 2; i++) {
html += option
};
$("#select").html(html);
}
else if(radioButton == 'business'){...}
Nothing change when I change the radio option, I'm a beginner so I don't know what/where went wrong
Your radio buttons have no value attribute so when you check the value you will not match with any of your options
<input type="radio" name="room" id="standard" class="left" checked value="Standard">Standard
<input type="radio" name="room" id="business" class="left" value="Business">Business
<input type="radio" name="room" id="suite" class="left last" value="Suite">Suite<br>