functions are not being called or are not running - javascript

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.

Related

Javascript to prevent form post if not validated

I have the following validation code for a simple form. I am able to perform basic validation but the form still gets posted even if the data is wrong and an alert is generated. How can I stop that from happening?
JS CODE
function validate(){
validateForm();
}
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
var y = document.forms["myForm"]["pname"].value;
var email = document.forms["myForm"]["email"].value;
var phone = document.forms["myForm"]["phone"].value;
var date = document.forms["myForm"]["date"].value;
var month = document.forms["myForm"]["month"].value;
var year = document.forms["myForm"]["year"].value;
window.load = function() {
var myForm = document.getElementById('myForm');
myForm.onsubmit = function(e) {
return validateForm(); // will be false if the form is invalid
}
}
if (x == null || x == "") {
alert("Name must be filled out");
return false;}
else if (y == null || y == "") {
alert("Address must be filled out");
return false;
}
else if(email == '' || email.indexOf('#') == -1 || email.indexOf('.') == -1)
{
alert("Insert Valid Email Address");
return false;
}
else if(phone == ''|| phone <1000000000 || phone >9999999999){
alert("Enter valid phone number");
return false;
}else if(date =='' || date<01 || date >31){
alert("Enter valid date ");
return false;
}else if(month =='' || month<1 || month >12){
alert("Enter valid month ");
return false;
}else if(year =='' || year<1800 || year >2015){
alert("Enter valid year ");
return false;
}
}
Form
<form name="myForm" action="http://www.randyconnolly.com/tests/process.php" onsubmit="return validate()" method="post">
<table width="30%" border="0" align="center" cellpadding="10" cellspacing="20">
<tr>
<td width="20%"> <span style="font-size: 22px">Name:</span><br>
<br /></td>
<td width="80%"><input type="text" name="fname" required /></td>
</tr>
<tr>
<td><span style="font-size: 22px">Picture Name: <br>
<br></span></td>
<td><input type="text" name="pname" required /></td>
</tr>
<tr>
<td><span style="font-size: 22px">Email:</span> <br>
<br></td>
<td><input type="text" name="email" required /></td>
</tr>
<tr>
<td><span style="font-size: 22px">Phone:</span> <br>
<br></td>
<td><input type="number" name="phone" required /></td>
</tr>
<tr>
<td><span style="font-size: 22px">Date(mm/dd/yyyy):</span></td>
<td><input type="text" name="month" size="2" required />
/
<input type="text" name="date" size="2" required />
/
<input type="text" name="year" size="4" required /></td>
</tr>
<tr>
<td><span style="font-size: 22px">Artwork</span></td>
<td><input type="file" accept="image/gif" name="pic" ></td>
</tr>
</table>
<br><br>
<input class="button-0" type="submit" value="Submit" />
<br>
</form>
You have several issues with your code.
Your validation function needs to return false to prevent the form submission.
You are registering the window.onload handler inside of the validateForm function. Since, the the time the validateForm function is called, the form is already being submitted.
The handler in your markup is validate. Your validate method doesn't return anything so submission won't be prevented by that either.
The easiest way to fix everything would to be to remove the window.onload handler from your code altogether. You could then change validate to:
function validate() {
return validateForm();
}
And submission should be prevented properly.
I got it working. Instead of calling validate() and in that calling validateForm() I directly called validateForm() at the onsubmit. Thanks for the help.

Javascript function change text colour

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.

Addition-based Captcha fails to check after one ALERT message

