Develop Reference

how to select multiple checkbox validation in javascript

Here is my Form. I need validation in JavaScript.
At least one checkbox selected in validation.
I hop you all are understand what I need.
please give me solution for that.
If any query then feel free ask.
<form action="#" method="post" name="studentregistration" onsubmit="return(validate());">
<table cellpadding="3" width="100%" align="center" cellspacing="3">
<tr>
<td>Hobby</td>
<td>
<input type="checkbox" name="hobby" value="Chess" id="hobby">Chess
<input type="checkbox" name="hobby" value="Music" id="hobby">Music<br>
<input type="checkbox" name="hobby" value="Cricket" id="hobby">Cricket
<input type="checkbox" name="hobby" value="Reading" id="hobby">Reading
</td>
</tr>
<tr>
<td>
<input type="submit" name="Submit Form" value="Submit Form" id="submitform">
</td>
</tr>
</table>
</form>

If you're trying to validate that at least one checkbox is checked, then this should work for you using jQuery:
$('input[type="checkbox"]:checked').length > 0

In "pure" js, you could remove the onsubmit attribute and do this instead:
document.querySelector('form[name="studentregistration"]').onsubmit = function(e) {
e.preventDefault();
var cbx = document.querySelectorAll('form[name="studentregistration"] input[name="hobby"]:checked');
if(cbx.length > 0) {
// at least one checked - do something
}
else {
// none checked
}
}
See a live demo!

Complete solution.
In order to submit the form after validation you must use:
document.getElementById("myForm").submit();
document.getElementById("submitform").addEventListener("click",submit_form);
function submit_form(e){
var ob = "";
var chess = document.getElementById("hobby1").checked;
var music = document.getElementById("hobby2").checked;
var cricket = document.getElementById("hobby3").checked;
var reading = document.getElementById("hobby4").checked;
if(chess == true){
ob += "hobby: chess selected!\n";
}
if(music == true){
ob += "hobby: music selected!\n";
}
if(cricket == true){
ob += "hobby: cricket selected!\n";
}
if(reading == true){
ob += "hobby: reading selected!\n";
}
if(ob==""){
alert("No hobbys selected");
}
else{
alert(ob);
//document.getElementById("myForm").submit();
}
//for testing purposes
e.preventDefault();
return false;
}
<form id = "myForm" action="#" method="post" name="studentregistration">
<table cellpadding="3" width="100%" align="center" cellspacing="3">
<tr>
<td>Hobby</td>
<td>
<input type="checkbox" name="hobby" id="hobby1">Chess
<input type="checkbox" name="hobby" id="hobby2">Music<br>
<input type="checkbox" name="hobby" id="hobby3">Cricket
<input type="checkbox" name="hobby" id="hobby4">Reading
</td>
</tr>
<tr>
<td>
<input type="button" name="Submit Form" value="Submit Form" id="submitform">
</td>
</tr>
</table>
</form>

if($("#hobby").is(':checked')){
alert("checkbox checked");
}
else{
alert("Please select at least one checkbox");
}

Here is another easy answer
var test = document.getElementsByName("hobby[]");
if(test[0].checked==false && test[1].checked==false && test[2].checked==false && test[3].checked==false)
{
alert("Please Check");
return false;
}

Compare the value of selected radio button

I have below code for radio button. When particular user select the 2nd radio button(value="Selection_MQ--") then I need to check if user has selected that particular button only then show message via alert message correct answer, and if select first one(value="Selection_MA--") then wrong answer. how I can do this?
<td valign="center"><input type="radio" class="question selection" name="Answer_1" id="Answer_1" value="Selection_MA--" /></td>
<td valign="center"><span class="answer text">No</span></td>
<td valign="center"><input type="radio" class="question selection" name="Answer_1" id="Answer_1" value="Selection_MQ--" /></td>
<td valign="center"><span class="answer text">Yes</span></td>
var Answer_1_data = $('input[name="Answer_1"]:checked').val();

