How to get total yes value from a set of survey question - javascript

I have a short survey questions with answer YES/ NO
How can I get the total number of YES when submit button is clicked?
I will need to display certain images later according to the number of YES
<form>
<div class="field">
<label class="label">This is question number 1</label>
<div class="control">
<label class="radio">
<input type="radio" name="question1" value="1">
Yes
</label>
<label class="radio">
<input type="radio" name="question1" value="0">
No
</label>
</div>
</div>
<div class="field">
<label class="label">This is question number 2</label>
<div class="control">
<label class="radio">
<input type="radio" name="question2" value="1">
Yes
</label>
<label class="radio">
<input type="radio" name="question2" value="0">
No
</label>
</div>
</div>
<div class="field">
<label class="label">This is question number 3</label>
<div class="control">
<label class="radio">
<input type="radio" name="question3" value="1">
Yes
</label>
<label class="radio">
<input type="radio" name="question3" value="0">
No
</label>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<div class="button is-link" onclick="countYes()">Submit</div>
</div>
<div class="control">
<button class="button is-link is-light">Cancel</button>
</div>
</div>
</form>
<script>
function countYes() {
totalVal = 0;
for(var y=0; y<3; y++)
{
var questionNo = document.getElementsByName("question" + y);
for (i=0; i<questionNo.length; i++)
{
if (document.forms.question[i].checked==true)
{
totalVal = totalVal + parseInt(document.forms.question[i].value);
console.log(totalVal);
}
}
}
}
</script>
I have a short survey questions with answer YES/ NO
How can I get the total number of YES when submit button is clicked?
I will need to display certain images later according to the number of YES

Related

How to put condition on questions to grey out (having questions in HTML with radio button answer ) using NA button for each question?