I have added a random number addition captcha to a form. The form fields are validated separately. What seems to happen is that if the captcha is blank (alert windows generated and OK button pushed) the form seems to submit anyway. Or if the captch answer is blank, the alert is generated, but clicking the Okay button submits the form.
Basically once there's a wrong captcha but all the required fields validate, the captcha doesn't really stop anything.
Random number generation is being called on the BODY, Validation is being called on the FORM line. Captcha validation is on the SUBMIT button.
I have searched for other solutions, but nothing is helping. I have also tried generating the error message like the code in the answer boxes, but that didn't help. I've simplified the page somewhat here for fewer form fields and text. Form location and email also removed.
Your help would be so appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="resource-type" content="document">
</head>
<!-- numbers generated for captcha -->
<body onLoad="randomNums();">
<!-- validation of form fields in form statement below -->
<form action="location/formemail.bml" method="get" name="contact_form" onsubmit="return Validate()">
<input type="hidden" name="my_email" value="removed" />
<input type="hidden" name="subject" value="Reservation Request Form" />
<input type="hidden" name="order" value="name,email,confirm_email,Number_Of_Adults,Number_Of_Children" />
<input type="hidden" name="thankyou_url" value="thanks-for-your-inquiry.html" />
<input type=hidden name="print_blank_fields" value="0">
<input name="required" type="hidden" value="name,email,confirm_email,Number_Of_Adults,Number_Of_Children" />
<center>
<table BORDER CELLSPACING=2 CELLPADDING=2 WIDTH="100%" >
<tr>
<td>FIRST NAME and LAST NAME<span class="style2">*</span></td>
<td><input type="text" name="name" onKeyUp="CheckForBlank('name')" onBlur="CheckForBlank('name')" title="Enter your name!" placeholder="Full Name" onClick="select()" required /> </td>
</tr>
<tr>
<td>EMAIL ADDRESS<span class="style2">*</span></td>
<td><input type="text" name="email" onKeyUp="CheckForBlank('email')" onBlur="CheckForBlank('email')" title="Enter a valid email address!" placeholder="me#example.com" onClick="select()" required="required" /> </td>
</tr>
<tr>
<td>Confirm EMAIL ADDRESS<span class="style2">*</span></td>
<tr>
<td>NUMBER OF ADULTS<span class="style2">*</span></td>
<td><select NAME="Number_Of_Adults" onkeyup="CheckForBlank('Number_Of_Adults')" onBlur="CheckForBlank('Number_Of_Adults')" title="Enter # Adults" 0nclick="select()" required /><option VALUE="" selected><option VALUE="1-adult">ONE</option><option VALUE="2-adults">TWO</option><option VALUE="3-adults">THREE</option><option VALUE="4-adults">FOUR</option><option VALUE="5-adults">FIVE</option><option VALUE="6-adults">SIX</option></select></td>
</tr>
<tr>
<td>NUMBER OF CHILDREN<span class="style2">*</span></td>
<td><select NAME="Number_Of_Children" onkeyup="CheckForBlank('Number_Of_Children')" onBlur="CheckForBlank('Number_Of_Children')" title="Enter # Children" 0nclick="select()" required /><option VALUE="NONE" selected><option VALUE="No Children">NONE</option><option VALUE="1-child">ONE</option><option VALUE="2-children">TWO</option><option VALUE="3-children">THREE</option><option VALUE="4-children">FOUR</option><option VALUE="5-children">FIVE</option><option VALUE="6-children">SIX</option></select></td>
</tr>
</table>
<center><table WIDTH="75%">
<tr>
<td>
<fieldset>
<label id="error"> </label>
<!-- Here is the captcha area. Onclick tests numbers.
I believe it's here my problem occurs, but I don't know
how to force the addNums to reloop when there's alert -->
<div id="test-it"><strong>Add these numbers, enter in box below, and submit</strong><div id="digit1"></div><div id="plus">+</div><div id="digit2"></div></div>
<div id="buttons"><input type="text" id="answer" />
<input type="submit" value="Answer at left? Click to Submit" onClick="addNums()"/> <input type="reset" value="Reset Form" /></div>
<div id="status"></div>
</fieldset>
</td></tr>
</table>
</center>
</form>
<script>
var CheckForBlank = function (name) {
var x = document.forms['contact_form'].elements[name].value;
var temp = '';
for(i=0;i<x.length;i++){
temp = x.replace(/ /g,' ');
x = temp;
}
if(temp == ' ' || temp == ' ') temp = '';
document.forms['contact_form'].elements[name].value = temp;
if(temp == '') {
document.forms['contact_form'].elements[name].focus();
document.getElementById('contact_form'+name).innerHTML = '<strong style="color:red;">You can not leave this field blank!<\/strong>';
} else{
document.getElementById('contact_form'+name).innerHTML = '';
}
}
var Validate = function () {
if( (!(/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\#((\w)([\w\-]?)+\.)+([a-z]{2,4})$/i.test(document.contact_form._email.value))) ) {
document.getElementById('error').innerHTML = '<strong style="color:red;">Please fill in the required fields of the form! Don\'t forget to provide a valid email address! <\/strong>';
return false;
}
}
</script>
<script type="text/javascript">
function addNums(){
var answer = document.getElementById("answer").value;
var digit1 = parseInt(document.getElementById("digit1").innerHTML);
var digit2 = parseInt(document.getElementById("digit2").innerHTML);
var sum = digit1 + digit2;
if(answer == ""){
alert("Please add the numbers");
return false;
}else if(answer != sum){
alert("Your answer is incorrect; try again.");
return false;
}else{
// all good now! //
document.getElementById("status").innerHTML = "Correct! Thank you for validating a person is submitting the form";
document.getElementById("answer").value = "";
}
}
function randomNums(){
var rand_num1 = Math.floor(Math.random() * 32) + 1;
var rand_num2 = Math.floor(Math.random() * 10) + 1;
document.getElementById("digit1").innerHTML = rand_num1;
document.getElementById("digit2").innerHTML = rand_num2;
}
</script>
</body>
</html>

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