Using Jquery
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[type='button']").click(function(){
var Answer_1_data = $('input[name="Answer_1"]:checked').val();
if(Answer_1_data){
if(Answer_1_data=="Selection_MQ--")
alert("Correct Anwser");
else
alert("Wrong Answer");
}
});
});
</script>
<td valign="center">
<input type="radio" class="question selection" name="Answer_1" id="Answer_1" value="Selection_MA--" /></td>
<td valign="center"><span class="answer text">No</span></td>
<td valign="center">
<input type="radio" class="question selection" name="Answer_1" id="Answer_1" value="Selection_MQ--" /></td>
<td valign="center"><span class="answer text">Yes</span></td>
<input type="button" id="btn" value="Submit">
Using Javascript
<script type="text/javascript">
function answer()
{
var ans = document.getElementsByName('Answer_1');
for (var i = 0, length = ans.length; i < length; i++) {
if (ans[i].checked) {
if((ans[i].value)=="Selection_MQ--")
alert("Correct Answer");
else
alert("Wrong ANswer");
}
}
}
</script>
<td valign="center">
<input type="radio" class="question selection" name="Answer_1" id="Answer_1" value="Selection_MA--" /></td>
<td valign="center"><span class="answer text">No</span></td>
<td valign="center">
<input type="radio" class="question selection" name="Answer_1" id="Answer_1" value="Selection_MQ--" /></td>
<td valign="center"><span class="answer text">Yes</span></td>
<input type="button" id="btn" value="Submit" onclick="answer()">

If you have radio buttons with the same name, users can only select one, so that part is easy. All you need to do then is show the correct message depending on which one is checked. All just plain javascript.
// Object with correct answers
var answers = {
Answer_1: 'Selection_MQ--'
}
// Function to check if answers are correct
function checkAnswer(){
alert(this.value == answers[this.name]? 'Correct!' : 'Wrong :-(');
}
// Attach listeners to radio buttons
window.onload = function() {
[].forEach.call(document.querySelectorAll('input[name="Answer_1"]'), function (radio){
radio.addEventListener('click',checkAnswer, false);
});
};
<fieldset><legend>Questions</legend>
<label for="Answer_1a"><input type="radio" class="question selection" name="Answer_1" id="Answer_1a" value="Selection_MA--">No</label>
<label for="answer_1b"><input type="radio" class="question selection" name="Answer_1" id="Answer_1b" value="Selection_MQ--">Yes</label>
</fieldset>
This is a good candidate for delegation, where the radios are wrapped in a fieldset and a single listener placed on the fieldset to check answers, rather than putting a listener on every radio button.

