I have a small problem. What is wrong with this function? I have no idea. I need pop-up alert window when the radio button is selected. Thanks for every reply.
HTML
<input type="radio" name="radioButton" class="choice" value="1">
<input type="radio" name="radioButton" class="choice" value="2">
<input type="radio" name="radioButton" class="choice" value="3">
JavaScript
var FormFields =
{
init: function()
{
var radio = document.getElementsByName("radioButton");
radio.onchange = FormFields.showAlert;
},
showAlert: function()
{
alert("Bye!");
},
};
Because getElementsByName returns a NodeList you'll need to apply the event callback to each input:
var radios = document.getElementsByName("radioButton");
for(var i = 0;i < radios.length;i++){
radios[i].onchange = FormFields.showAlert;
}
Demo: http://jsfiddle.net/louisbros/H7TdB/
getElementsByName gets a list of elements so you are calling onChange on the array. https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByName
You want to loop through the elements and apply the onChange.
Related
I am not able to get second and third radio buttons values.
my code just gives me the first radio button value when I select this.
this is my radio buttons and the function by which I want to store the value of the radio button.
<input type="radio" id="choiced" name="Q0_choice" value="one">
<input type="radio" id="choiced" name="Q0_choice" value="2">
<input type="radio" id="choiced" name="Q0_choice" value="iii">
next.onclick = function () {
if (document.getElementById('choiced').checked) {
ans = document.getElementById('choiced').value;
}
}
This is because ID values must be unique - so it's grabbing the first element on the page it finds with the ID of choiced. You'll want to give each a unique ID, and you can use the name attribute for grouping radio button. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
Try
document.querySelector('#choiced:checked')
This query return checked radio button.
You should not have the same ID for those inputs:
<input type="radio" id="choiced" name="Q0_choice" value="one">
<input type="radio" id="choiced2" name="Q0_choice" value="2">
<input type="radio" id="choiced3" name="Q0_choice" value="iii">
Then to get the selected you have to get them by it's name property. You can loop to check which one is selected.
next.onclick = function () {
const radios = document.getElementsByName('Q0_choice');
radios.forEach((radio) => {
if (radio.checked){
console.log(radio.value);
}
})
}
I'm having trouble display value of radio button
when I click on the radio buttons,
I want to see all the values of buttons in the box.
its shows values on the console but in the box, it only shows 'carrot' which is one of ingredients in the array.
function mixRecipeBox(){
var mixIngredients = document.getElementsByTagName('input');
for(i=0; i<mixIngredients.length; i++){
if(mixIngredients[i].checked)
console.log(mixIngredients[i].value);
document.getElementById('mixbox').innerHTML = mixIngredients[i].value;
}
}
You are replacing all data of mixbox in each loop. use this to
append data.
You forgot {} for if block
Empty mixbox on start of function.
use checkbox instead of radio so user can discard choice.
function mixRecipeBox(){
document.getElementById('mixbox').innerHTML=""
var currentHTML;
var mixIngredients = document.getElementsByTagName('input');
for(i=0; i<mixIngredients.length; i++){
if(mixIngredients[i].checked)
{
console.log(mixIngredients[i].value);
currentHTML= document.getElementById('mixbox').innerHTML;
document.getElementById('mixbox').innerHTML = currentHTML+mixIngredients[i].value;
}
}
}
<input type="checkbox" value="1" onchange="mixRecipeBox()">
<input type="checkbox" value="2" onchange="mixRecipeBox()">
<input type="checkbox" value="3" onchange="mixRecipeBox()">
<input type="checkbox" value="4" onchange="mixRecipeBox()">
<div id="mixbox"></div>
Loop over each radio element and assign a click event handler.
The radio button click handler first clears the mixbox, then loops over each radio element and puts checked radio button values in the mixbox.
<div id="rads">
<input type="radio" value="one" />1
<input type="radio" value="two" />2
<input type="radio" value="three" />3
</div>
<div id="mixbox"></div>
<script>
var rads = document.querySelectorAll('#rads input[type=radio]');
var mixbox = document.getElementById('mixbox');
Array.prototype.forEach.call(rads, function (elem) {
elem.addEventListener('click', function (evt) {
mixbox.innerHTML = '';
Array.prototype.forEach.call(rads, function (ele) {
if ( ele.checked ) { mixbox.innerHTML += ele.value + '<br>'; }
})
})
})
</script>
JSFiddle
This question already has answers here:
IE8 & IE7 onchange event is triggered only after repeated selection
(3 answers)
Closed 8 years ago.
I have few radio buttons. On click at any radio button different function calls. I don't want to call the function if radio button is already checked. To do that i used 'onchange' attribute on radio elements. But the problem is that it doesn't work in ie7. it work when it looses the focus. Is there any alternate or solution for this. i can't use jquery as well.
<input type="radio" onchange="test1()"/>A
<input type="radio" onchange="test2()"/>B
<input type="radio" onchange="test3()"/>C
<input type="radio" onchange="test4()"/>D
Try this one, check output in console (F12),
you can add all function to this code
<form name="myForm">
<input type="radio" name="myRadios" value="1" />
<input type="radio" name="myRadios" value="2" />
<input type="radio" name="myRadios" value="3" />
</form>
<script>
var rad = document.myForm.myRadios;
var prev = null;
for(var i = 0; i < rad.length; i++) {
rad[i].onclick = function() {
(prev)? console.log('previous - ' + prev.value):null;
if(this !== prev) {
prev = this;
}
console.log('current - ' + this.value)
};
}
</script>
Change it to onclick event and it should work as you wish.
I want to access the already selected radiobutton value in the second function call.
This is my code; can you please tell me where I am doing wrong? So when I click on checkbox I need to get already selected radio button value.
<input name="travel_type" id="arrival_1" type="radio" value="eclass_a" onClick="calculateTotal(this.value);checked="checked ">Arrivals $75
<input name="travel_type" id="dept_1" type="radio" value="eclass_d" onClick="calculateTotal(this.value); ">Departure $70
<input name="travel_type" id="pp_1" type="radio" value="eclass_p" onClick="calculateTotal(this.value);">Point to Point $70
<input name="travel_type" id="hourly_1" type="radio" value="eclass_h" onClick="calculateTotal(this.value);">Hourly $65
<input type="text" id="demo" name="demo" value="">
<b>Thsi is the second function call</b>
<input type="checkbox" style="border:none;" name="luggage_van" id="luggage_van" onClick="calculateTotal();getRadValue()" >Luggage Van
<input type="checkbox" style="border:none;" name="baby_seat" id="baby_seat" onClick="calculateTotal();getRadValue()" >Baby Seat
<input type="checkbox" style="border:none;" name="child_seat" id="child_seat" onClick="calculateTotal();getRadValue()">Child Seat
var globalvariable ;
function calculateTotal(id)
{
globalvariable=document.getElementById('demo').value = id;
}
function getRadValue()
{
var name = document.getElementById('demo').value = glovalvariable;
alert(name);
}
So when I click on checkbox I need to get already selected radio button value.
Your second function getRadValue() isn't being called anywhere. Set it up:
<input type="checkbox" style="border:none;" name="luggage_van" id="luggage_van" onClick="getRadValue();" >
Fix your typo (glovalvariable vs globalvariable):
function getRadValue() {
var name = document.getElementById('demo').value = globalvariable;
alert(name);
}
Now when you click on the checkbox, you'll get an alert of your globalvariable.
Check for the existence of id in your first function:
function calculateTotal(id) {
if (id) {
globalvariable=document.getElementById('demo').value = id;
}
alert(globalvariable);
}
i have 3 elemests of radio group.
How can i get the value of the radio element?
can i have same id for all 3 elements?
??<input type="radio" id="ans" name="ans" value="1" />
<input type="radio" id="ans" name="ans" value="0" />
how will i get the value of ans
Id's must be unique, you should have the radio buttons with the same name, and get its value iterating through them:
<input type="radio" name="ans" value="1" />
<input type="radio" name="ans" value="0" />
var elements = document.getElementsByName('ans'), //or document.forms['name'].ans
i, el;
for (i = 0; i < elements.length;i++) {
el = elements[i];
if (el.checked) {
alert(el.value);
break;
}
}
getElementsByName('ans'), or document.forms['name'].ans returns an array object, containing the elements with the name ans.
I do not recommend having the same id for all 3 elements. You do have to have the same name for each button in order for it to be part of the group. If you have the form its in, you can do this
var myForm = document.getElementById('myForm');
var radioVal = myForm.ans.value;
That will give you your value.