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>
Related
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>
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'm developing an application that display 2 graphs and contain radio buttons to change the time interval.
What i'm trying to do is, for example, if i select monthly in the 2nd set of radio buttons the first set should also have that option check.
<div class="panel-radio-buttons">
<form id="SettingMixRadioButtonsGroup1">
<label class="radio-inline"><input type="radio" name="radio1" value="1" id="BtnEnrollmentsInpatient"
ng-model="togglePefsBifsTimeFrame" ng-change='SetDay()'>Daily</label>
<label class="radio-inline"><input type="radio" name="radio1" value="2" id="BtnEnrollmentsInpatient2"
ng-model="togglePefsBifsTimeFrame" ng-change='SetWeek()' >Weekly</label>
<label class="radio-inline"><input type="radio" name="radio1" value="3" id="BtnEnrollmentsInpatient3"
ng-model="togglePefsBifsTimeFrame" ng-change='SetMonth()'>Monthly</label>
</form>
</div>
<div class="panel-radio-buttons">
<form id="SettingMixRadioButtonsGroup2">
<label class="radio-inline"><input type="radio" name="radio1" value="1" id="BtnEnrollmentsInpatient4"
ng-model="togglePefsBifsTimeFrame" ng-change='SetDay()'>Daily</label>
<label class="radio-inline"><input type="radio" name="radio1" value="2" id="BtnEnrollmentsInpatient5"
ng-model="togglePefsBifsTimeFrame" ng-change='SetWeek()' ng-checked="togglePefsBifsTimeFrame2" >Weekly</label>
<label class="radio-inline"><input type="radio" name="radio1" value="3" id="BtnEnrollmentsInpatient6"
ng-model="togglePefsBifsTimeFrame" ng-change='SetMonth()'>Monthly</label>
</form>
</div>
I've tried to checked using the following code in JS:
$scope.SetDay= function(){
document.getElementById("SettingMixRadioButtonsGroup1").child[0].checked = true;
document.getElementById("SettingMixRadioButtonsGroup2").child[0].checked = true;
};
But It won't perform the check on the child element... if i use the parent it works fine but its not a very scalable solution
This creates a handler for the change event for the radio buttons. It selects all radio buttons under panel-radio-buttons which have the same value attribute and sets their checked property to that of the element which triggered the event.
$("input[type=radio][name=radio1]").change(function() {
var val = $(this).attr("value");
var radio = $(".panel-radio-buttons input[type=radio][name=radio1][value=" + val + "]");
radio.prop("checked", $(this).is(":checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-radio-buttons">
<form id="SettingMixRadioButtonsGroup1">
<label class="radio-inline">
<input type="radio" name="radio1" value="1" id="BtnEnrollmentsInpatient" ng-model="togglePefsBifsTimeFrame" ng-change='SetDay()'>Daily</label>
<label class="radio-inline">
<input type="radio" name="radio1" value="2" id="BtnEnrollmentsInpatient2" ng-model="togglePefsBifsTimeFrame" ng-change='SetWeek()'>Weekly</label>
<label class="radio-inline">
<input type="radio" name="radio1" value="3" id="BtnEnrollmentsInpatient3" ng-model="togglePefsBifsTimeFrame" ng-change='SetMonth()'>Monthly</label>
</form>
</div>
<div class="panel-radio-buttons">
<form id="SettingMixRadioButtonsGroup2">
<label class="radio-inline">
<input type="radio" name="radio1" value="1" id="BtnEnrollmentsInpatient4" ng-model="togglePefsBifsTimeFrame" ng-change='SetDay()'>Daily</label>
<label class="radio-inline">
<input type="radio" name="radio1" value="2" id="BtnEnrollmentsInpatient5" ng-model="togglePefsBifsTimeFrame" ng-change='SetWeek()' ng-checked="togglePefsBifsTimeFrame2">Weekly</label>
<label class="radio-inline">
<input type="radio" name="radio1" value="3" id="BtnEnrollmentsInpatient6" ng-model="togglePefsBifsTimeFrame" ng-change='SetMonth()'>Monthly</label>
</form>
</div>
i have html page like this
<br>Q1A Making decisions after finding out what others think <br>
<input name="q1a" id="0" value="0" onclick="MyAlert()" type="radio" required>
<input name="q1a" id="1" value="1" onclick="MyAlert()" type="radio" required>
<input name="q1a" id="2" value="2" onclick="MyAlert()" type="radio" required>
<input name="q1a" id="3" value="3" onclick="MyAlert()" type="radio" required>
<input name="q1a" id="4" value="4" onclick="MyAlert()" type="radio" required>
<input name="q1a" id="5" value="5" onclick="MyAlert()" type="radio" required>
<br>Q1B Making decisions without consulting others <br>
<input name="q1b" id="6" value="0" onclick="MyAlert()" type="radio" required>
<input name="q1b" id="7" value="1" onclick="MyAlert()" type="radio" required>
<input name="q1b" id="8" value="2" onclick="MyAlert()" type="radio" required>
<input name="q1b" id="9" value="3" onclick="MyAlert()" type="radio" required>
<input name="q1b" id="10" value="4" onclick="MyAlert()" type="radio" required>
<input name="q1b" id="11" value="5" onclick="MyAlert()" type="radio" required>
if Q1A's value 1 is checked by user, at that moment i want to check Q1B's value 4. analogy is, Q1A's value + Q1B's value = 5.
how can i do this ?
my rough idea is:
<script>
function MyAlert()
{
var q1a = document.getElementByName("q1a").value();
if(q1a == 0){
$('#5[name="q1b"]').attr('checked', true);
}
}
</script>
but this is not working.
My Code Example
Thank you for help.
You have duplicate IDs, that won't work. getElementById() just returns the first element with that ID.
Instead of finding the element by its ID, find it by its value, a [value=] selector.
function MyAlert(button) {
if (button.name == 'q19a') {
var otherName = 'q19b';
var otherVal = 5 - button.value;
$(":radio[name=" + otherName + "][value=" + otherVal + "]").prop("checked", true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>Q19A Using common sense and conviction to make decisions <br>
<input name="q19a" value="0" onclick="MyAlert(this)" type="radio" required>
<input name="q19a" value="1" onclick="MyAlert(this)" type="radio" required>
<input name="q19a" value="2" onclick="MyAlert(this)" type="radio" required>
<input name="q19a" value="3" onclick="MyAlert(this)" type="radio" required>
<input name="q19a" value="4" onclick="MyAlert(this)" type="radio" required>
<input name="q19a" value="5" onclick="MyAlert(this)" type="radio" required>
<br>Q19B Using data, analysis, and reason to make decisions <br>
<input name="q19b" value="0" onclick="MyAlert(this)" type="radio" required>
<input name="q19b" value="1" onclick="MyAlert(this)" type="radio" required>
<input name="q19b" value="2" onclick="MyAlert(this)" type="radio" required>
<input name="q19b" value="3" onclick="MyAlert(this)" type="radio" required>
<input name="q19b" value="4" onclick="MyAlert(this)" type="radio" required>
<input name="q19b" value="5" onclick="MyAlert(this)" type="radio" required>
<br>Q20A Planning ahead based on projections <br>
<input name="q20a" value="0" onclick="MyAlert(this)" type="radio" required>
<input name="q20a" value="1" onclick="MyAlert(this)" type="radio" required>
<input name="q20a" value="2" onclick="MyAlert(this)" type="radio" required>
<input name="q20a" value="3" onclick="MyAlert(this)" type="radio" required>
<input name="q20a" value="4" onclick="MyAlert(this)" type="radio" required>
<input name="q20a" value="5" onclick="MyAlert(this)" type="radio" required>
<br>Q20B Planning as necessities arise, just before carrying out the plans <br>
<input name="q20b" value="0" onclick="MyAlert(this)" type="radio" required>
<input name="q20b" value="1" onclick="MyAlert(this)" type="radio" required>
<input name="q20b" value="2" onclick="MyAlert(this)" type="radio" required>
<input name="q20b" value="3" onclick="MyAlert(this)" type="radio" required>
<input name="q20b" value="4" onclick="MyAlert(this)" type="radio" required>
<input name="q20b" value="5" onclick="MyAlert(this)" type="radio" required>
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>