I have created one HTML/JS application in which i have created 5 questions with radio button answer.i have given user to do click NA for not applicable questions.but i want to put condition that user only able to grey out 3 questions.Not more than that here i am confused how to do it.below is the code.Also i have put Next button with condition so each question which is not grey out should be answer :-
HTML :-
<div class="section-1-questions">
<div style="background-color:greenyellow;"> <b>Section 1:</b> </div><br>
<fieldset class="form-group">
<div class="row1">
<div class = "question1">
<legend id="q1" class="col-form-label col-sm-8 pt-0"><b>1) Question 1</b></legend>
<div class="col-sm-10">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios1" value="1" >
<label class="form-check-label" for="gridRadios1">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios2" value="2">
<label class="form-check-label" for="gridRadios2">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios3" value="3">
<label class="form-check-label" for="gridRadios3">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios4" value="4">
<label class="form-check-label" for="gridRadios4">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios5" value="5">
<label class="form-check-label" for="gridRadios5">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q1Remark" value="Remark" onclick="onButtonClick(1)" />
<input class="hide" type="text" id="textInput1" value="" oninput="updateTextBox()" />
<p>Remaining Characters: <span id="chars-left">100</span></p>
</div>
<div class="form-group">
<input type="button" name="disable1" id = "na1" value="N/A"/>
</div>
</div></div>
</div>
{{!-- <input type="button" id="remarks" value="Remarks" /> --}}
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q2" class="col-form-label col-sm-8 pt-3"><b>2) Question 2</b></legend>
<div class="col-sm-10">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios6" value="1">
<label class="form-check-label" for="gridRadios6">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios7" value="2">
<label class="form-check-label" for="gridRadios7">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios8" value="3">
<label class="form-check-label" for="gridRadios8">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios9" value="4">
<label class="form-check-label" for="gridRadios9">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios10" value="5">
<label class="form-check-label" for="gridRadios10">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q2Remark" value="Remark" onclick="onButtonClick(2)" />
<input class="hide" type="text" id="textInput2" value="" />
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q3" class="col-form-label col-sm-8 pt-3"><b>3) Question 3</b></legend>
<div class="col-sm-10">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios11" value="1">
<label class="form-check-label" for="gridRadios11">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input " type="radio" name="question3" id="gridRadios12" value="2">
<label class="form-check-label" for="gridRadios12">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios13" value="3">
<label class="form-check-label" for="gridRadios13">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios14" value="4">
<label class="form-check-label" for="gridRadios14">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios15" value="5">
<label class="form-check-label" for="gridRadios15">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q3Remark" value="Remark" onclick="onButtonClick(3)" />
<input class="hide" type="text" id="textInput3" value="" />
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q4" class="col-form-label col-sm-8 pt-3"><b>4) Question 4</b></legend>
<div class="col-sm-10">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios16" value="1">
<label class="form-check-label" for="gridRadios16">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios17" value="2">
<label class="form-check-label" for="gridRadios17">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios18" value="3">
<label class="form-check-label" for="gridRadios18">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios19" value="4">
<label class="form-check-label" for="gridRadios19">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios20" value="5">
<label class="form-check-label" for="gridRadios20">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q4Remark" value="Remark" onclick="onButtonClick(4)" />
<input class="hide" type="text" id="textInput4" value="" />
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q5" class="col-form-label col-sm-8 pt-3"><b>5) QUESTION 5</b></legend>
<div class="col-sm-10">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios21" value="1">
<label class="form-check-label" for="gridRadios21">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios22" value="2">
<label class="form-check-label" for="gridRadios22">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios23" value="3">
<label class="form-check-label" for="gridRadios23">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios24" value="4">
<label class="form-check-label" for="gridRadios24">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios25" value="5">
<label class="form-check-label" for="gridRadios25">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q5Remark" value="Remark" onclick="onButtonClick(5)" />
<input class="hide" type="text" id="textInput5" value="" />
</div>
</div>
</div>
</fieldset>
<div class="form-group">
<label for="remarks"><b>Remarks / Observations </b></label>
<input type="name" class="form-control" name="Remarks1" id="remarks1" aria-describedby="nameHelp" placeholder="Please enter your Remarks / Observations">
<small id="nameHelp" class="form-text text-muted">Please enter your Remarks / Observations about these questions.</small>
</div>
</div>
<br>
<a class="btn btn-primary btnPrevious" >Previous</a>
<a class="btn btn-primary btnNextS1" >Next</a>
</div>
JS :-
$(document).ready(function () {
$("#na1").click(function() {
console.log("na is working");
$(".question1 input").attr('disabled', true);
})
});
$('.btnNextS1').click(function(){
if($('div.row1:not(:has(:radio:checked))').length){
$('div.row1:not(:has(:radio:checked))').parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please Answer this question</div>");
}else {
// e.stopPropagation();
$('ul.nav-tabs li.nav-item a.active').closest('li').next('li').find('a').trigger('click');
}});
As each question has identical information, why not do it once and repeat.
For the NA button, we just add a class onto the enclosing div which helps us with styling and also gives us a selector to test for legnth. When it's over 3 we prevent it from continuing.
Sorry I changed the code, but hopefully this will give you some insight on how to make your code more lean, managable and responsive. Now if you want to update the answers, you can do it once and it works for them all.
$(document).ready(function() {
let ctr = 1;
$('.answers').each(function(index) {
let i = index + 1
let html = ` <div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="1">
<label class="form-check-label" for="gridRadios${ctr}"> Never</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="2">
<label class="form-check-label" for="gridRadios${ctr}">Rarely</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="3">
<label class="form-check-label" for="gridRadios${ctr}">Occasionally</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="4">
<label class="form-check-label" for="gridRadios${ctr}">Often</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="5">
<label class="form-check-label" for="gridRadios${ctr}">Always</label>
</div>
<div class="form-group">
<input type="button" name="q${i}Remark" value="Remark" onclick="onButtonClick(${i})" />
<input class="hide" type="text" id="textInput${i}" value="" oninput="updateTextBox()" />
<p>Remaining Characters: <span id="chars-left">100</span></p>
</div>
<div class="form-group">
<button name="disable${i}" id="na${i}" class='btn-na'>N/A</button>
</div>
`
$(this).html(html);
ctr++;
})
$(".btn-na").click(function() {
let n = $('.answers.disabled').length
if (n >= 3) {
alert('You can only disable 3');
return
}
$(this).closest('.answers').find("input").attr('disabled', true);
$(this).closest('.answers').addClass('disabled')
})
});
$('.btnNextS1').click(function() {
if ($('div.row1:not(:has(:radio:checked))').length) {
$('div.row1:not(:has(:radio:checked))').parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please Answer this question</div>");
} else {
// e.stopPropagation();
$('ul.nav-tabs li.nav-item a.active').closest('li').next('li').find('a').trigger('click');
}
});
.answers.disabled {
opacity: .5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-1-questions">
<div style="background-color:greenyellow;"> <b>Section 1:</b> </div><br>
<fieldset class="form-group">
<div class="row1">
<div class="question1">
<legend id="q1" class="col-form-label col-sm-8 pt-0"><b>1) Question 1</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q2" class="col-form-label col-sm-8 pt-3"><b>2) Question 2</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q3" class="col-form-label col-sm-8 pt-3"><b>3) Question 3</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q4" class="col-form-label col-sm-8 pt-3"><b>4) Question 4</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q5" class="col-form-label col-sm-8 pt-3"><b>5) QUESTION 5</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</fieldset>
<div class="form-group">
<label for="remarks"><b>Remarks / Observations </b></label>
<input type="name" class="form-control" name="Remarks1" id="remarks1" aria-describedby="nameHelp" placeholder="Please enter your Remarks / Observations">
<small id="nameHelp" class="form-text text-muted">Please enter your Remarks / Observations about these questions.</small>
</div>
</div>
<br>
<a class="btn btn-primary btnPrevious">Previous</a>
<a class="btn btn-primary btnNextS1">Next</a>
</div>
You want to use the disabled html attribute along with the jquery prop function.
$(".class").prop( "disabled", true );
It's important to note that using disabled and required on the same element can cause problems for users. This is because they won't be able to submit the form because a input is disabled, preventing input, but it's also required.
EDIT
You'll want to define a "counter" variable var disableCount = 0; which will increment every time a question is disabled. Once the counter variable is incremented three times. The click function should 1 Stop incrementing the counter and 2 stop disabling questions.
Something like this should work:
var disableCount = 0;
$("#na1").click(function() {
if(disableCount >= 3) return;
console.log("na is working");
$(".question1 input").attr('disabled', true);
disableCount++;
});

