We Keep Coding

Autofill a radiobutton

I am trying to auto fill a radio button type, I was training on this website and used it's code to test it on my google chrome console, but it returns undefined.
The website : https://benalexkeen.com/autofilling-forms-with-javascript/
the html: view-source:https://benalexkeen.com/autofilling-forms-with-javascript/
I'm trying to tick the thrid radio button using this code:
var radioElements = document.getElementsByName("input3");
for (var i=0; i<radioElements.length; i++) {
if (radioElements[i].getAttribute('value') == 'Radio3') {
radioElements[i].checked = true;
}
}
output:
I tried to adapt this code to tick on another website and still have this undefined output

I hope this will help. You might be mistaken with the attribute value
var radioElements = document.getElementsByName("input3");
for (var i=0; i<radioElements.length; i++) {
if (radioElements[i].getAttribute('value') == 'radio3') {
radioElements[i].checked = true;
}
}
<input type="radio" id="radio1" name="input3" value="radio1">
<label for="radio1">Redio 1</label><br>
<input type="radio" id="radio2" name="input3" value="radio2">
<label for="radio2">Redio 2</label><br>
<input type="radio" id="radio3" name="input3" value="radio3">
<label for="radio3">Radio 3</label>

Here is another approach in case you want something easier to read IMO.
// Instead of var I used let.
let radioElements = document.getElementsByName("input3");
radioElements.forEach((input) => {
if(input.value === "Radio3") input.checked = true;
})
<input type="radio" id="Radio1" name="input3" value="Radio1">
<label for="radio1">Radio 1</label><br>
<input type="radio" id="Radio2" name="input3" value="Radio2">
<label for="radio2">Radio 2</label><br>
<input type="radio" id="radio3" name="input3" value="Radio3">
<label for="radio3">Radio 3</label>
And about undefined, if the code you are writing doesn't return anything, it will do that. Although, it doesn't mean is not working.

Javascript radio group by button

How to display an alert msg when all radio button checked to no? I only know check radio by individual only.
//I only know this method
$('#attraction1').change( function(){
if ($(this).is(':checked')) {
alert('Yes');
}
});
Attraction :
<input type="radio" id="attraction1" name="attraction" value="y" checked/> Yes
<input type="radio" id="attraction2" name="attraction" value="n" /> No
<br>
Individual Attraction :
<input type="radio" id="individual1" name="individual" value="y" checked/> Yes
<input type="radio" id="individual2" name="individual" value="n" /> No
<br>
Plan Board:
<input type="radio" id="planBoard1" name="planBoard" value="y" checked/> Yes
<input type="radio" id="planBoard2" name="planBoard" value="n" /> No

In this case you should check something like this
$('#some_button').click( function(){
if ($('input[type="radio"][value="n"]:checked').length == 3) {
alert('Yes');
}
});

You can use a common class for all radio button with no value and a javascript array every method.
This line const radioNames = [...document.getElementsByClassName('no')]; will get all the radio button with no value ... is spread operator and will convert collection so that array method can be used on that collection.
This line item.addEventListener('change', checkIfAllNo) will attach event change to radio button with value no so that it checks the value for all other radio button
Array method every will return true if all the value in that array satisfies the condition.
So in this line radioNames.every(item => {return item.checked;}); if all the radio button with no value is checked then isAllFalse will be true & the alert will be triggered.
const radioNames = [...document.getElementsByClassName('no')];
function checkIfAllNo() {
const isAllFalse = radioNames.every(item => {
return item.checked;
});
if (isAllFalse) {
alert('All False')
}
}
radioNames.forEach((item) => {
item.addEventListener('change', checkIfAllNo)
})
<input type="radio" id="attraction1" name="attraction" value="y" checked/> Yes
<input type="radio" class="no" id="attraction2" name="attraction" value="n" /> No
<br> Individual Attraction :
<input type="radio" id="individual1" name="individual" value="y" checked/> Yes
<input type="radio" id="individual2" class="no" name="individual" value="n" /> No
<br> Plan Board:
<input type="radio" id="planBoard1" name="planBoard" value="y" checked/> Yes
<input type="radio" id="planBoard2" class="no" name="planBoard" value="n" /> No

