Javascript function change text colour - javascript

So I am creating an exam entry form for school and when a user enters anything wrong, the name of the field will turn red (what the user has input will remain the same) I need to be able to do this with an onclick event activated by my reset button however the function I have right now does not do this. Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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";
if(result) document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
if(result) document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.examnumber.value=="") {
msg+="You must enter the exam number \n";
if(result) document.ExamEntry.examnumber.focus();
document.getElementById('examnumber').style.color="red";
result = false;
}
if (document.ExamEntry.examnumber.value.length!=4) {
msg+="Your exam number must be exactly 4 digits \n";
if(result) document.ExamEntry.examnumber.focus();
document.getElementById('examnumber').style.color="red";
result = false;
}
if(msg != ""){
alert(msg);
return result;
}
var checked = null;
var inputs = document.getElementsByName('examtype');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked = inputs[i];
break;
}
}
if(checked==null) {
alert('Please choose an option');
return false;
}
else {
return confirm('You have chosen '+checked.value+' is this correct?');
}
function resetNames() {
document.getElementById('name').removeAttribute('style')
document.getElementById('subject').removeAttribute('style')
document.getElementById('examnumber').removeAttribute('style')
}
}
</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" placeholder='Name' /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" placeholder='Subject' /></td>
</tr>
<tr>
<td id="examnumber">Exam Number</td>
<td><input type="text" name="examnumber" size="4" maxlength="4" placeholder='No.'/></td>
</tr>
<tr>
<td><input type="radio" id="examtypeGCSE" name="examtype" value="GCSE" /> : GCSE<br/>
<input type="radio" id="examtypeA2" name="examtype" value="A2" /> : A2<br/>
<input type="radio" id="examtypeAS" 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" onclick="return resetNames();" /></td>
</tr>
</table>
</form>
</body>
</html>

I think your closing braces may be in the wrong place... move one of the two closing braces at the end of your JavaScript to the end of the validateForm() function.

try something like this
YOUR CODE
function validateForm() {
....
function resetNames() {
document.getElementById('name').removeAttribute('style')
document.getElementById('subject').removeAttribute('style')
document.getElementById('examnumber').removeAttribute('style')
}
}
CHANGE TO
function validateForm() {
......
}
function resetNames() {
document.getElementById('name').removeAttribute('style')
document.getElementById('subject').removeAttribute('style')
document.getElementById('examnumber').removeAttribute('style')
}
Reason you have nested your function one inside another.

Related

functions are not being called or are not running

I have been working on this for a week now and cannot figure out for the life of me what I have missed or if I have put something somewhere that it is not supposed to be. the code was working fine until I began making changes to the confirmSubmit() function and now it seems like nothing is working properly other than displaying the page. I had my teacher look at it too and he said that he couldn't find out either. I just don't know anymore maybe one of you all can help me solve this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="AS400.css" type="text/css" />
<title>Registration</title>
<script type="text/javascript">
/* <![CDATA[ */
// This JavaScript removes default values form field
function doClear(theText) {
if (theText.value == theText.defaultValue) {
theText.value = ""
}
}
// This JavaScript allows characters except numbers
function AcceptLetters(objtextbox)
{
var exp = /[^\D]/g;
objtextbox.value = objtextbox.value.replace(exp,'');
}
// This JavaScript allows numbers only
function AcceptDigits(objtextbox)
{
var exp = /[^\d]/g;
objtextbox.value = objtextbox.value.replace(exp,'');
}
//This JavaScript confirms everything is filled out
function confirmSubmit()
{
var submitForm = window.confirm("Are you sure you want to submit the form?");
var Special offers = false;
var offers = false;
if (document.forms[0].name.value=="Name" || document.forms[0].name.value == "") {
window.alert("Please input your name.");
return false;}
if (document.forms[0].email.value == "E-Mail Address" || document.forms[0].email.value == "") {
window.alert("Please input your email.");
return false;}
if (document.forms[0].password1.value == "" || document.forms[0].password2.value == "") {
window.alert("Please input your password twice.");
retrun false;}
if (document.forms[0].SQ.value == "" || document.forms[0].SQ.value == "none") {
window.alert("Please choose a security question.");
return false;}
if (document.forms[0].sq_answer.value == "Question Answer"|| document.forms[0].sq_answer.value == "") {
window.alert("Please input a sequrity question answer.");
return false;}
for (var i = 0; i <= 1; ++i) {
if (document.forms[0].SpecialOffers[i].checked == true) {
Special offers = true;
break;}
}
if (Special offers == false) {
window.alert("You must select yes or no to special offers.");
return false;
}
for (var k = 0; k <= 3; k++) {
if (document.forms[0].Offers[k].checked == true) {
offers = true;
break;}
}
if (offers == false) {
window.alert("You must choose one offer.");
return false;}
else
return true;
}
/* ]] */
</script>
</head>
<body>
<form action="FormProcessor.html" method = "get" enctype = "application/x-www-form-urlencoded" onsubmit="return confirmSubmit()">
<table width="50%">
<tr><th colspan="2"><h1>Registration Page</h1></th></tr>
<tr><th colspan="2"><h2>Personal Information<h2></th></tr>
<tr><th colspan="2">(Fields with asterisks are mandatory)</th></tr>
<tr><td>* Name: </td>
<td><input type="text" name="name" value="Name" maxlength="20" onFocus="doClear(this)" onkeyup="AcceptLetters(this)" /></td></tr>
<tr><td>* E-Mail:</td>
<td><input type="text" name="email" value="E-mail Address" onFocus="doClear(this)" /> </td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><th colspan="2"><h3>Security Information</h3></th></tr>
<tr><td>* Password:</td><td><input type="password" name="password1" /></td></tr>
<tr><td>* Confirm Password:</td><td><input type="password" name="password2" /></td></tr>
<tr><td>* Security Question:</td>
<td><select id="selection" name="SQ">
<option value="none">Please Choose One</option>
<option value="color">What is your favorite color?</option>
<option value="name">What is your Mother's maiden name?</option>
<option value="pet">What is your pets name?</option>
<option value="school">What high school did you graduate from?</option>
</select></td></tr>
<tr><td>Answer:</td><td><input type="text" name="sq_answer" value="Question Answer" onFocus="doClear(this)" /></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><th colspan="2"><h4>* Preferences</h4></th></tr>
<tr><th colspan="2">Would you like any special offers sent to your E-mail address?</th></tr>
<tr><th colspan="2">Yes<input type="radio" name="SpecialOffers" value="Yes"/>No<input type="radio" name="SpecialOffers" value="No" /></th></tr>
<tr><th colspan="2"><h5>Interests</h5></th></tr>
<tr><th colspan="2"><input type="checkbox" name="Offers" value="check"/>Entertainment</th></tr>
<tr><th colspan="2"><input type="checkbox" name="Offers" value="check"/>Shopping</th></tr>
<tr><th colspan="2"><input type="checkbox" name="Offers" value="check"/>Business</th></tr>
<tr><th colspan="2"><input type="checkbox" name="Offers" value="check"/>Exercise</th></tr>
<tr><td></td></tr>
<tr><th colspan="2"><input id="submit" type="submit" value="Submit"/><input id="reset" type="reset" value="Reset"/></th></tr>
</table>
</form>
</body>
</html>
You have few syntax errors:
Special offers variable can't have spaces in it.
Keyword is not retrun its return.

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?