// return true if radio button is checked otherwise false
function radioButtonIsChecked( radioButton ) {
if ( radioButton.is( ':checked' ) {
return true;
} else {
return false;
}
}
// get the radio button element value
function getRadioButtonValue( radioButton ) {
if ( radioButtonIsChecked( radioButton ) {
return radioButton.val();
} else {
return null;
}
}
// try the code
for ( var i = 0; i < $( 'input[name="Answer_1"] ').length; i++ ) {
if ( "Selection_MQ--" == getRadioButtonValue( $('#Answer_' + i ) ) {
alert( "Correct Answer" );
} else {
alert( "wrong answer" );
}
}

Radio button validation (alert box) confirmation and rejection

I'm working on a HTML document which is an exam submission form. I've completed almost all of the set tasks however, I'm having trouble validating radio buttons. I've searched on stackoverflow however, the answers do not meet the criteria of the question. My completed code is shown below.
I'm having trouble with the bold part of this task:
Add a set of radio buttons to the form to accept a level of entry such as GCSE, AS or A2. Write a function that displays the level of entry to the user in an alert box so that the level can be confirmed or rejected.
Below is the code working, excluding the validation of the radio buttons. Seperatley, I have the code which doesn't work when implemented into the function validateForm().
<html>
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
function validateForm() {
var result = true;
var msg = "";
if (document.ExamEntry.name.value == "") {
msg += "You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color = "red";
result = false;
}
if (document.ExamEntry.subject.value == "") {
msg += "You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color = "red";
result = false;
}
if (document.ExamEntry.examno.value == "") {
msg += "You must enter your Examination Number \n";
document.ExamEntry.examno.focus();
document.getElementById('examinationno').style.color = "red";
result = false;
}
if (document.ExamEntry.examno.value.length!== 4) {
msg+="Your Examination Number should be 4 digits.\n";
document.ExamEntry.examno.focus();
document.getElementById('examinationno').style.color="red";
result = false;
}
if(msg==""){
return result;
}
{
alert(msg)
return result;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr></tr>
<tr>
<td id="name">Name</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<tr>
<td id="subject">Subject</td>
<td>
<input type="text" name="subject" />
</td>
</tr>
<tr>
<td id="examinationno">Examination Number</td>
<td>
<input type="text" name="examno" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="examtype" value="GCSE" />GCSE</td>
</tr>
<tr>
<td>
<input type="radio" name="examtype" value="AS" />AS</td>
</tr>
<tr>
<td>
<input type="radio" name="examtype" value="A2" />A2</td>
</tr>
<tr>
<td>
<input type="submit" name="Submit" value="Submit" onClick="return validateForm();" />
</td>
<td>
<input type="reset" name="Reset" value="Reset" />
</td>
</tr>
</table>
</form>
Based on the current code, why won't the following validate when added into the function?:
if(document.getElementById('GCSE').checked)
{examtype = "GCSE";
}
if(document.getElementById('AS').checked)
{examtype = "AS";
}
if(document.getElementById('A2').checked)
{examtype = "A2";
}
if(confirm("You have selected"+examtype+.Continue?")){
if(msg==""){
return result;
}
{
alert(msg)
return result;
}
}
else{
alert("Action cancelled");
return false;
}

// Retrieving the checked radio button value
function getRadioValue (frmName, rbGroupName)
{
var radios = document[frmName].elements[rbGroupName];
for (var i=0; i <radios.length; i++)
{
if (radios[i].checked)
{
return radios[i].value;
}
}
return false;
}
Call the getRadioValue() inside validateForm()
// examtype gets false or GCSE or AS or A2
var examtype = getRadioValue ("ExamEntry", "examtype");

"Continue" is a keyword. So you have to wrap it in apostrophes("). I could not get the structure of if-statements, I made some changes. I hope this is what you are looking for..
if(confirm("You have selected"+examtype+". Continue?")){
if(msg==""){
alert(msg);
return result;
}
else{
alert("Action cancelled");
return false;
}
}

Javascript button click on event to run a function [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
Ok, I have GCSE coursework to do based on this piece of code, although the code given to us to begin with(shown below) isn't correctly working, I believe it to be because the click on event isn't running the function that validates the information entered.
<head>
<title>Exam entry</title>
<script language=”javascript” type=”text/javascript”>
function validateForm() {
var result = true;
var msg = ””;
if (document.ExamEntry.name.value == ””) {
msg += ”You must enter your name\n”;
document.ExamEntry.name.focus();
document.getElementById(‘name’).style.color = ”red”;
result = false;
}
if (document.ExamEntry.subject.value == ””) {
msg += ”You must enter the subject\n”;
document.ExamEntry.subject.focus();
document.getElementById(‘subject’).style.color = ”red”;
result = false;
}
if (msg == ””) {
return result;
} {
alert(msg)
return result;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name=”ExamEntry” method=”post” action=”success.html”>
<table width=”50%” border=”0”>
<tr>
<td id=”name”>Name</td>
<td><input type=”text” name=”name” /></td>
</tr>
<tr>
<td id=”subject”>Subject</td>
<td><input type=”text” name=”subject” /></td>
</tr>
<tr>
<td> <button type=”button” name=”Submit” value=”Submit” onclick=”return validateForm();” />"Submit"</button></td>
<td> <button type=”button” name=”Reset” value=”Reset” />Reset</td>
</tr>
</table>
</form>
</body>
This is the code now with all the updates, but it still fails to run the function :
<head>
<title>Exam entry</title>
<h1>Exam Entry Form</h1>
<script language=”javascript” type=”text/javascript”>
function validateForm() {
var result = true;
var msg = '';
if (document.ExamEntry.name.value == '') {
msg += 'You must enter your name\n';
document.ExamEntry.name.focus();
document.getElementById('name').style.color = 'red';
result = false;
}
if (document.ExamEntry.subject.value == '') {
msg += 'You must enter the subject\n';
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color = 'red';
result = false;
}
if (msg == '') {
return result;
}
alert(msg);
return result;
}
</script>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<tr>
<td id="subject">Subject</td>
<td>
<input type="text" name="subject" />
</td>
</tr>
<tr>
<td>
<button type="button" name="Submit" value="Submit" onclick="return validateForm();" />
Submit
</td>
<td>
<button type="button" name="Reset" value="Reset" />Reset</td>
</tr>
</table>
</form>

jsFiddle
HTML
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<tr>
<td id="subject">Subject</td>
<td>
<input type="text" name="subject" />
</td>
</tr>
<tr>
<td>
<button type="button" name="Submit" value="Submit" onclick="return validateForm();" />
Submit
</td>
<td>
<button type="button" name="Reset" value="Reset" />Reset</td>
</tr>
</table>
</form>
JS
function validateForm() {
var result = true;
var msg = '';
if (document.ExamEntry.name.value == '') {
msg += 'You must enter your name\n';
document.ExamEntry.name.focus();
document.getElementById('name').style.color = 'red';
result = false;
}
if (document.ExamEntry.subject.value == '') {
msg += 'You must enter the subject\n';
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color = 'red';
result = false;
}
if (msg == '') {
return result;
}
alert(msg);
return result;
}

Fixing your quotes, and other errors, your code works below.
<!DOCTYPE html>
<html>
<head>
<title>Validator</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" id="ExamEntry" method="POST" action="#" onsubmit="return validateForm();">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td>
<input id="nameField" type="text" name="name" >
</td>
</tr>
<tr>
<td id="subject">Subject</td>
<td>
<input type="text" name="subject" id="subjectField">
</td>
</tr>
<tr>
<td>
<button type="submit" name="Submit" value="Submit">"Submit"</button>
</td>
<td>
<button type="reset" name="Reset" value="Reset">Reset</button>
</td>
</tr>
</table>
</form>
<script>
function validateForm() {
var result = true;
var msg = "";
if (document.getElementById("nameField").value === "") {
msg += "You must enter your name\n";
document.ExamEntry.name.focus();
document.getElementById("name").style.color = "red";
result = false;
}
if (document.ExamEntry.subject.value === "") {
msg += "You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById("subject").style.color = "red";
result = false;
}
if (msg === "") {
return result;
}
else {
alert(msg);
return result;
}
}
</script>
</body>
</html>

We're doing the same thing. Make sure you are using Notepad and that you are saving it as a HTML file when you open it.
Hope this helped!
Also, could someone please explain what "action=success.html" does?

Stuck trying to assign JS vars to hidden fields

I've been fighting with this for a couple of days now...need some guidance please.
I have pared down a much bigger form to a "sample" size to demonstrate what I am after.
The area in question is blocked off in a very recognizable area in the calcFees function.
I also tried to get fancy and have the vars self post to the form so they could be seen, but that does not work.
UPDATE: Here is a bit more info as to what I am running into.
//At this point the var regularfee is = 26.5
// (confirmed by console.log(regularfee);)
// I want to assign it to the hidden field with the id="regularfee"
// I have tried both of the following lines:
document.getElementById('regularfee').value=regularfee.value;
// console.log(document.getElementById('regularfee.value')); shows "null"
document.getElementById('regularfee').value=regularfee;
// console.log(document.getElementById('regularfee')); shows "[object HTMLDivElement]"
What am I doing wrong?
END OF UPDATE *****************************
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="multiForm" action="post.php" method="POST" id="app" name="app">
<div id="page1" class="page" style="visibility:visible;">
Name: <input type="text" size="40" name="name1" >
<br><br>
<table border="1" cellpadding="5" width="50%">
<tbody>
<tr>
<td align="center" colspan="3"><strong>Membership Classification</strong></td>
</tr>
<tr><td width="1000">
<input name="paymethod" type="radio" class="pay" id="paypal" value="paypal" />I would like to use PayPal   
<input name="paymethod" type="radio" class="pay" id="check" value="check" />I would like to pay by check
</td>
<td style="width:150px" align="right">Fee
</td>
<td style="width:150px">
</td></tr>
<tr>
<td><input name="memberclass" type="radio" class="membership" id="regular" value="regular"/> Regular Membership</td>
<td align="right"><div id=regularfee></td>
<td><div align="right" id=regselectedfee></td>
</tr>
<tr><td colspan="2" align="right">Total </td>
<td><div align="right" id=total>
</td></tr></tbody>
</table>
<input type="hidden" name="regularfee" id="regularfee" value="">
<input type="hidden" name="regselectedfee" id="regselectedfee" value="">
<input type="hidden" name="total" id="total" value="">
</form>
<br>
<input type="button" id="C1" value="Continue" onClick="showLayer('page2')">
</td></tr>
</table>
</div>
<div id="page2" class="page">
<b>Page 2
<br><br>
<input type="button" id="B1" value="Go Back" onClick="showLayer('page1')">
<input type="submit" name="submit" value="Click to see Vars" />
</div>
</form>
</body>
</html>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script language="JavaScript">
var paypalselected
var checkselected
var regularfee
var memberfee1
var total
$(function () {
function clearForm()
{
paypalselected = "0";
checkselected = "0";
regularfee = 0.0;
memberfee1 = 0.0;
total = 0.0;
$("#regselectedfee").text(memberfee1.toFixed(2));
$("#total").text(total.toFixed(2));
// clear all radio buttons
$("#regular").prop("checked", false );
}
function calcFees()
{
total = (memberfee1);
$("#total").text(total.toFixed(2));
// **********************************************************************************
// Here is where I want to plug in the 3 JS vars to the hidden fields
// regularfee, regselectedfee, total
// Here is what I've tried:
// vars are not getting plugged in
// If possible, I would like the vars to be plugged in dynamically
// just as the form is updateddynamically when user selects buttons
document.getElementById('regularfee').value=regularfee;
document.getElementById('regselectedfee').value=regselectedfee;
document.getElementById('total').value=total;
// **********************************************************************************
}
function selectPayment()
{
$(".pay").change(function () {
clearForm();
if ($("#paypal").prop("checked")) {
regularfee = 26.50;
$("#regularfee").text(regularfee.toFixed(2));
paypalselected = "1";
checkselected = "0";
}
if ($("#check").prop("checked")) {
regularfee = 25.0;
$("#regularfee").text(regularfee.toFixed(2));
checkselected = "1";
paypalselected = "0";
}
});
}
clearForm();
selectPayment();
//start of membership button selection
$(".membership").change(function () {
if (paypalselected == "1"){
if ($("#regular").prop("checked")) {
memberfee1 = 26.5;
$("#regselectedfee").text(memberfee1.toFixed(2));
calcFees();
}
} //end of paypalselected test
if (checkselected == "1"){
if ($("#regular").prop("checked")) {
memberfee1 = 25.0;
$("#regselectedfee").text(memberfee1.toFixed(2));
calcFees();
}
} //end of checkselected test
}); //end of $(".membership").change(function () {
});
//end of main function
var currentLayer = 'page1';
function showLayer(lyr){
hideLayer(currentLayer);
document.getElementById(lyr).style.visibility = 'visible';
currentLayer = lyr;
window.scrollTo(0,0);
}
function hideLayer(lyr){
document.getElementById(lyr).style.visibility = 'hidden';
}
</script>
<style>
body{
font: 10pt sans-serif;
}
.page{
position: absolute;
top: 10;
left: 100;
visibility: hidden;
}
p.small
{
line-height: 5px;
}
p.smalltext12
{
font-size:12px
}
</style>

You have 2 elements #total. Only the first is given a value:
document.getElementById('total').value = total;
Same for the others.
IDs must be unique to be useful.