trying to validate my radiobuttons. Can someone help me on my way?

I have struggeling with my problem for days now and cant find a solution.
Im trying to validate my Radiobuttons, when i submit the form i want it to validate if the radio buttons is empty and then add a is-invalid class from bootstrap, and if some of the buttons are checked i want it to add Class is-valid. When i submit the form right now it only adds class is-invalid.
HTML
<fieldset class="form-group col-md-6">
<div class="col">
<legend class="col-form-label col-md-6">NewsFrek </legend>
<div class="col-md-5">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1">
<label class="form-check-label" for="gridRadios1">
Every Week
</label>
</div>
<div class="form-check col">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Every month
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3">
<label class="form-check-label" for="gridRadios3">
Every year
</label>
</div>
</div>
</div>
</fieldset>
JavaScript
if(checkCheckBoxen.checked == true){
$(checkCheckBoxen).addClass('is-valid')
} else{
$(checkCheckBoxen).removeClass('is-valid')
$(checkCheckBoxen).addClass('is-invalid')
}
I actually don't know if this solves your problem because I am not sure if I understand it.
HTML:
<fieldset>
<div class="col">
<legend class="col-form-label col-md-6">NewsFrek </legend>
<div class="col-md-5">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1">
<label class="form-check-label" for="gridRadios1">
Every Week
</label>
</div>
<div class="form-check col">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Every month
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3">
<label class="form-check-label" for="gridRadios3">
Every year
</label>
</div>
</div>
</div>
</fieldset>
<a href='javascript:;' class="btn btn-primary ml-5 mt-2" onClick='test()'>Submit Me</>
Javascript:
test = () => {
$(".form-check-input").each(function(index, element) {
var $this = $(this);
if (this.checked) {
$(element).removeClass('is-invalid')
$(element).addClass('is-valid');
}else{
$(element).addClass('is-invalid')
}
});
}
Here's a codepen link!
function display() {
if(document.getElementById('GFG').checked) {
document.getElementById("disp").innerHTML
= document.getElementById("GFG").value
+ " radio button checked";
}
else if(document.getElementById('HTML').checked) {
document.getElementById("disp").innerHTML
= document.getElementById("HTML").value
+ " radio button checked";
}
else if(document.getElementById('JS').checked) {
document.getElementById("disp").innerHTML
= document.getElementById("JS").value
+ " radio button checked";
}
else {
document.getElementById("disp").innerHTML
= "No one selected";
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>
How to check whether a radio button
is selected with JavaScript ?
</title>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Click on the button to check whether<br>
a radio button is sected or not
</h3>
<form>
<input type="radio" name="GFG" id="GFG"
value="GeeksforGeeks">GeeksforGeeks<br>
<input type="radio" name="GFG" id="HTML"
value="HTML">HTML<br>
<input type="radio" name="GFG" id="JS"
value="JavaScript">JavaScript<br><br>
<button type="button" onclick="display()">
Submit
</button>
</form>
<br>
<div id="disp" style=
"color:green; font-size:18px; font-weight:bold;">
</div>
</body>
</html>
form validation before submitting the form, you can modify as you need

Get radio button label from different radio button groups and append to division

There are 3 radio button groups for user to select.
Division '#targetOption' will get whenever the user checked radio button label to be displayed. Below my code which is able to get the first checked radio button.
Example if user click on the first radio button group, #targetOption will show A. Then if user click on the second radio button group, #targetOption will show A B.
<div id="options">
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="a">
A
</label>
</div>
<div class="radio">
<label> <input type="radio" value="b">
B
</label>
</div>
<div class="radio">
<label> <input type="radio" value="c">
C
</label>
</div>
</div>
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="d">
D
</label>
</div>
<div class="radio">
<label> <input type="radio" value="e">
E
</label>
</div>
<div class="radio">
<label> <input type="radio" value="f">
F
</label>
</div>
</div>
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="g">
G
</label>
</div>
<div class="radio">
<label> <input type="radio" value="h">
H
</label>
</div>
<div class="radio">
<label> <input type="radio" value="i">
I
</label>
</div>
</div>
</div>
<div id="targetID"></div>
$('#options').click(function() {
$('#targetID').html('');
$("input[type='radio']:checked").each(function() {
var optiontext = $(this).parent().text();
console.log(optiontext);
$('#targetID').html(optiontext);
});
});
$('#targetID').html(optiontext); set #targetID to the current radio value in the loop instead of appending it to #targetID.
Use $('#targetID').html($('#targetID').html() + optiontext); instead.
Or you can create an array to store the checked values and update #targetID later

Make Text Bolder By selecting radio button

I m new to jquery,I am supposed to do the simple task.If i click on the radio button means the text along with that radio button has to be bolded.please help me with this one.My HTML Markup is here
<form role="form">
<p><b>What concerns you most as you manage your business?</b>(Select all that apply.)</p>
<div class="radio active">
<label>
<input type="radio" name="optradio">IT infrastructure alignment with business goals and growth<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Controlling capital and expense<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Managing financial risk<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Data security and privacy<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Flexibility of services to meet customer needs<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Political climate for business<img /></label>
</div>
<div class="form-group radio">
<label>
<input type="radio" name="optradio">
</label>
<textarea class="form-control" rows="2" placeholder="Other(please specify)" id="comment"></textarea>
</div>
</form>
And my jquery code is here
$(document).ready(function(e) {
$(".radio label input").click(function() {
$('.radio').each(function(event) {
if ($(this).hasClass('active')) {
$(this).css("font-family", "helveticabold");
$('.radio').removeClass('active');
if ($(this).next().hasClass('radio'))
$(this).next().addClass('active');
else
$('.radio:last-child').addClass('active');
return false;
}
});
});
});
I know it needs small changes in code please help me out guys
You don't need to use each as only one radio can be selected.
This will do:
Javascript:
$('.radio').on('click', function() {
$('.bold').removeClass('bold');
$(this).addClass('bold');
});
CSS:
.bold {
font-weight: 800;
}
Demo: https://jsfiddle.net/tusharj/3zzaLre0/
You can use $(this) selector for that
$(document).ready(function(e) {
$("input[type='radio']").click(function() {
$("input[type='radio']").parent().css('font-weight','');
$(this).parent().css('font-weight','bold');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form role="form">
<p><b>What concerns you most as you manage your business?</b>(Select all that apply.)</p>
<div class="radio active">
<label><input type="radio" name="optradio"><span>IT infrastructure alignment with business goals and growth<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Controlling capital and expense<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Managing financial risk<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Data security and privacy<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Flexibility of services to meet customer needs<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Political climate for business<img /></label>
</div>
<div class="form-group radio">
<label><input type="radio" name="optradio"></label><span>
<textarea class="form-control" rows="2" placeholder="Other(please specify)" id="comment"></textarea>
</div>
</form>

How do I get the label of the selected radio button using javascript

I have the following HTML
<div class="form-radios" id="edit-submitted-lunchset-lunch"><div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="1" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-1"> <label for="edit-submitted-lunchset-lunch-1" class="option">12:00 </label>
</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="2" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-2"> <label for="edit-submitted-lunchset-lunch-2" class="option">12:30 </label>
</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="3" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-3"> <label for="edit-submitted-lunchset-lunch-3" class="option">13:00 </label>
</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="4" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-4"> <label for="edit-submitted-lunchset-lunch-4" class="option">13:30 </label>
</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="5" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-5"> <label for="edit-submitted-lunchset-lunch-5" class="option">14:00 </label>
</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" checked="checked" value="6" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-6"> <label for="edit-submitted-lunchset-lunch-6" class="option">14:30 </label>
</div>
</div>
I am trying to retrieve the label associated with the radio button instead of the value using the following javascript but the variable "chosentime" is still "unassigned". I checked my code by throwing in a few alerts the alert(radios[i].innerhtml); throws unassigned
var radios = document.getElementsByName('submitted[lunchset][lunch]');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
alert(i);
alert(radios[i].value);
alert(radios[i].innerhtml);
chosentime = radios[i].innerhtml;
}
}
window.alert(chosentime);
}
Would appreciate any help. Thanks in advance.
You have to access the corresponding label separately, since it resides in a separate tag. Because the labels' for attribute is equal to its option's id, you can get to the label easily:
for(var i=0; i<radios.length; i++) {
var selector = 'label[for=' + radios[i].id + ']';
var label = document.querySelector(selector);
var text = label.innerHTML;
// do stuff
}
Also check out this fiddle
Using modern Javascript and CSS this is easy now.
input.labels
Give your button an id, and then give the label a for='id' making sure it is the same id as the button.
Buttons can have multiple labels so it returns a NodeList, if you only have 1 label, just take the first item in the list.
radioButtonClicked.labels[0];
Docs here.
Here is an example of how you would setup the HTML:
<div class="controls">
<input type="radio" name="select" id="large" class="radioButtons" checked>
<input type="radio" name="select" id="medium" class="radioButtons">
<input type="radio" name="select" id="small" class="radioButtons">
<input type="radio" name="select" id="tiny" class="radioButtons">
<label for="large" class="option option-1 checked">
<span class="optionLabel">Large</span>
</label>
<label for="medium" class="option option-2">
<span class="optionLabel">Medium</span>
</label>
<label for="small" class="option option-3">
<span class="optionLabel">Small</span>
</label>
<label for="tiny" class="option option-4">
<span class="optionLabel">Tiny</span>
</label>
</div>
A radiobutton have no innerhtml. You need to target the label. If it's always directly after the radio-button, try something like radios[i].nextSibling.innerhtml.

Categories

Resources