Here is my radio buttons' code:
<div class="col-md-6 alert alert-success" dir="rtl" >
Select an Option <br>
<label class="radio">
<input type="radio" name="sp" id="sp1" value="1" checked>
<span style="margin-right: 30px;">Option-1</span>
</label><br>
<label class="radio-inline">
<input type="radio" name="sp" id="sp2" value="2">
<span style="margin-right: 30px;">Option-2</span>
</label>
</div>
and I want to get value of button in following script audio src, so by clicking on radio button I can switch between media folder:
function PlayVerse(surat,n) {
var aud=document.getElementById("myaudio");
aud.src= "http://data.quranacademy.com/AUDIOS/Media-/01_"
+TxtFormat(surat,"000")
+"_"
+TxtFormat(n,"000")
+".mp3";
}
var x = document.getElementsByTagName("IMG");
var i;
for (i = 0; i < x.length; i++) {
x[i].style = 'display: inline-block; '
+'border: 1px solid #ddd; '
+'border-radius: 4px; padding: 5px;';
}
Try something like this with plain javascript
function PlayVerse(){
var radio = document.getElementsByName('sp');
var check;
for (var i = 0, length = radio.length; i < length; i++)
{
if (radio[i].checked)
{
console.log(radio[i].value);
check = radio[i].value;
break;
}
}
}
<div class="col-md-6 alert alert-success" dir="rtl" >Select an Option</br>
<label class="radio">
<input type="radio" name="sp" id="sp1" value="1" checked><span style="margin-right: 30px;">Option-1
</span></label></br>
<label class="radio-inline">
<input type="radio" name="sp" id="sp2" value="2"><span style="margin-right: 30px;">Pption-2
</span></label>
</div>
<button type = "button" onclick="PlayVerse();">Get Radio button value </button>
if you want to do something by clicking on radio button it can help you
window.onload=function(){
(function (){
var radios = document.getElementsByName('sp');
radios.forEach(function(radio){
radio.onclick = function(){
alert(this.value);
//do something
}
})
})();
}
Red color
Yelow color
<p id="demo"></p>
<script>
function myFunction() {
//var x = document.getElementById("myRadioRed").value;
//document.getElementById("demo").innerHTML = x;
var radios = document.getElementsByName('colors');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
// do whatever you want with the checked radio
document.getElementById("demo").innerHTML = radios[i].value;
// only one radio can be logically checked, don't check the rest
break;
}
}
}
</script>
<input type="radio" name="colors" value="red" id="myRadioRed" onchange="myFunction()" checked="checked" />Red color
<input type="radio" name="colors" value="yellow" id="myRadioYellow" onchange="myFunction()" />Yelow color
<p id="demo"></p>
function PlayVerse() {
var selected_radio_button_value = getRadioButtonValue("sp");
alert(selected_radio_button_value);
}
function getRadioButtonValue(elementName) {
var array1 = document.getElementsByName(elementName), rValue = null;
array1.forEach(function(element) {
if( element.checked ) {
rValue = element.value;
return true;
}
});
return rValue;
}
<div class="col-md-6 alert alert-success" dir="rtl" >Select an Option</br>
<label class="radio">
<input type="radio" name="sp" id="sp1" value="1" checked><span style="margin-right: 30px;">Option-1
</span></label></br>
<label class="radio-inline">
<input type="radio" name="sp" id="sp2" value="2"><span style="margin-right: 30px;">Pption-2
</span></label>
</div>
<button type = "button" onclick="PlayVerse();">Get Radio button value </button>
here you can get value of radio button using javascript i have created an function which will give you value of selected radio button you can store that value in variable and access it anywhere you want you can do it in both way
Here is how you can get value of radio button which one is checked. Get all NodeList by getElementsByName and iterate over each one and check if it is checked.
function getVal(elementName) {
var radios = document.getElementsByName(elementName), rValue = null;
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
rValue = radios[i].value;
break;
}
}
console.log(rValue);
}
<div class="col-md-6 alert alert-success" dir="rtl" >
Select an Option <br>
<label class="radio">
<input type="radio" onchange="getVal('sp')" name="sp" id="sp1" value="1" checked>
<span style="margin-right: 30px;">Option-1</span>
</label><br>
<label class="radio-inline">
<input type="radio" onchange="getVal('sp')" name="sp" id="sp2" value="2">
<span style="margin-right: 30px;">Option-2</span>
</label>
</div>
Related
I have seen that this works for most of users, but for some reason it doesn't for me. I use Google Chrome.
radioBut = document.querySelector(".rad-design")
getColor = function(){
for (i=0; i<radioBut.length; i++){
if (radioBut[i].checked){
console.log(radioBut[i)
}
}
Html
<form id = "rad">
<div class = "radioAll">
<label class="rad-label">
<input type="radio" class="rad-input" name="colList">
<div class="rad-design"></div>
</label>
<label class="rad-label">
<input type="radio" class="rad-input" name="colList">
<div class="rad-design"></div>
</label>
</div>
</form>
The selector should be document.querySelectorAll to get inputs as array and you should target to .rad-input class which is the input and not .rad-design which is the label. Also you should use checked for the inputs to make the input checked, its not check. Also you cannot set checked to two inputs with same name. If thats done only the last input with that name will be checked.
Working Fiddle
const radioBut = document.querySelectorAll(".rad-input")
getColor = function () {
for (i = 0; i < radioBut.length; i++) {
if (radioBut[i].checked) {
console.log(radioBut[i])
}
}
}
<form id="rad">
<div class="radioAll">
<label class="rad-label">
<input type="radio" class="rad-input" checked name="colList">
<div class="rad-design">One</div>
</label>
<label class="rad-label">
<input type="radio" class="rad-input" name="colList">
<div class="rad-design">Two</div>
</label>
</div>
<button type="button" onclick="getColor()">getColor</button>
</form>
document.querySelector returns just one element not an array/list, so in the for loop at i<radioBut.length radioBut.length is undefined, you need to use document.querySelectorAll() instead.
Also I noticed you have selected the div and not the input and you have a couple of syntax errors.
Maybe this can help you:
const radioBut = document.querySelectorAll(".rad-input")
const getColor = function(){
for (let i=0; i<radioBut.length; i++){
if (radioBut[i].checked){
console.log(radioBut[i].value)
}
}
}
console.log(getColor())
<form id = "rad">
<div class = "radioAll">
<label class="rad-label">
<input type="radio" class="rad-input" value='A' name="colList">
<div class="rad-design"></div>
</label>
<label class="rad-label">
<input type="radio" class="rad-input" value='B' name="colList" checked>
<div class="rad-design"></div>
</label>
</div>
</form>
Another options is to use the form element functionality
const form = document.getElementById('rad');
const getColor = function(){
return form.colList.value;
}
console.log(getColor())
<form id = "rad">
<div class = "radioAll">
<label class="rad-label">
<input type="radio" class="rad-input" value='A' name="colList">
<div class="rad-design"></div>
</label>
<label class="rad-label">
<input type="radio" class="rad-input" value='B' name="colList" checked>
<div class="rad-design"></div>
</label>
</div>
</form>
I have a list of 5 radio buttons, with the last radio button to select a manual entry text (an "other" option). I can't seem to get the form to work for all 5 possibilities - either it returns the radio value or the written value (currently only the written value and not any of the preset radio values). Can't get it to work for all of 5 possible returns.
Here's the javascript to either select text or clear it when unselected:
<script type= "text/javascript" >
function HandleRadioOtherBox(grp, txt)
{
var x, len = grp.length;
for (x =0; x<len; ++x)
{
if (grp[x].checked) break;
}
if (x < len && grp[x].value == txt.name)
{
txt.disabled = false;
txt.select();
txt.focus();
}
else
{
txt.value = "";
txt.disabled = true;
}
return true;
}
window.onload = function ()
{
var ele = document.forms[0].elements;
return HandleRadioOtherBox(ele['OPS'], ele['Country']);
}
</script>
And here, the HTML radio button portion:
<tr valign="top">
<td class="style3">Country: </td>
<td class="copy">
<input type="radio" name="OPS" value="United States" checked="checked"
onclick="return HandleRadioOtherBox(OPS, Country)" /> United States
<input type="radio" name="OPS" value="Canada"
onclick="return HandleRadioOtherBox(OPS, Country)" /> Canada
<input type="radio" name="OPS" value="England"
onclick="return HandleRadioOtherBox(OPS, Country)" /> England
<input type="radio" name="OPS" value="Australia"
onclick="return HandleRadioOtherBox(OPS, Country)" /> Australia <br />
<input type="radio" name="OPS" value="Country"
onclick="return HandleRadioOtherBox(OPS, Country)" /> Other Country:
<input type='text' name="Country" id="Country" maxlength='80' />
</td>
</tr>
Have spent many, many hours with not much of a hole made in the cement (yet). :-)
Help!
You can write a single function for your form which checks for two events:
radio button check
text input blur
and then gives an appropriate response based on which radio button registered a check event or whether the text input registered a blur event:
var radioButtons = document.querySelectorAll('input[type="radio"]');
var otherCountryRadio = document.querySelector('.other-country input[type="radio"]');
var otherCountryText = document.querySelector('.other-country input[type="text"]');
function returnValue() {
if (this === otherCountryRadio) {
otherCountryText.focus();
}
else {
if (this.value.match(/\w/)) {
console.log(this.value);
}
}
}
for (var i = 0; i < radioButtons.length; i++) {
radioButtons[i].addEventListener('change', returnValue, false);
}
otherCountryText.addEventListener('blur', returnValue, false);
div {
margin: 12px;
}
.other-country input[type="text"] {
visibility: hidden;
}
.other-country input:checked + input[type="text"] {
visibility: visible;
}
<form>
<div class="top-countries">
<label><input type="radio" name="OPS" value="United States" checked="checked" /> United States</label>
<label><input type="radio" name="OPS" value="Canada" /> Canada</label>
<label><input type="radio" name="OPS" value="England" /> England</label>
<label><input type="radio" name="OPS" value="Australia" /> Australia</label>
</div>
<div class="other-country">
<label>
<input type="radio" name="OPS" value="Other" /> Other Country
<input type="text" name="Country" />
</label>
</div>
</form>
Need to do validation on radio buttons onClick function.
HTML CODE :
<fieldset>
<div class="t box"><h4>T</h4>
<div class="radio-buttons-1">
<label class="radio-inline">
<input type="radio" name="tw" value="tw15"> 15
</label>
<label class="radio-inline">
<input type="radio" name="tw" value="tw16"> 16
</label>
</div>
<br>
<span class="error-messages-tw" style="display:none; color:#F44336; font-size:16px; font-weight:700;">
</span>
<br><br>
<div class="tw15 box2">
<select name="twg" class="form-control is_twg" onChange="showfield(this.options[this.selectedIndex].value)">
<option value="" >Select One</option>
<option value="twy">Yes</option><option value="twn">No</option>
</select>
<br>
<span class="error-messages-twg" style="display:none; color:#F44336; font-size:16px; font-weight:700;">
</span>
<br><br>
<div id="div8" class="showMe"><br>
<h4>Select One Option </h4>
<div class="radio-buttons-1">
<label class="radio-inline"><input type="radio" name="twga" value="a" > a
</label>
<label class="radio-inline"><input type="radio" name="twga" value="b" > b
</label>
<label class="radio-inline"><input type="radio" name="twga" value="c" > c
</label>
<label class="radio-inline"><input type="radio" name="twga" value="d"> d
</label>
</div>
<br>
<span class="error-messages-twga" style="display:none; color:#F44336; font-size:16px; font-weight:700;">
</span>
<br><br>
</div>
<button type="button" class="btn btn-next1">Next
<i class="fa fa-angle-right"></i>
</button>
</fieldset>
JS Code :
$('.msf-form .btn-next1').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
if(parent_fieldset.find("input[type='radio']").length > 0){
if (!$('input[name="twga"]:visible:checked').val()) {
$(".error-messages-twga").text("Please Select option").fadeIn();
next_step = false;
}
else {
$(".error-messages-twga").empty().fadeOut();
}
}
parent_fieldset.find('.is_twg:visible').each(function() {
if( $(this).val() == "" ) {
$(this).focus().css('border','1px solid #F44336');
$(".error-messages-twg").text("Please Select One Option").fadeIn();
next_step = false;
}
else{
$(this).focus().css('border','0px solid #F44336');
$(".error-messages-twg").empty().fadeOut();
}
});
});
Thanks in advance.
first of all your javascript code has missing brackets..
Replace your JS Code with this
$('.msf-form .btn-next').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
parent_fieldset.find('.is_abc').each(function() {
if( $(this).val() == "" ) {
$(".error-messages-abc").text("Please Select option").fadeIn();
next_step = false;
}
else{
$(".error-messages-abc").empty().fadeOut();
}
});
});
Now check again if its working.
Change your js code to,
$('.msf-form .btn-next').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
if (!$('input[name="abc"]:checked').val()) {
$(".error-messages-abc").text("Please Select option").fadeIn();
next_step = false;
} else {
$(".error-messages-abc").empty().fadeOut();
}
});
Hope this will solve your problem.
EDIT :
$('.msf-form .btn-next').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
if(parent_fieldset.find("input[type='radio']").length > 0){
if (!$('input[name="abc"]:checked').val()) {
$(".error-messages-abc").text("Please Select option").fadeIn();
next_step = false;
} else {
$(".error-messages-abc").empty().fadeOut();
}
}
});
Here, I am not sure, but parent_fieldset is your parent element, and inside that you want to check if radio buttons exist or not, so I kept condition considering the same.
I'm trying to create a 5 star radio picker.
This is the 1 of the radio buttons:
<input onclick="check(3)" type="radio" name="three" id="num_3_star" value="3">
After the method gets called and "3" is passed on this is my javascript function:
function check(stars)
{
for(i = 0 ; i < stars; i++)
{
document.getElementById("num_" + stars + "_star").checked = true;
}
}
When I run the code, it does not perform the checked to = true, though if remove the for loop, it works just fine.
Any ideas why the for loop is preventing from checking the radio boxes?
This is my entire code:
<script>
function check(stars)
{
for(i = 0 ; i < stars; i++)
{
document.getElementById("num_" + stars + "_star").checked = true;
}
}
</script>
<form>
<input onclick="check(1)" type="radio" name="one" id="num_1_star" value="1">
<input onclick="check(2)" type="radio" name="two" id="num_2_star" value="2">
<input onclick="check(3)" type="radio" name="three" id="num_3_star" value="3">
<input onclick="check(4)" type="radio" name="four" id="num_4_star" value="4">
<input onclick="check(5)" type="radio" name="five" id="num_5_star" value="5">
</form>
Thanks!
i had to be 1 initially as ids are starting from 1
Also reset all the checked status when click is initiated! Use i instead of stars in getElementById
Try this:
function check(stars) {
for (var j = 1; j <= 5; j++) {
document.getElementById("num_" + j + "_star").checked = false;
}
for (var i = 1; i <= stars; i++) {
document.getElementById("num_" + i + "_star").checked = true;
}
}
<input onclick="check(1)" type="radio" name="one" id="num_1_star" value="1">
<input onclick="check(2)" type="radio" name="two" id="num_2_star" value="2">
<input onclick="check(3)" type="radio" name="three" id="num_3_star" value="3">
<input onclick="check(4)" type="radio" name="four" id="num_4_star" value="4">
<input onclick="check(5)" type="radio" name="five" id="num_5_star" value="5">
Put var before the iteration variable i. You are creating a global variable.
I'm trying to sum the value of an input text changing dynamically with a radio that also changes dynamically. I'm doing something right but also something wrong because it doesn't sum when I want. The sum should show everytime the input text changes and not randomly disappear then you click a radio, just sum them.
the fiddle http://jsfiddle.net/7tFhx/
and the code
<form id="myForm" accept-charset="UTF-8">
<button type="button" class="btn-tt btn-primary btn-lg" disabled>1. Elige el color</button></br>
<label>
<input class="calc" id="fb1" type="radio" name="fb" value="10">
<img src="img/01.jpg"/>
</label>
<label>
<input class="calc" id="fb2" type="radio" name="fb" value="15">
<img src="img/02.jpg"/>
</label>
</br>
</br>
<button type="button" class="btn-tt btn-primary btn-lg" disabled>2. Elige las medidas</button></br>
<div class="row">
<div class="col-xs-2">
ancho (cm.)
<input id="ancho" type="text" class="form-control" placeholder="100">
</div>
<div class="col-xs-2">
alto (cm.)
<input id="alto" type="text" class="form-control" placeholder="100">
</div>
<div class="col-xs-2">
cantidad
<input id="cantidad" type="text" class="form-control" placeholder="1">
</div>
</div>
</br>
<button type="button" class="btn-tt btn-primary btn-lg" disabled>3. Posición mecanismo</button></br>
<label>
<input class="calc" id="fb3" type="radio" name="fb1" value="20">
<img src="img/01.jpg"/>
</label>
<label>
<input class="calc" id="fb4" type="radio" name="fb1" value="35">
<img src="img/02.jpg"/>
</label>
<div>
Total: <span id="price">0</span>€
</div>
</form>
js:
$(function(){
var mecanismoMedida = ['100','200'];
var mecanismoPrecio = ['50','80'];
$('#ancho').on('input',function(){
var j = 1, i = 0;
value = parseInt(($("#ancho").val() / 8) + 1);
for(i = 0; i < mecanismoMedida.length; i++){
if($("#ancho").val() >= mecanismoMedida[i] && $("#ancho").val() <
mecanismoMedida[j]){
value += mecanismoPrecio[i];
break;
} else {
j++;
}
}
$("#price").text(this.value + value);
});
$('#myForm input[type="radio"]').on('change', function () {
var sum = 0;
$("#myForm").find("input[type='radio']:checked").each(function () {
sum += parseInt(this.value);
});
$("#price").text(sum);
});
});
If it's a simple sum you're after, you can simply run an update code on the keyup and change events of all input elements:
$("input").change(function(){update();}).keyup(function(){update();});
To update them, first you need to check and see which one of the two radio buttons are checked and get its value:
function update(){
var p = 0;
for(var i = 0; i < $(".calc").val(); i++)
{
if($($(".calc")[i]).prop("checked") == true)
{
p += parseInt($($(".calc")[i]).val());
}
}
After that, simply parse the values of the textboxes to integers and add them to the value of the radio button. I created a custom function to do this, because if the boxes are empty, parsing them returns NaN:
p = parseInt(p);
p += parseInt(val2($("#ancho")));
p += parseInt(val2($("#alto")));
p += parseInt(val2($("#cantidad")));
p = parseInt(p);
$("#price").html(p);
}
function val2(elm){
if(isNaN(parseInt($(elm).val())))
return 0;
else
return parseInt($(elm).val());
}
JSFiddle