I am trying to validate 2 sets of radio button using Javascript. It is working with one set but not when I add another radio set (secondtime visitor). Here is my code:
HTML:
<form name="form1" action="#" method="post">
First time visitor?:<br/>
<label for="s1">Yes</label>
<input type="radio" id="radio1" name="firsttime" value="1"/>
<br/>
<label for="s2">No</label>
<input type="radio" id="radio2" name="firsttime" value="2"/>
<br/>
Second time visitor?:<br/>
<label for="s1">Yes</label>
<input type="radio" id="radio1" name="secondTime" value="1"/>
<br/>
<label for="s2">No</label>
<input type="radio" id="radio2" name="secondTime" value="2"/>
<br/>
<button type="submit" name="nextBTN" onclick="return validateForm();">Next</button><br/>
</form>
And Javascript code:
function validateForm() {
var radios = document.getElementsByName("firsttime");
var radios2 = document.getElementsByName("secondtime");
var formValid = false;
var i = 0;
while (!formValid && i < radios.length) {
if (radios[i].checked) formValid = true;
i++;
}
var j = 0;
while (!formValid && i < radios2.length) {
if (radios2[j].checked) formValid = true;
j++;
}
if (!formValid) alert("Must check some option!");
return formValid;
}
At first glance, I can see that in your second while loop, you still check the radios variable instead of the radios2 variable.
You also used the i variable instead of j in the second loop. And you weren't consistent with the capitalization of secondTime (vs secondtime).
Here's a working version of your code:
http://jsfiddle.net/8edCn/
EDIT: Updated version per your comment: http://jsfiddle.net/8edCn/2/
Related
I have a form with 36 questions and every question has 2 radio inputs for answers. The inputs are named i1-i36 and j1-j36. I am trying to count the checked radios into a variable for the ones named i and in another var the ones named j.
Tried this but it didn't work:
function test_it(entry) {
if (entry.value!=null && entry.value.length!=0) {
entry.value=""+ eval(entry.value);
}
computeForm(entry.form);
}
function computeForm(form) {
var rasa=0
var rasb=0
for (var count=1; count<37; count++)
{
if (form.i[count].checked){
var rasa=rasa+1;
}
}
for (var count=1; count<37; count++)
{
if (form.j[count].checked){
var rasb=rasb+1;
}
}
document.getElementById('showa').innerHTML = rasa;
document.getElementById('showb').innerHTML = rasb;
<body>
<form METHOD=POST>
Question 1
<input TYPE="radio" NAME="i1" VALUE="1">A1
<input TYPE="radio" NAME="j1" VALUE="0">A2
[...]
Question 36
<input TYPE="radio" NAME="i36" VALUE="1">A1
<input TYPE="radio" NAME="j36" VALUE="0">A2
</form>
</body>
// I want to get these:
<span id='showa'>Result a</span>
<span id='showb'>Result b</span>
In <input type="radio"> name attribute should be same like this
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
here name is gender
First change your name attribute like this
Question 1
<input TYPE="radio" NAME="j1" VALUE="1">A1
<input TYPE="radio" NAME="j1" VALUE="0">A2
and to check length use this
$(':radio[name="j1"]:checked).length;
Try to not use a for loop, but use highly order function like map, filter etc..
In this case substitute the for loop with:
var rasa = 0
var rasb = 0
form1.map((element, index) => {
if(element.checked)
rasa++
})
form2.map((element, index) => {
if(element.checked)
rasb++
})
Another thing, in every for loop you are re-declaring rasa and rasb and you don't need to. Also <form method="POST"> the property should be lowerCase.
you can do something like
radios = document.getElementByTagName('input');
a = 0
b = 0
for(let i = 0; i < radios.length; i++){
if(radios[i].name.contains('i')
a++;
else
b++;
}
<form action="" method="get" >
<input type="radio" name="gender" id="male_sub">male<br>
<input type="radio" name="gender" id="female_sub">female<br>
<input type="submit" value="Let's Start!" id="start"><br>
<form>
I have the following radio form and when I hit submit, I would like it to toggle some function in my js script. However, if I do something like:
document.getElementById("start").addEventListener('click',function ()...
Nothing works. I think I need something for the action tag, but I can only find examples that link to other websites/pages, which isn't what I want. Is toggling a function possible to do using the forms?
Thanks!
You're on the right track:
document.getElementById("start").addEventListener('click', function(e) {
e.preventDefault();
console.log('start!!');
const selected = document.querySelector('input[name="gender"]:checked');
console.log('you selected: ' + (selected ? selected.nextSibling.textContent : 'null'));
// your code here
});
<form>
<input type="radio" name="gender" id="male_sub">male<br>
<input type="radio" name="gender" id="female_sub">female<br>
<input type="submit" value="Let's Start!" id="start"><br>
<form>
You don't need an action or a method attribute. Make sure to use e.preventDefault() to prevent the form from submitting (redirecting the page) if you want to handle the form's values yourself.
You can define the submit function on form tag using onsubmit, Also this solution is accurate if you have multiple form tags on the same page.
function submitForm(form, event) {
event.preventDefault();
var val;
var radios = form.elements['gender'];
// loop through list of radio buttons
for (var i = 0, len = radios.length; i < len; i++) {
if (radios[i].checked) { // radio checked?
val = radios[i].value; // if so, hold its value in val
alert(val);
break; // and break out of for loop
}
}
alert("nothing selected");
return false;
}
<form onsubmit="return submitForm(this,event)">
<label><input type="radio" name="gender" id="male_sub" value="male">male</label><br>
<label><input type="radio" name="gender" id="female_sub" value="female">female</label><br>
<input type="submit" value="Let's Start!" id="start"><br>
</form>
How do you make it calculate using JavaScript/jQuery based on condition:
on radio button 'change' event.
if user clicks "Yes" or "N/A", the value of text boxes with default values next to it will be added and reflected in Total
HTML:
<form>
<fieldset>
<input type="radio" name="remark[]" value="Yes" class="answer">Yes
<input type="radio" name="remark[]" value="No" class="answer">No
<input type="radio" name="remark[]" class="answer">N/A
<input type="text" name="point1" class="score" value="3">
</fieldset>
<fieldset>
<input type="radio" name="remark[]" value="Yes" class="answer">Yes
<input type="radio" name="remark[]" value="No" class="answer">No
<input type="radio" name="remark[]" class="answer">N/A
<input type="text" name="point2" class="score" value="2">
</fieldset>
Total<input type="text" name="total" class="result">
</form>
Vanilla Javascript
Note: these scripts associate with forms that have the class name calc
This script will associate with the form, so if you have multiple instances each form will calculate separately.
Basically for each form select all input's with a value of 'Yes' which are checked, then find the score for that field set and add it to the total
(Demo)
(function(){
"use strict";
function calculate() {
var forms = document.querySelectorAll('.calc'), form, i;
for (i = 0; form = forms[i]; i++) {
var total = 0;
var inputs = form.querySelectorAll('input[value="Yes"]:checked'), input, x;
for (x = 0; input = inputs[x]; x++) {
total += parseFloat(input.parentElement.lastElementChild.value);
}
form.lastElementChild.value = total;
}
}
calculate();
var inputs = document.querySelectorAll('.calc input'), input, x;
for(x = 0; input = inputs[x]; x++) {
input.onchange = calculate;
}
})();
jQuery
If you would like to use jQuery, this is the same script converted to jQuery
(Demo)
(function(){
"use strict";
function calculate() {
$('.calc').each(function(){
var total = 0;
$('input[value="Yes"]:checked', this).each(function(){
total += parseFloat($('input.score', this.parentElement).val());
});
$('input.result', this).val(total);
});
}
calculate();
$('.calc input').on('change', calculate);
})();
Not sure if I understand correctly, but first you'll need a few changes in your markup, radio groups should have different name so it'll be like remark[0] for first group and remark[1] for the second and so on. The "N/A" radios don't seem to have a value so I've added value="NA" to them. So your HTML will look like:
<form>
<fieldset>
<input type="radio" name="remark[0]" value="Yes" class="answer" />Yes
<input type="radio" name="remark[0]" value="No" class="answer" />No
<input type="radio" name="remark[0]" value="NA" class="answer" />N/A
<input type="text" name="point1" class="score" value="3" />
</fieldset>
<fieldset>
<input type="radio" name="remark[1]" value="Yes" class="answer" />Yes
<input type="radio" name="remark[1]" value="No" class="answer" />No
<input type="radio" name="remark[1]" value="NA" class="answer" />N/A
<input type="text" name="point2" class="score" value="2" />
</fieldset>Total
<input type="text" name="total" class="result" />
</form>
Then we just listen to radio's onchange and if Yes or N/A is selected for each group, we have it's value to the total. I used parseInt on values since they're string and it seemed the values were supposed to work as numbers. (2+3 should be 5 and not 23).
$('form input[type=radio]').on('change', function() {
var total = 0;
$('form fieldset').each(function(i) {
var point = parseInt($(this).find('input[type=text]').val());
var val = $(this).children('[name="remark[' + i + ']"]:checked').val();
if(val == "Yes" || val == "NA")
total += point;
});
$('input[name="total"]').val(total);
});
jsfiddle DEMO
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:'';
I have some set of radio button. I am trying to get checked radio button value using java script. But I got the error of uncaught id. I do the following code in html 5. I am not getting the value.
function timeout()
{
if (document.getElementById["RadioButton1"].checked)
{
choice = document.getElementById["RadioButton1"].value;
alert('choice');
}
if (document.getElementById["RadioButton2"].checked)
{
choice = document.getElementById["RadioButton2"].value;
alert('choice');
}
if (document.getElementById["RadioButton3"].checked)
{
choice = document.getElementById["RadioButton3"].value;
alert('choice');
}
if (document.getElementById["RadioButton4"].checked)
{
choice = document.getElementById["RadioButton4"].value;
alert('choice');
}
var c = document.getElementById("label1").value;
}
If you use the same name(in same radio button group) for all radio buttons like this
<input type="radio" id="RadioButton1" name="radio_group" value="1"/>
<input type="radio" id="RadioButton2" name="radio_group" value="2"/>
<input type="radio" id="RadioButton3" name="radio_group" value="3"/>
you can get the selected(checked radio button value ) using jQuery,in one line.
var Val = $("input[name=radio_group]:checked").val();
A set of radio buttons should all have the same name. So get the set, find the checked one and read its value:
function getValue(name) {
var rbs = document.getElementsByName(name);
for (var i=0, iLen=rbs.length, i<iLen; i++) {
if (rbs[i].checked) {
return rbs[i].value;
}
}
}
If the controls are in a form (which the usually are) and you have a reference to the form, you can get the set using:
var rbs = formRef[name];
$(document).ready(function(){
$('#btnsubmit').click(function(){
var result = $('input[type="radio"]:checked');
if (result.length > 0) {
$('#result').html(result.val()+" is Checked");
}else{
$('#result').html(" No radio button is Checked");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female
<input type="submit" id="btnsubmit" value="submit">
<div id="result"></div>
The major problem visible from your code is a syntax error.
document.getElementById is a method and not an object, so you should call it with parens:
// --------------------v--------------v
document.getElementById("RadioButton1").value
This is ans for #yogi comment(
how we can implement same for checkboxes?)
$(document).ready(function(){
$('#btnsubmit').click(function(){
var result = $('input[type="checkbox"]:checked');
if (result.length > 0) {
var resultstring = result.length +"checkboxes checked <br>";
result.each(function(){
resultstring += $(this).val()+" <br>"; //append value to exsiting var
});
$('#result').html(resultstring);
}else{
$('#result').html(" No checkbox is Checked");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="checkbox" name="skill" value="Java"> Java
<input type="checkbox" name="skill" value="Jquery"> Jquery
<input type="checkbox" name="skill" value="PHP"> PHP
<input type="submit" id="btnsubmit" value="submit">
<div id="result"></div>