how to select multiple checkbox validation in javascript - 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;
}

Related

fill details inside checked checkbox

when I checked any checkbox , then it should gives a error message for all details whatever inside checked checkbox. In my code if I select 1st checkbox then it shows one textbox and one dropdown list, wants to do validation to fill textbox and dropdown list value, until it don't check another options ,& same with all checkbox. Rightnow I just take textbox and dropdown list for only 1st checkbox but it is for every checkbox.
In simple words, unless i don't fill textbox value and dropdown value, it does not allow to check next option.
I don't know to do. can anyone please tell me how to do this.
<script>
function validate()
{
document.getElementById("error").innerHTML="atleast check one checkbox.";
//alert("");
var chk=document.getElementsByName("chkbox");
var hasChecked = false;
for(var i=0; i<chk.length; i++)
{
if(chk[i].checked)
{
hasChecked= true;
break;
}
}
return true;
}
function toggle(source) {
checkboxes = document.getElementsByName('a[]');
for(var i=0, n=checkboxes.length;i<n;i++)
{
checkboxes[i].checked = source.checked;
}
}
</script>
</head>
<body>
<form method="post" name="form">
<table>
<tr><td><div id="error"></div></td></tr>
<tr><td style="padding:10px;padding-top:0; padding-bottom:0" >1 .What does the scope of test include?</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" value="a) selected 1"> a)select 1<br /><br />
Name : <input type="text" name="fname" /><br /><br />
Country : <select><option value="1">india</option><option value="2">usa</option></select>
</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" value="b) selected 2"/> b)select 2</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" value="c)selected 3"/> c select 3</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" value="d)selected 4"/> d)select 4</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" onClick="toggle(this)" value="e)Or all of the above"/> e)Or all of the above </td></tr>
</table>
<input type="submit" onclick="validate()" name="submit" value="Submit" />
</form>
</body>
</html>
<?php
if(isset($_POST['submit']))
{
$a=#$_POST['a'];
$supplies = #implode(',',$_POST['a']);
echo $supplies;
}
?>
Below is the solution:
<script>
function validate()
{
var inputTags = document.getElementsByTagName('input');
var checkboxCount = 0;
for (var i=0, length = inputTags.length; i<length; i++) {
if (inputTags[i].type == 'checkbox') {
if(inputTags[i].checked){
checkboxCount++;
}
}
}
if(checkboxCount == 0){
document.getElementById("error").innerHTML="atleast check one checkbox.";
return false;
}else{
checkboxesahas = document.getElementsByClassName('aopt');
for(var i=0, n=checkboxesahas.length;i<n;i++)
{
if(checkboxesahas[i].checked){
ahaselements = document.getElementsByClassName('ahaselement');
for(var j=1;j<=ahaselements.length;j++) {
ahaselementid = 'ahaselement'+j;
if(document.getElementById(ahaselementid).value == ''){
document.getElementById("error").innerHTML="value missing in one or more of checked checkbox element.";
return false;
}
}
}
}
}
return true;
}
function toggle(source) {
checkboxes = document.getElementsByClassName('aopt');
for(var i=0, n=checkboxes.length;i<n;i++)
{
checkboxes[i].checked = source.checked;
}
}
</script>
</head>
<body>
<form method="post" name="form">
<table>
<tr><td><div id="error"></div></td></tr>
<tr><td style="padding:10px;padding-top:0; padding-bottom:0" >1 .What does the scope of test include?</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" class="aopt" value="a) selected 1"> a)select 1<br /><br />
Name : <input type="text" name="fname" id="ahaselement1" class="ahaselement" /><br /><br />
Country : <select name="country" id="ahaselement2" class="ahaselement"><option value="">no</option><option value="1">india</option><option value="2">usa</option></select>
</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" class="aopt" value="b) selected 2"/> b)select 2</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" class="aopt" value="c)selected 3"/> c select 3</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" class="aopt" value="d)selected 4"/> d)select 4</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" class="aopt" onClick="toggle(this)" value="e)Or all of the above"/> e)Or all of the above </td></tr>
</table>
<input type="submit" onclick="return validate()" name="submit" value="Submit" />
</form>
</body>
</html>
<?php
if(isset($_POST['submit']))
{
$a=#$_POST['a'];
$supplies = #implode(',',$_POST['a']);
echo $supplies;
}
?>
PS : I have filled validation in error id via innerHTML same way as you did. Also there are some changes made in checkboxes and other elements. Please check that also.
Let me know if there is any issue. Thank You! :)