In case you have an indeterminate number of inputs you can collect the values for every group and then check if all values match
$("input[type='radio']").change(function() {
// Extract all the radio group names
names = $.unique($('input[type="radio"]').map((v, e) => $(e).attr('name')))
// Collect the value for each group.
// Account for groups that are not selected yet
vals = $.map(names, function(name) {
return $(`input:radio[name="${name}"]:checked`).val() || 'undefined';
})
// Check if collected values match 'n'
console.log(vals.every(v => v == 'n'))
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Attraction :
<input type="radio" id="attraction1" name="attraction" value="y" /> Yes
<input type="radio" id="attraction2" name="attraction" value="n" /> No
<br> Individual Attraction :
<input type="radio" id="individual1" name="individual" value="y" /> Yes
<input type="radio" id="individual2" name="individual" value="n" checked/> No
<br> Plan Board:
<input type="radio" id="planBoard1" name="planBoard" value="y" checked/> Yes
<input type="radio" id="planBoard2" name="planBoard" value="n" /> No

#ForeverTwoWheels
Please try this code,To Javascript radio group by button
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Radio Buttons</title>
</head>
<body>
<form>
<input type="radio" name="choice" value="yes"> Yes
<input type="radio" name="choice" value="no"> No
<input type="button" id="btn" value="Show Selected Value">
</form>
<script>
const btn = document.querySelector('#btn');
// handle click button
btn.onclick = function () {
const rbs = document.querySelectorAll('input[name="choice"]');
let selectedValue;
for (const rb of rbs) {
if (rb.checked) {
selectedValue = rb.value;
break;
}
}
alert(selectedValue);
};
</script>
</body>
</html>
I hope this information will be usefull for you.
Thank you.

Combining a Javascript function

I'm trying to create a voting style system where the user selects 2 numbers from 2 separate groups of radio buttons.
I've been able to do this, however I don't feel it's as optimised as it should be:
http://jsfiddle.net/f54wpLzg/11/
function updateQuality() {
var quality = document.getElementsByClassName('quality');
for (var i = 0, length = quality.length; i < length; i++) {
if (quality[i].checked) {
totalQuality = parseInt(quality[i].value);
break;
}
}
qualityVal = totalQuality;
document.getElementById('totalQuality').innerHTML = qualityVal;
}
Is there anyway to combine the functions? I'd prefer not to have the
onclick="updateService();
On every single radio button as well...

You can both simplify and DRY up your code. Firstly add a data attribute to the containers to identify which element should be used to display the total:
<div id="quality" data-target="totalQuality">
<input type="radio" class="quality" name="quality" value="1" />
<input type="radio" class="quality" name="quality" value="2" />
<input type="radio" class="quality" name="quality" value="3" />
</div>
<div id="service" data-target="totalService">
<input type="radio" class="service" name="service" value="1" />
<input type="radio" class="service" name="service" value="2" />
<input type="radio" class="service" name="service" value="3" />
</div>
<br>
<span id="totalQuality">0</span>
<span id="totalService">0</span>
Then you can remove the onclick attribute and use jQuery to attach a single event handler to all the radios:
$('#quality input, #service input').change(function() {
var total = $(this).parent().data('target');
$('#' + total).html($(this).val());
});
Example fiddle

Since you are using jQuery you can remove the onclick attributes and do
$('#quality').on('change', '.quality', updateQuality);
$('#service').on('change', '.service', updateService);
in your script
To use a single method you could alter a bit your html to specify a target for each group (to display the value)
<div id="quality" data-target="#totalQuality">
<input type="radio" class="quality" name="quality" value="1">
<input type="radio" class="quality" name="quality" value="2" >
<input type="radio" class="quality" name="quality" value="3">
</div>
<div id="service" data-target="#totalService">
<input type="radio" class="service" name="service" value="1">
<input type="radio" class="service" name="service" value="2">
<input type="radio" class="service" name="service" value="3">
</div>
And then you can just do
function update() {
var target = $(this).closest('[data-target]').data('target');
$(target).text(this.value);
}
$('#quality, #service').on('change', 'input', update);
But it will not update global variables (if you required those)

you could just add a parameter inside the function then put a condition inside
something like this..
function updateVote(str) {
var data = document.getElementsByClassName(str);
for (var i = 0, length = data.length; i < length; i++) {
if (data[i].checked) {
totalCount = parseInt(data[i].value);
break;
}
}
val = totalCount;
if(str=="quality")
document.getElementById('totalQuality').innerHTML = val;
}
else{
document.getElementById('totalService').innerHTML = val;
}
on your html file..
onclick="updateVote('service')"
or
onclick="updateVote('quality')"

default radio button selection using javascript

Here is what i wanted to accomplish. I have 2 sets of radio buttons. Radio button at the same index position in the 2 sets should not be selected at the same time. If a user tries to select, it must show alert and the defaut radio button must be selected.
Here is my html
<input type="radio" name="A" checked="checked" onclick="return check();" />
<input type="radio" name="A" onclick="return check();" />
<br />
[enter link description here][1]
<input type="radio" name="B" onclick="return check();" />
<input type="radio" name="B" checked="checked" onclick="return check();" />
Here is the JS
function check() {
//logic to check for duplicate selection
alert('Its already selected');
return false;
}
It works perfectly fine. demo
Now suppose, one of the check box is not selected , say in the second set. If the user selects first radio button from second set, which is already selected in the first, an alert is showed. But the radio button remains selected.
Here is modified html
<input type="radio" name="A" checked="checked" onclick="return check();" />
<input type="radio" name="A" onclick="return check();" />
<br />
<input type="radio" name="B" onclick="return check();" />
<input type="radio" name="B" onclick="return check();" />
Here is a demo.
NOTE: i can't use jquery since the code is already a part of some legacy application

To me it seems you should arrange the radio buttons in the other way:
<input type="radio" name="col1" value="A1">
<input type="radio" name="col2" value="A2">
<input type="radio" name="col3" value="A3">
<input type="radio" name="col1" value="B1">
<input type="radio" name="col2" value="B2">
<input type="radio" name="col3" value="B3">
That means the user only can select one value in each column without the obtrusive alert or javascript.

This works without jQuery:
// get all elements
var elements = document.querySelectorAll('input[type="radio"]');
/**
* check if radio with own name is already selected
* if so return false
*/
function check(){
var selected_name = this.name,
selected_value = this.value,
is_valid = true;
// compare with all other elements
for(var j = 0; j < len; j++) {
var el = elements[j];
// does the elemenet have the same name AND is already selected?
if(el.name != selected_name && el.value == selected_value && el.checked){
// if so, selection is not valid anymore
alert('nope')
// check current group for previous selection
is_valid = false;
break;
}
};
return is_valid;
}
/**
* bind your elements to the check-routine
*/
for(var i = 0, len = elements.length; i < len; i++) {
elements[i].onmousedown = check;
}
Here is a DEMO
Does this fit your needs?

Give value to your radios:
<input type="radio" name="A" checked="checked" value="1" />
<input type="radio" name="A" value="2" />
<br />
<input type="radio" name="B" value="1" />
<input type="radio" name="B" value="2" />
Then you can do as follows:
var radios = document.querySelectorAll('input[type="radio"]');
for(var i=0;i<radios.length;i++){
radios[i].addEventListener('click', check);
}
function check(){
var index= this.value-1;
if(this.name=='A'){
if(document.getElementsByName('B')[index].checked){
alert('already selectedin other set');
var otherIndex= (index==0)?1:0;
var other = document.getElementsByName("A")[otherIndex];
other.checked= true;
}
}
else{
if(document.getElementsByName('A')[index].checked){
alert('already selected in other set');
var otherIndex= (index==0)?1:0;
var other = document.getElementsByName("B")[otherIndex];
other.checked= true;
}
}
}
check this fiddle

jQuery radio array selector

I have radio buttons like:
<input type="radio" value="a" name="questions[0]">
<input type="radio" value="b" name="questions[0]">
<input type="radio" value="c" name="questions[0]">
<input type="radio" value="d" name="questions[0]">
<input type="radio" value="a" name="questions[1]">
<input type="radio" value="b" name="questions[1]">
<input type="radio" value="c" name="questions[1]">
<input type="radio" value="d" name="questions[1]">
How do I loop through this with jQuery? I want validate that a response has been given for each question. Thanks.
edit:
or is there even a way to get the length of the questions array?

$("#myForm input[type=radio]").each(function() {
//whatever you need
});

$('[name="questions[1]"]:checked').val() gives the checked value of question 1.
Or like below, get the checked value with the name:
$('input[type=radio]:checked').each(function() {
console.log($(this).val(), $(this).attr('name'));
});

You can do something like this:
var rgroups = [];
$('input:radio').each(function (index, el) {
var i;
for (i = 0; i < rgroups.length; i++)
if (rgroups[i] == $(el).attr('name')) return true;
rgroups.push($(el).attr('name'));
});
rgroups = rgroups.length;
$('#test').click(function () {
if ($('input:radio:checked').length < rgroups) alert('You must fill in all the fields.');
else alert("You're done!");
});
Fiddle Demo