I can't seem to work out why my onclick() event fires twice when the user clicks on a star.
If the user clicks on the first star in the first set, it should output 1 and 0.5 to the console, but instead it outputs 1 and undefined and 1 and 0.5.
The first value is supposed to represent the value of the hidden input field, and the second is supposed to represent the value of the radio/star.
$(document).on('click', 'fieldset', function () {
console.log($(this).find("input[type='hidden']").val());
console.log($(this).find("input[type='radio']:checked").val());
});
fieldset,
label {
margin: 0;
padding: 0;
margin-bottom: 20px;
}
.rating {
border: none;
float: left;
}
.rating>input {
display: none;
}
.rating>label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating>.half:before {
content: "\f089";
position: absolute;
}
.rating>label {
color: #ddd;
float: right;
}
.rating>input:checked~label,
/* show gold star when clicked */
.rating:not(:checked)>label:hover,
/* hover current star */
.rating:not(:checked)>label:hover~label {
color: #FFD700;
}
/* hover previous stars in list */
.rating>input:checked+label:hover,
/* hover current star when changing rating */
.rating>input:checked~label:hover,
.rating>label:hover~input:checked~label,
/* lighten current selection */
.rating>input:checked~label:hover~label {
color: #FFED85;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<fieldset class="rating">
<input type="hidden" value="1">
<input type="radio" id="5star" name="rating" value="5" />
<label class="full" for="5star" title="Excellent"></label>
<input type="radio" id="4halfstar" name="rating" value="4.5" />
<label class="half" for="4halfstar" title="Good"></label>
<input type="radio" id="4star" name="rating" value="4" />
<label class="full" for="4star" title="Pretty good"></label>
<input type="radio" id="3halfstar" name="rating" value="3.5" />
<label class="half" for="3halfstar" title="Nice"></label>
<input type="radio" id="3star" name="rating" value="3" />
<label class="full" for="3star" title="Ok"></label>
<input type="radio" id="2halfstar" name="rating" value="2.5" />
<label class="half" for="2halfstar" title="Kinda bad"></label>
<input type="radio" id="2star" name="rating" value="2" />
<label class="full" for="2star" title="Bad"></label>
<input type="radio" id="1halfstar" name="rating" value="1.5" />
<label class="half" for="1halfstar" title="Meh"></label>
<input type="radio" id="1star" name="rating" value="1" />
<label class="full" for="1star" title="Umm"></label>
<input type="radio" id="halfstar" name="rating" value="0.5" />
<label class="half" for="halfstar" title="Worst"></label>
</fieldset>
<br><br>
<fieldset class="rating">
<input type="hidden" value="2">
<input type="radio" id="5star" name="rating" value="5" />
<label class="full" for="5star" title="Excellent"></label>
<input type="radio" id="4halfstar" name="rating" value="4.5" />
<label class="half" for="4halfstar" title="Good"></label>
<input type="radio" id="4star" name="rating" value="4" />
<label class="full" for="4star" title="Pretty good"></label>
<input type="radio" id="3halfstar" name="rating" value="3.5" />
<label class="half" for="3halfstar" title="Nice"></label>
<input type="radio" id="3star" name="rating" value="3" />
<label class="full" for="3star" title="Ok"></label>
<input type="radio" id="2halfstar" name="rating" value="2.5" />
<label class="half" for="2halfstar" title="Kinda bad"></label>
<input type="radio" id="2star" name="rating" value="2" />
<label class="full" for="2star" title="Bad"></label>
<input type="radio" id="1halfstar" name="rating" value="1.5" />
<label class="half" for="1halfstar" title="Meh"></label>
<input type="radio" id="1star" name="rating" value="1" />
<label class="full" for="1star" title="Umm"></label>
<input type="radio" id="halfstar" name="rating" value="0.5" />
<label class="half" for="halfstar" title="Worst"></label>
</fieldset>
Problem with you code is that clicking on label in a fieldset emits click event on the input. So you really have two clicks - first on label, second - on related input radio.
So, what you need to do is to track change event for radio instead tracking clicks on fieldset.
Update: And as Temani Afif mentioned in comments, as you have non-unique ids for inputs, clicking on radio in second fieldset still gets value of input[type='hidden'] in first fieldset. So, you need to replace you labels ids too.
More: a better practice for labels is wraping input in it, so you have markup something like:
<label class="half" title="Good">
<input type="radio" name="rating" value="4.5" />
</label>
In this case you don't need id and for as label works with element which is inside it.
$(document).on('change', 'input[type="radio"]', function (e) {
console.log(
$(this).val(),
$(this).parent().find("input[type='hidden']").val()
);
});
fieldset,
label {
margin: 0;
padding: 0;
margin-bottom: 20px;
}
.rating {
border: none;
float: left;
}
.rating>input {
display: none;
}
.rating>label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating>.half:before {
content: "\f089";
position: absolute;
}
.rating>label {
color: #ddd;
float: right;
}
.rating>input:checked~label,
/* show gold star when clicked */
.rating:not(:checked)>label:hover,
/* hover current star */
.rating:not(:checked)>label:hover~label {
color: #FFD700;
}
/* hover previous stars in list */
.rating>input:checked+label:hover,
/* hover current star when changing rating */
.rating>input:checked~label:hover,
.rating>label:hover~input:checked~label,
/* lighten current selection */
.rating>input:checked~label:hover~label {
color: #FFED85;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<fieldset class="rating">
<input type="hidden" value="1">
<input type="radio" id="5star" name="rating" value="5" />
<label class="full" for="5star" title="Excellent"></label>
<input type="radio" id="4halfstar" name="rating" value="4.5" />
<label class="half" for="4halfstar" title="Good"></label>
<input type="radio" id="4star" name="rating" value="4" />
<label class="full" for="4star" title="Pretty good"></label>
<input type="radio" id="3halfstar" name="rating" value="3.5" />
<label class="half" for="3halfstar" title="Nice"></label>
<input type="radio" id="3star" name="rating" value="3" />
<label class="full" for="3star" title="Ok"></label>
<input type="radio" id="2halfstar" name="rating" value="2.5" />
<label class="half" for="2halfstar" title="Kinda bad"></label>
<input type="radio" id="2star" name="rating" value="2" />
<label class="full" for="2star" title="Bad"></label>
<input type="radio" id="1halfstar" name="rating" value="1.5" />
<label class="half" for="1halfstar" title="Meh"></label>
<input type="radio" id="1star" name="rating" value="1" />
<label class="full" for="1star" title="Umm"></label>
<input type="radio" id="halfstar" name="rating" value="0.5" />
<label class="half" for="halfstar" title="Worst"></label>
</fieldset>
<br><br>
<fieldset class="rating">
<input type="hidden" value="2">
<input type="radio" id="second-5star" name="rating" value="5" />
<label class="full" for="second-5star" title="Excellent"></label>
<input type="radio" id="second-4halfstar" name="rating" value="4.5" />
<label class="half" for="second-4halfstar" title="Good"></label>
<input type="radio" id="second-4star" name="rating" value="4" />
<label class="full" for="second-4star" title="Pretty good"></label>
<input type="radio" id="second-3halfstar" name="rating" value="3.5" />
<label class="half" for="second-3halfstar" title="Nice"></label>
<input type="radio" id="second-3star" name="rating" value="3" />
<label class="full" for="second-3star" title="Ok"></label>
<input type="radio" id="second-2halfstar" name="rating" value="2.5" />
<label class="half" for="second-2halfstar" title="Kinda bad"></label>
<input type="radio" id="second-2star" name="rating" value="2" />
<label class="full" for="second-2star" title="Bad"></label>
<input type="radio" id="second-1halfstar" name="rating" value="1.5" />
<label class="half" for="second-1halfstar" title="Meh"></label>
<input type="radio" id="second-1star" name="rating" value="1" />
<label class="full" for="second-1star" title="Umm"></label>
<input type="radio" id="second-halfstar" name="rating" value="0.5" />
<label class="half" for="second-halfstar" title="Worst"></label>
</fieldset>
Related
Hello I need your help to find a way to save my radio input and print it to the screen so I know that it is saved. I have this HTML:
if (document.getElementById('a1').checked) {
rate_value1 = document.getElementById('a1').value;
document.writeln(rate_value1);
}
if (document.getElementById('a2').checked) {
rate_value2 = document.getElementById('a2').value;
document.writeln(rate_value2);
}
if (document.getElementById('a3').checked) {
rate_value3 = document.getElementById('a3').value;
document.writeln(rate_value3);
}
if (document.getElementById('a4').checked) {
rate_value4 = document.getElementById('a4').value;
document.writeln(rate_value4);
}
if (document.getElementById('a5').checked) {
rate_value5 = document.getElementById('a5').value;
document.writeln(rate_value5);
}
<div class='input-form' id="div1">
<h4 id="myText" contenteditable="true">Customize</h4>
<input type="radio" name="rating" value="5" id="a5" ><label for="5">5</label>
<input type="radio" name="rating" value="4" id="a4" ><label for="4">4</label>
<input type="radio" name="rating" value="3" id="a3" ><label for="3">3</label>
<input type="radio" name="rating" value="2" id="a2" ><label for="2">2</label>
<input type="radio" name="rating" value="1" id="a1" ><label for="1">1</label>
</div>
<button type='button' id='but_add' value='Add new'>Add Rating Nums</button>
Thank you for your time
Try creating another element above your <div> and target it whenever you click a radio button.
<p id="details"></p>
<div>
<input type="radio" name="rating" value="5" id="a5" Onclick="display(this.value)" ><label >5</label>
</div>
In your js:
<script>
function display(x){
document.getElementById('details').innerHTML = x;
}
</script>
i have this star rating system for my webpage, where you can select a star rating (1-5) and i wanted to send the form when someone clicks any of the stars, but right now, it does not send the radio button value if i check something, i think its because it sends the form before it checks the radio button. Is there any better way to send the form with the radio button value onclick?
<form method="POST" action="/rating" accept-charset="UTF-8"><input name="_token" type="hidden" value="vySkIFDPujcmxjfs83m3OwojcbPIaHuuMhKvVErx">
<input name="movie_id" type="hidden" value="2">
<input id="star5" name="rating" type="radio" value="5">
<label for="star5" class="full" title="Awesome" onclick="this.form.submit()"> </label>
<input id="star4" name="rating" type="radio" value="4">
<label for="star4" class="full" title="Good" onclick="this.form.submit()"> </label>
<input id="star3" name="rating" type="radio" value="3">
<label for="star3" class="full" title="Mediocre" onclick="this.form.submit()"> </label>
<input id="star2" name="rating" type="radio" value="2">
<label for="star2" class="full" title="Bad" onclick="this.form.submit()"> </label>
<input id="star1" name="rating" type="radio" value="1">
<label for="star1" class="full" title="Horrible" onclick="this.form.submit()"> </label>
</form>
Use onchange on the <input /> elements instead:
<form method="POST" action="/rating" accept-charset="UTF-8"><input name="_token" type="hidden" value="vySkIFDPujcmxjfs83m3OwojcbPIaHuuMhKvVErx">
<input name="movie_id" type="hidden" value="2">
<label for="star5" class="full" title="Awesome">
<input id="star5" name="rating" type="radio" value="5" onchange="this.form.submit()">
</label>
<label for="star4" class="full" title="Good">
<input id="star4" name="rating" type="radio" value="4" onchange="this.form.submit()">
</label>
<label for="star3" class="full" title="Mediocre">
<input id="star3" name="rating" type="radio" value="3" onchange="this.form.submit()">
</label>
<label for="star2" class="full" title="Bad">
<input id="star2" name="rating" type="radio" value="2" onchange="this.form.submit()">
</label>
<label for="star1" class="full" title="Horrible">
<input id="star1" name="rating" type="radio" value="1" onchange="this.form.submit()">
</label>
</form>
I have matching input and label elements:
console.log('LABEL:', $('label[for="8"]'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad_numbers">
<input type="radio" name="ad_pos" value="6" />6<br>
<input type="radio" name="ad_pos" value="7" />7<br>
<input type="radio" name="ad_pos" value="8" checked/>8<br>
<input type="radio" name="ad_pos" value="9" />9<br>
<input type="radio" name="ad_pos" value="10" />10<br>
<input type="radio" name="ad_pos" value="11" />11<br>
<input type="radio" name="ad_pos" value="12" />12<br>
</div>
<div class="ad_numbers ad_prices">
<label for="6" id="6">$50</label>
<label for="7" id="7">$45</label>
<label for="8" id="8">$40</label>
<label for="9" id="9">$35</label>
<label for="10" id="10">$30</label>
<label for="11" id="11">$25</label>
<label for="12" id="12">$20</label>
</div>
Say input 8 is checked, what would the jquery selector look like to target the accompanying label element?
You don't connect input and label based on value, but using for on the label matching id on the input:
const ad_pos_radios = document.querySelectorAll('[name=ad_pos]')
const ad_pos_labels = document.querySelectorAll('ad_numbers.ad_prices label')
for (const ad of Array.from(ad_pos_radios)) {
ad.addEventListener('change', () => {
console.log(document.querySelector(':checked').labels[0].textContent);
})
}
<div class="ad_numbers">
<input type="radio" name="ad_pos" id="6" value="6" />6<br>
<input type="radio" name="ad_pos" id="7" value="7" />7<br>
<input type="radio" name="ad_pos" id="8" value="8" checked/>8<br>
<input type="radio" name="ad_pos" id="9" value="9" />9<br>
<input type="radio" name="ad_pos" id="10" value="10" />10<br>
<input type="radio" name="ad_pos" id="11" value="11" />11<br>
<input type="radio" name="ad_pos" id="12" value="12" />12<br>
</div>
<div class="ad_numbers ad_prices">
<label for="6">$50</label>
<label for="7">$45</label>
<label for="8">$40</label>
<label for="9">$35</label>
<label for="10">$30</label>
<label for="11">$25</label>
<label for="12">$20</label>
</div>
If you can not modify the HTML code properly, as mentioned by #connexo.
You can use this selector:
".ad_numbers input[type=radio][checked]"
Something like this:
$(function() {
var checked = $(".ad_numbers input[type=radio][checked]")[0];
console.log($("#" + checked.value).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
down vote favorite I have matching input and label elements:
<div class="ad_numbers">
<input type="radio" name="ad_pos" value="6" />6<br>
<input type="radio" name="ad_pos" value="7" />7<br>
<input type="radio" name="ad_pos" value="8" checked/>8<br>
<input type="radio" name="ad_pos" value="9" />9<br>
<input type="radio" name="ad_pos" value="10" />10<br>
<input type="radio" name="ad_pos" value="11" />11<br>
<input type="radio" name="ad_pos" value="12" />12<br>
</div>
<div class="ad_numbers ad_prices">
<label for="6" id="6">$50</label>
<label for="7" id="7">$45</label>
<label for="8" id="8">$40</label>
<label for="9" id="9">$35</label>
<label for="10" id="10">$30</label>
<label for="11" id="11">$25</label>
<label for="12" id="12">$20</label>
</div>
Update:
Based on #connexo suggestion.
The proper selector is:
".ad_numbers input[type=radio]:checked"
$(function() {
var checked = $(".ad_numbers input[type=radio]:checked")[0];
console.log($("#" + checked.value).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
down vote favorite I have matching input and label elements:
<div class="ad_numbers">
<input type="radio" name="ad_pos" value="6" />6<br>
<input type="radio" name="ad_pos" value="7" />7<br>
<input type="radio" name="ad_pos" value="8" checked/>8<br>
<input type="radio" name="ad_pos" value="9" />9<br>
<input type="radio" name="ad_pos" value="10" />10<br>
<input type="radio" name="ad_pos" value="11" />11<br>
<input type="radio" name="ad_pos" value="12" />12<br>
</div>
<div class="ad_numbers ad_prices">
<label for="6" id="6">$50</label>
<label for="7" id="7">$45</label>
<label for="8" id="8">$40</label>
<label for="9" id="9">$35</label>
<label for="10" id="10">$30</label>
<label for="11" id="11">$25</label>
<label for="12" id="12">$20</label>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type='text/javascript'>
$(function() {
$("input[type=radio][name=ad_pos]").on("change", function() {
var selected = $("input[type=radio][name=ad_pos]:checked").val();
console.log(selected);
if (selected) {
var label = $('.ad_numbers.ad_prices label[for="' + selected + '"]').text();
console.log(label);
}
});
});
</script>
<div class="ad_numbers">
<input type="radio" name="ad_pos" value="6" checked />6<br>
<input type="radio" name="ad_pos" value="7" />7<br>
<input type="radio" name="ad_pos" value="8" />8<br>
<input type="radio" name="ad_pos" value="9" />9<br>
<input type="radio" name="ad_pos" value="10" />10<br>
<input type="radio" name="ad_pos" value="11" />11<br>
<input type="radio" name="ad_pos" value="12" />12<br>
</div>
<div class="ad_numbers ad_prices">
<label for="6" id="6">$50</label>
<label for="7" id="7">$45</label>
<label for="8" id="8">$40</label>
<label for="9" id="9">$35</label>
<label for="10" id="10">$30</label>
<label for="11" id="11">$25</label>
<label for="12" id="12">$20</label>
</div>
I am a bit new to JS and HTML5. I am creating a simple quiz, just for the heck of it. I know need to make it possible for each question to be marked "correct" independently of the others. How can I do that through JS, or even CSS/HTML5? I have a feeling I need to change the jquery file, but I am a little stuck on how to do it. The quiz works perfect, just the way I want, but as a user selects an answer, I'd like to display correct or wrong. Thank you!
if (jQuery) {
var checkAnswers = function() {
var answerString = "";
var answers = $(":checked");
answers.each(function(i) {
answerString = answerString + answers[i].value;
});
$(":checked").each(function(i) {
var answerString = answerString + answers[i].value;
});
checkIfCorrect(answerString);
};
var checkIfCorrect = function(theString) {
if (parseInt(theString, 16) === 811124566973) {
$("body").addClass("correct");
$("h1").text("You Win!");
}
};
$("#question1").show();
};
if (impress) {
$("#question2").show();
};
if (atom) {
$("#question3").show();
};
if (createjs) {
$("#question4").show();
};
if (me) {
$("#question5").show();
};
if (require) {
$("#question6").show();
};
if ($().playground) {
$("#question7").show();
};
if (jaws) {
$("#question8").show();
};
if (enchant) {
$("#question9").show();
};
if (Crafty) {
$("#question10").show();
};
body {
margin-left: 50px;
}
#question1,
#question2,
#question3,
#question4,
#question5,
#question6,
#question7,
#question8,
#question9,
#question10 {
display: none;
}
canvas {
display: none;
}
.correct {
background-color: #24399f;
color: white;
}
#question1 {
background-color: #EBF5D1;
}
#question2 {
background-color: #E0F0D4;
}
#question3 {
background-color: #D6EBD6;
}
#question4 {
background-color: #CCE6D9;
}
#question5 {
background-color: #C2E0DB;
}
#question6 {
background-color: #B8DBDE;
}
#question7 {
background-color: #ADD6E0;
}
#question8 {
background-color: #A3D1E3;
}
#question9 {
background-color: #99CCE6;
}
#question10 {
background-color: #8FC7E8;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Quiz</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body onclick="checkAnswers();">
<h1>Quiz</h1>
<div id="quiz">
<div id="question1">
<div class="question">Which is not a main file type that we use to make websites?</div>
<input type="radio" name="question1" value="a" />
<label>.html</label>
<input type="radio" name="question1" value="b" />
<label>.exe</label>
<input type="radio" name="question1" value="c" />
<label>.js</label>
<input type="radio" name="question1" value="d" />
<label>.css</label>
</div>
<br />
<div id="question2">
<div class="question">A JavaScript object is wrapped by what charaters?</div>
<input type="radio" name="question2" value="a" />
<label>[]</label>
<input type="radio" name="question2" value="b" />
<label>;;</label>
<input type="radio" name="question2" value="c" />
<label>{}</label>
<input type="radio" name="question2" value="d" />
<label>()</label>
</div>
<br />
<div id="question3">
<div class="question">Moles are which of the following?</div>
<input type="radio" name="question3" value="a" />
<label>Omniverous</label>
<input type="radio" name="question3" value="b" />
<label>Adorable</label>
<input type="radio" name="question3" value="c" />
<label>Whackable</label>
<input type="radio" name="question3" value="d" />
<label>All of the above</label>
</div>
<br />
<div id="question4">
<div class="question">In Japanese "か" is prounounced...</div>
<input type="radio" name="question4" value="a" />
<label>ka</label>
<input type="radio" name="question4" value="b" />
<label>ko</label>
<input type="radio" name="question4" value="c" />
<label>ke</label>
<input type="radio" name="question4" value="d" />
<label>ki</label>
</div>
<br />
<div id="question5">
<div class="question">The gravitational constant on earth is approximately...</div>
<input type="radio" name="question5" value="a" />
<label>10m/s^2</label>
<input type="radio" name="question5" value="b" />
<label>.809m/s^2</label>
<input type="radio" name="question5" value="c" />
<label>9.81m/s^2</label>
<input type="radio" name="question5" value="d" />
<label>84.4m/s^2</label>
</div>
<br />
<div id="question6">
<div class="question">45 (in base 10) is what in binary (base 2)?</div>
<input type="radio" name="question6" value="a" />
<label>101101</label>
<input type="radio" name="question6" value="b" />
<label>110011</label>
<input type="radio" name="question6" value="c" />
<label>011101</label>
<input type="radio" name="question6" value="d" />
<label>101011</label>
</div>
<br />
<div id="question7">
<div class="question">4
<< 2=. ..</div>
<input type="radio" name="question7" value="a" />
<label>16</label>
<input type="radio" name="question7" value="b" />
<label>4</label>
<input type="radio" name="question7" value="c" />
<label>2</label>
<input type="radio" name="question7" value="d" />
<label>8</label>
</div>
<br />
<div id="question8">
<div class="question">Given the lengths of two sides of a right triangle (one with a 90 degree angle), how would you find the hypotenuse?</div>
<input type="radio" name="question8" value="a" />
<label>Pi*Radius^2</label>
<input type="radio" name="question8" value="b" />
<label>Pythagorean Theorem</label>
<input type="radio" name="question8" value="c" />
<label>Calculator?</label>
<input type="radio" name="question8" value="d" />
<label>Sin(side1 + side2)</label>
</div>
<br />
<div id="question9">
<div class="question">True or False: All games must run at at least 60 frames per second to be any good.</div>
<input type="radio" name="question9" value="a" />
<label>True</label>
<input type="radio" name="question9" value="b" />
<label>False</label>
</div>
<br />
<div id="question10">
<div class="question">Using a server can help you to...</div>
<input type="radio" name="question10" value="a" />
<label>hide your code.</label>
<input type="radio" name="question10" value="b" />
<label>have a performant game.</label>
<input type="radio" name="question10" value="c" />
<label>create shared experiences for players.</label>
<input type="radio" name="question10" value="d" />
<label>all of the above.</label>
</div>
</div>
<script src="jquery.js"></script>
<script src="impress.js"></script>
<!-- atom needs this to run -->
<canvas></canvas>
<script src="atom.js"></script>
<script src="easel.js"></script>
<script src="melon.js"></script>
<script src="yabble.js"></script>
<script src="jquery.gamequery.js"></script>
<script src="jaws.js"></script>
<script src="enchant.js"></script>
<script src="crafty.js"></script>
<script src="game.js"></script>
</body>
</html>
I don't know if I understand well but did you try it with onChange event? At first I recommend to create JSON file with your correct answers, and after every checkbox must be answer element. Something like this:
jQuery('your-form your-input').on('change', function(e) {
e.preventDefault();
var actualAnswer = (jQuery(this).val() == 'your-correct-answer-in-json') ? 'Correct' : 'Incorrect';
/* add actualAnswer to element, for example with parent and find answer element to actual input */
});
I want to add innerhtml to my label, when a radio button is checked.
By default the label does not have any value.
I want to change the value of the label based on the value of the radio button.
But I want to define my own value for this.
So the label for value 1 should be: "Label 1"
Label for value 2 should be "Label 2" etc.
I use this for star rating, so when a next radio button is checked, it should remove the value of the previous label.
This is my current html:
<ul class="rating">
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio">
<label class="full" for="Degelijkheid-1-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio">
<label class="full" for="Degelijkheid-2-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio">
<label class="full" for="Degelijkheid-3-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio">
<label class="full" for="Degelijkheid-4-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio">
<label class="full" for="Degelijkheid-5-5"></label>
</span>
</li>
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[2]" id="Design-1-5" value="1" class="radio">
<label class="full" for="Design-1-5"></label>
<input type="radio" name="ratings[2]" id="Design-2-5" value="2" class="radio">
<label class="full" for="Design-2-5"></label>
<input type="radio" name="ratings[2]" id="Design-3-5" value="3" class="radio">
<label class="full" for="Design-3-5"></label>
<input type="radio" name="ratings[2]" id="Design-4-5" value="4" class="radio">
<label class="full" for="Design-4-5"></label>
<input type="radio" name="ratings[2]" id="Design-5-5" value="5" class="radio">
<label class="full" for="Design-5-5"></label>
</span>
</li>
</ul>
Try solution acc. to you.
You can combile "Label" as string to rvalue variable.
i.e var rvalue="Label"+$(this).attr('value');
like as:
$('.radio[name="rating[2]"]').change(function(){
var rvalue='';
if($(this).attr('value')=='1')
{
rvalue='Bad';
}
else if($(this).attr('value')=='5')
{
rvalue='Amazing';
}
$(this).parent('.ratingSelector').find('.full').html('');
$(this).next('label').html(rvalue);
});
Working example: http://jsfiddle.net/7wLbyn2c/4/
<input type="radio" onClick="getInnerHtml($(this))">
// call getInnerHtml function in all radio buttons and then write the function
function getInnerHtml(thisVal) {
alert(thisVal.innerHtml());
}
use the below code
<input type="radio" name = 'somename' onclick="getvalue(this)">
<script>
function getvalue(ref) {
alert(ref.value);
}
</script>
We are just passing the reference to this particular radio button as parameter in the onclick event function and then simply use .value attribute used in javascript. You can also use onchange event.
Edited
function getvalue(ref) {
for(i=ref.value;i<=5;i++)
{
$(this).next('label').appned(i);
}
}
Try this
$('input:radio').click(function() {
$('label').text('');
$(this).next('label').html('Label '+$(this).attr('value'));
});
http://jsfiddle.net/nm8ha2p9/1/
Well I did something with pure JS. I hope it helps you. It's on codepen. This are functions I used:
function setValue(obj)
{
if(obj.checked){
clearLabels();
var lbls = document.getElementsByTagName("LABEL");
var lbl = undefined;
for(var i=0;i<lbls.length; i++)
{
if(lbls[i].htmlFor == obj.id)
{
lbl = lbls[i];
break;
}
}
if(lbl != undefined){
lbl.innerHTML = obj.value;
}
}
}
function clearLabels()
{
var lbls = document.getElementsByTagName("LABEL");
for(var i=0;i<lbls.length;i++){
lbls[i].innerHTML="";
}
}
Using pure JS, no jQuery.
Labels are set in your HTML, so you can easily have whatever you want.
Labels use a class to hide them when not wanted.
Uses delegated event listener, listening for click to bubble.
[].forEach.call(document.querySelectorAll('.ratingSelector'), function (node) {
var labels = node.querySelectorAll('.full');
node.addEventListener('click', function (evt) {
var target = evt.target;
if (target.classList.contains('radio')) {
[].forEach.call(labels, function (label) {
label.classList.add('hidden');
});
evt.target.nextElementSibling.classList.remove('hidden');
}
}, false);
});
.hidden {
display:none
}
<ul class="rating">
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio">
<label class="full hidden" for="Degelijkheid-1-5">Label 1</label>
<input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio">
<label class="full hidden" for="Degelijkheid-2-5">Label 2</label>
<input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio">
<label class="full hidden" for="Degelijkheid-3-5">Label 3</label>
<input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio">
<label class="full hidden" for="Degelijkheid-4-5">Label 4</label>
<input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio">
<label class="full hidden" for="Degelijkheid-5-5">Label 5</label>
</span>
</li>
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[2]" id="Design-1-5" value="1" class="radio">
<label class="full hidden" for="Design-1-5">Label 1</label>
<input type="radio" name="ratings[2]" id="Design-2-5" value="2" class="radio">
<label class="full hidden" for="Design-2-5">Label 2</label>
<input type="radio" name="ratings[2]" id="Design-3-5" value="3" class="radio">
<label class="full hidden" for="Design-3-5">Label 3</label>
<input type="radio" name="ratings[2]" id="Design-4-5" value="4" class="radio">
<label class="full hidden" for="Design-4-5">Label 4</label>
<input type="radio" name="ratings[2]" id="Design-5-5" value="5" class="radio">
<label class="full hidden" for="Design-5-5">Label 5</label>
</span>
</li>
</ul>