Submit Value from price calculator [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have an order form that should filled with identity and price calculated with javascript. But I have no idea how to submit the calculated value to php file.
This is the code :
<html>
<head><title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
</head>
<body>
<table width="1020">
<form action="kirim.php" method="POST" >
<tr>
<td colspan="2"><h2>Form Pemesanan</h2></td>
</tr>
<tr>
<td width="80">Nama</td>
<td><input name="nama" type="text" id="nama" size="30" required="true"></td>
</tr>
<tr>
<td>Nomor HP</td>
<td><input name="nomor" type="text" id="nomor" size="30" required="true"></td>
</tr>
<tr>
<td><p>Email</p> </td>
<td><input name="email" type="text" id="email" size="30" required="true"></td>
</tr>
<tr>
<td></td>
<td><center>Nama Server</center></td><td><center>Masa Aktif</center></td><td><center>Jumlah (Rp.)</center></td><td><center>Diskon (Rp.)</center></td>
<tr>
<td>Server</td>
<td>
<input type="checkbox" name="server1" value="SSH AMERIKA (Nodes Direct)">SSH AMERIKA (Nodes Direct)
</td>
<td width="450">
<input onclick="hitung(this.value)" type="radio" id="a1" name="serverr1" value="10000">1 bulan
<input onclick="hitung(this.value)" type="radio" id="a2" name="serverr1" value="25000">3 bulan
<input onclick="hitung(this.value)" type="radio" id="a3" name="serverr1" value="50000">6 bulan
<input onclick="hitung(this.value)" type="radio" id="a4" name="serverr1" value="75000">9 bulan
<input onclick="hitung(this.value)" type="radio" id="a5" name="serverr1" value="100000">12 bulan</td>
<td width="120" id="amerika"></td>
<td width="100" id="amerika2"></td>
<tr>
</form>
</table>
<script>
var harga=0, harga2=0, harga3=0, harga4=0, hargasementara=0, hargasementara2=0, hargasementara3=0, hargasementara4=0;
//------------------------------------------------------HITUNG RADIO BUTTON 1-----------------------------------------------
function hitung(){
var hargasementara;
if (document.getElementById('a1').checked) {
hargasementara=10000;
harga=document.getElementById('a1').value;
}
else if (document.getElementById('a2').checked){
hargasementara=30000;
harga=document.getElementById('a2').value;
} else if (document.getElementById('a3').checked){
hargasementara=60000;
harga=document.getElementById('a3').value;
}
else if (document.getElementById('a4').checked){
hargasementara=90000;
harga=document.getElementById('a4').value;
}
else if (document.getElementById('a5').checked) {
hargasementara=120000;
harga=document.getElementById('a5').value;
}
else {
hargasementara=0;
}
document.getElementById("amerika").innerHTML = hargasementara;
document.getElementById("amerika2").innerHTML = hargasementara-harga;
akhir();
}
//------------------------------------------------------HITUNG RADIO BUTTON 2-----------------------------------------------
function hitung2(){
var hargasementara2;
if (document.getElementById('i1').checked) {
hargasementara2=15000;
harga2=document.getElementById('i1').value;
}
else if (document.getElementById('i2').checked) {
hargasementara2=45000;
harga2=document.getElementById('i2').value;
} else if (document.getElementById('i3').checked) {
hargasementara2=90000;
harga2=document.getElementById('i3').value;
} else if (document.getElementById('i4').checked) {
hargasementara2=135000;
harga2=document.getElementById('i4').value;
} else if (document.getElementById('i5').checked) {
hargasementara2=180000;
harga2=document.getElementById('i5').value;
} else {
hargasementara2=0;
}
document.getElementById("indonesia").innerHTML = hargasementara2;
document.getElementById("indonesia2").innerHTML = hargasementara2-harga2;
akhir();
}
//------------------------------------------------------HITUNG RADIO BUTTON 3-----------------------------------------------
function hitung3(){
var hargasementara3;
if (document.getElementById('s1').checked) {
hargasementara3=15000;
harga3=document.getElementById('s1').value;
}
else if (document.getElementById('s2').checked) {
hargasementara3=45000;
harga3=document.getElementById('s2').value;
} else if (document.getElementById('s3').checked) {
hargasementara3=90000;
harga3=document.getElementById('s3').value;
} else if (document.getElementById('s4').checked) {
hargasementara3=135000;
harga3=document.getElementById('s4').value;
} else if (document.getElementById('s5').checked) {
hargasementara3=180000;
harga3=document.getElementById('s5').value;
} else {
hargasementara3=0;
}
document.getElementById("singapura").innerHTML = hargasementara3;
document.getElementById("singapura2").innerHTML = hargasementara3-harga3;
akhir();
}
//------------------------------------------------------HITUNG RADIO BUTTON 4-----------------------------------------------
function hitung4(){
var hargasementara4;
if (document.getElementById('ss1').checked) {
hargasementara4=20000;
harga4=document.getElementById('ss1').value;
}
else if (document.getElementById('ss2').checked) {
hargasementara4=60000;
harga4=document.getElementById('ss2').value;
} else if (document.getElementById('ss3').checked) {
hargasementara4=120000;
harga4=document.getElementById('ss3').value;
} else if (document.getElementById('ss4').checked) {
hargasementara4=180000;
harga4=document.getElementById('ss4').value;
} else if (document.getElementById('ss5').checked) {
hargasementara4=240000;
harga4=document.getElementById('ss5').value;
} else {
hargasementara4=0;
}
document.getElementById("singapuraa").innerHTML = hargasementara4;
document.getElementById("singapuraa2").innerHTML = hargasementara4-harga4;
akhir();
}
function akhir(){
hargaakhir=harga*1+harga2*1+harga3*1+harga4*1;
document.getElementById("jumlah").innerHTML = hargaakhir;
}
</script>
<p> Jumlah Total Setelah Diskon:</p>
<p id="jumlah"></p>
</body>
So, I want hargaakhir variable (result of calculation) is submitted with the form to kirim.php
Thanks before,
as well as writing to the html element jumlah create a hidden form input
<input type="hidden" name="sum" value="">
populate it with the js and retrieve after the form was submitted with $_POST['sum']
In your "kirim.php" if you do
echo $_POST['serverr1'];
you'll get the form value since in your radio button you define the element name as "serverr1"

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?

I wish to make my code validate a field to make sure it is a number of four digits. How can I do this?

I am currently doing a GCSE course which allows me to ask for assistance from IT sources as long as I reference them in my investigation. I wish to make the following code validate that there is a number of four digits in the Examination Number entry field. I'm okay with simple validation but this is another step for me.
<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.examnumber.value=="") {
msg+="You must enter your Examination Number \n";
document.ExamEntry.examnumber.focus();
document.getElementById('examnumber').style.color="red";
result = false;
}
var checked = null;
var inputs = document.getElementsByName('examtype');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked = inputs[i];
document.getElementById('examtype').style.color="red";
}
}
if(checked==null)
{
msg+="Please choose an option";
result = false;
}
else{
confirm("You have chosen "+checked.value+" is this the correct course?");
}
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>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="examnumber">Examination Number</td>
<td><input type="text" name="examnumber" /></td>
</tr>
<tr>
<td><input type="radio" id="examtype" name="examtype" value="GCSE" /> : GCSE<br />
<td><input type="radio" id="examtype" name="examtype" value="A2" /> : A2<br />
<td><input type="radio" id="examtype" name="examtype" value="AS"/> : AS<br />
</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>
</body>
Regarding checking if it is number, you can use some regex:
e.g.
var reg = /^\d{4}$/ig;
var regExRes = reg.exec(document.ExamEntry.examnumber.value);
if (document.ExamEntry.examnumber.value == "" || (regExRes == null || regExRes.length == 0)) {
msg += "You must enter your Examination Number \n";
document.ExamEntry.examnumber.focus();
document.getElementById('examnumber').style.color = "red";
result = false;
}
To avoid entering anything beside number, I would suggest you to use something like jquery pluging called masked input
EDIT:
line changed from var reg = /\d{4}/ig; to var reg = /^\d{4}$/ig;

Categories

Resources