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.
Related
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:
How do I get the label of the selected radio button using javascript
(3 answers)
Closed 8 years ago.
I have a group of radio buttons and want to get the checked radio button, then alert the text, not only the value of it. To explain more, when the user clicks the first radio button, and then submits the form, I want the browser to alert "Desktop Case." And I want to achieve this without jQuery.
<form action="" name="form1">
<label for="radio400">Desktop Case</label>
<input type="radio" name="rad_case" value="400" id="radio400"/>
<label for="radio401">Mini Tower</label>
<input type="radio" name="rad_case" value="401" id="radio401"/>
<label for="radio402">Full Tower</label>
<input type="radio" name="rad_case" value="402" id="radio402"/>
<input type="button" value="Submit" name="btn_submit" onclick="update_order_onclick()"/>
</form>
The following works for your example. It uses CSS selectors to target the checked input. Based on its id, the appropriate label is found:
function update_order_onclick() {
var value= 'Nothing selected',
selected= document.querySelector('input[name="rad_case"]:checked'),
selection= document.querySelector('#selection');
if(selected) {
value= document.querySelector('label[for="'+selected.id+'"]').innerHTML;
}
selection.innerHTML= value;
}
<form action="" name="form1">
<label for="radio400">Desktop Case</label>
<input type="radio" name="rad_case" value="400" id="radio400"/>
<br>
<label for="radio401">Mini Tower</label>
<input type="radio" name="rad_case" value="401" id="radio401"/>
<br>
<label for="radio402">Full Tower</label>
<input type="radio" name="rad_case" value="402" id="radio402"/>
<br>
<input type="button" value="Submit" name="btn_submit" onclick="update_order_onclick()"/>
</form>
<div id="selection"></div>
First, we create a function to loop through the radio buttons group we have, and checks if it is checked or not.
function get_radio_val(form, name)
{
var val;
var radios = form.elements[name];
for (var i =0; i < radios.length; i++)
{
if (radios[i].checked)
{
val = radios[i];
break;
}
}
return val;
}
Then we write the function that will be executed on onclick event.
function update_order_onclick()
{
var val = get_radio_val(document.form1, 'rad_case');
var val_id = val.id;
var selector = 'label[for=' + val_id + ']';
var label = document.querySelector(selector);
var label_text = label.innerHTML;
alert(label_text);
}
The thing that helped us here, is that the label for attribute has to be the same value as the radio button id and that's how we selected it in the function above.
simply do the following:
var checked = document.querySelector('input:checked');
var id = checked?checked.id:'bla';
var lab = document.querySelector('label[for='+id+']');
var lab_text = lab?lab.textContent:'';
This question already has answers here:
How can I check if a checkbox is checked?
(18 answers)
Closed 8 years ago.
I have form on page1.php:
<form method="POST" action="page2.php">
<input type="checkbox" name="F10" id="f10">
<input type="checkbox" name="W10" id="w10">
<input type="checkbox" name="F20" id="f20">
<input type="checkbox" name="W20" id="w20">
<input type="checkbox" name="F30" id="f30">
<input type="checkbox" name="W30" id="w30">
</form>
I want to diable a checkbox if another checkbox is checked using javascript or XMLHttpRequest().
I tried doing it using javascript but it didn't work.
if(document.getElementById("f10").checked){
document.getElementById("w20").disabled=true;
}
You can use regular javascript to get a true or false value for checked for example,
var isChecked= document.getElementById('elementName').checked;
if(isChecked){ //checked
//execute code here
}else{ //unchecked
//execute code here
}
or if you want whenever the checkbox check is changed
var checkbox = document.getElementById('elementName');
checkbox.addEventListener("change", functionname, false);
function functionname(){
var isChecked = checkbox.checked;
if(isChecked){ //checked
}else{ //unchecked
}
}
can you try my code? it may help you :D
<form onclick="checkIfChecked()" method="POST" action="page2.php">
<input type="checkbox" name="F10" id="f10">F10
<input type="checkbox" name="W10" id="w10">W10
<input type="checkbox" name="F20" id="f20">F20
<input type="checkbox" name="W20" id="w20">W20
<input type="checkbox" name="F30" id="f30">F30
<input type="checkbox" name="W30" id="w30">W30
</form>
<script>
function checkIfChecked(){
if(document.getElementById("f10").checked){
document.getElementById("w20").disabled=true;
} else {
document.getElementById("w20").disabled=false;
}
}
</script>
The purpose of a check box is for multiple selections, use radio buttons if you only want one selection available
You can use the checked pseudo class but note lack of browser support for IE 8 if that matters to you.
http://css-tricks.com/almanac/selectors/c/checked/
This question already has answers here:
jQuery: Uncheck other checkbox on one checked
(7 answers)
Closed 8 years ago.
How to make the checkbox click at a time when one is clicked and other should be unchecked.
when checkbox one is clicked it should be marked to checked and when checkbox two is clicked it should be marked checked and rest all should be marked unchecked.
My code is as follows:
<div class="feedback-quest3">
<label class="checkbox ques3" for="ques3-cbox1">
<input type="checkbox" value="" id="ques3-cbox1" data-toggle="checkbox">
1-2
</label>
<label class="checkbox ques3" for="ques3-cbox2">
<input type="checkbox" value="" id="ques3-cbox2" data-toggle="checkbox">
2-3
</label>
<label class="checkbox ques3" for="ques3-cbox3">
<input type="checkbox" value="" id="ques3-cbox3" data-toggle="checkbox">
3-4
</label>
</div>
See the DEMO
Javascript
function attach(element,listener,ev,tf){
if(element.attachEvent)
element.attachEvent("on"+listener,ev);
else
element.addEventListener(listener,ev,tf);
}
var parent = document.getElementById('parentElement');
var checkboxes = parent.getElementsByTagName('input');
if(checkboxes.length>0){
for(var i=0;i<checkboxes.length;i++){
attach(checkboxes[i],'click',function(event){
var evt = event || window.event;
var target = evt.target || evt.srcElement;
for(var y=0;y<checkboxes.length;y++){
checkboxes[y].checked = false;
}
target.checked = true;
}, false);
}
}
$(".feedback-quest3 :checkbox").on("change", function(){
$(".feedback-quest3 :checkbox").not($(this)).prop("checked",false);
});
Then, try this:
$(".feedback-quest3 :checkbox").each(function(){
$(".feedback-quest3 :checkbox").on("change",function(){
$(".feedback-quest3 :checkbox").prop("checked",false);
$(this).prop("checked",true);
});
});
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.