Confirmation of radio buttons

I have all ready inserted the validation for the radio button and now all i need is to have a alert box to come up before the code proceeds asking "Are you sure you want to pick 'x'" when x would be the level selected. And if cancel is pressed it returns to the webpage.
Thank you are here is my code below.
<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.number.value == "") {
msg += "You must enter a exam number \n";
document.ExamEntry.number.focus();
document.getElementById('number').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.level[0].checked == false) && (document.ExamEntry.level[1].checked == false) && (document.ExamEntry.level[2].checked == false)) {
msg += "You mus select the level entered \n";
result = false;
}
}
function CheckField(obj) {
if (obj.value.length < '4') {
alert('Name field must 4 character long');
obj.focus();
}
}
</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="number">Examination Number</td>
<td><input type="text" name="number" maxlength="4" onblur="CheckField(this)"/></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<input type="radio" name="level">GCSE
<input type="radio" name="level">AS
<input type="radio" name="level">A2
<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>
</html>
Hope this helps to get along.
<!DOCTYPE html>
<html>
<head>
<title>Exam entry</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function validateForm() {
var result = true;
var msg = "";
var objx;
// test for empty inputs
objx = document.getElementById("subjectInput");
if (objx.value.length == 0) {
msg += "You must enter the subject \n";
objx.focus();
document.getElementById('subject').style.color = "red";
result = false;
}
objx = document.getElementById("numberInput");
if (objx.value.length == 0) {
msg += "You must enter a exam number \n";
objx.focus();
document.getElementById('number').style.color = "red";
result = false;
}
objx = document.getElementById("nameInput");
if (objx.value.length == 0) {
msg += "You must enter your name \n";
objx.focus();
document.getElementById('name').style.color = "red";
result = false;
}
// checked level is needed below for confirmation
var objx = document.ExamEntry;
var checkedLevel = "";
if (objx.level[0].checked) {
checkedLevel = objx.level[0].value;
}
else
if (objx.level[1].checked) {
checkedLevel = objx.level[1].value;
}
else
if (objx.level[2].checked) {
checkedLevel = objx.level[2].value;
}
if (checkedLevel.length == 0) {
msg += "You must select the level entered \n";
result = false;
}
if (result) {
// test for minimum length of name
objx = document.getElementById("nameInput");
if (objx.value.length < 4)
{
objx.focus();
document.getElementById('name').style.color = "red";
//alert('Name field must 4 character long');
msg += 'Name field must be 4 characters long'
result = false;
}
}
// confirm checked level
if (result) {
result = confirm("Are you sure you want to pick '" + checkedLevel + "' ?");
}
else {
alert(msg);
}
return result;
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" onsubmit="return validateForm();" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" id="nameInput" /></td>
</tr>
<tr>
<td id="number">Examination Number</td>
<td><input type="text" name="number" id="numberInput" maxlength="4" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" id="subjectInput" /></td>
</tr>
<tr>
<input type="radio" name="level" value="GCSE">GCSE
<input type="radio" name="level" value="AS">AS
<input type="radio" name="level" value="A2">A2
<tr>
<td><input type="submit" name="Submit" value="Submit" /> </td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>

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