SHTML and JavaScript not working - javascript

I am having a problem with my javascript not working inside my includes file that is a SHTML file. This is for a class I am tacking, but any way since we do not have SSI we have to use SHTML so we can use #includes here is what I have. I have just like the book ask but is not working. now this is my head document
<!DOCTYPE html>
<!-- head_document.shtml -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<base href="http://studentwebfiles.us/CPM190/MSchultz/ssi/index.shtml">
<link rel="stylesheet" href="css/desktop.css">
<link rel="stylesheet" href="css/tablet.css"
media="screen and (max-width: 900px)">
<script src="scripts/feedbackFormValidate.js"></script>
<title> Every Little Detail Auto Supplies - USA's Largest Supplier</title>
</head>
now this is my feedback.shtml file. Everything works beside the javascript
include virtual="../common/document_head.shtml"-->
<body>
<header>
<!--#include virtual="../common/logo_row.shtml"-->
<!--#include virtual="../common/mainmenu_row.shtml"-->
</header>
<h3>Customer Feedback Form</h3>
<form id="contactForm" onsubmit="feedbackFormValidate()">
<table>
<tr>
<td>Salutation:</td>
<td><select name="salute">
<option> </option>
<option>Mrs.</option>
<option>Ms.</option>
<option>Mr.</option>
<option>Dr.</option>
</select></td>
</tr>
<tr>
<td>First Name:</td>
<td><input type="text" name="firstName" size="40"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="lastName" size="40"></td>
</tr>
<tr>
<td>E-mail Address:</td>
<td><input name="email" size="40" type="text"></td>
</tr>
<tr>
<td>Phone Number:</td>
<td><input type="text" name="phone" size="40"></td>
</tr>
<tr>
<td>Subject:</td>
<td><input type="text" name="subject" size="40"></td>
</tr>
<tr>
<td>Comments:</td>
<td><textarea cols="30" name="message" rows="6"></textarea></td>
</tr>
<tr>
<td colspan="2">Please check here if you wish to receive a reply:
<input type="checkbox" name="reply" value="yes"></td>
</tr>
<tr>
<td><input type="submit" value="Send Feedback"></td>
<td class="RightAligned">
<input type="reset" value="Reset Form"></td>
</tr>
</table>
</form>
<footer>
<!--#include virtual="../common/footer_row.shtml"-->
</footer>
</body>
This is my . js file
function feedbackFormValidate()
{
var contactFormObj = document.getElementById("contactForm");
var firstName = contactFormObj.firstName.value;
var lastName = contactFormObj.lastName.value;
var phone = contactFormObj.phone.value;
var email = contactFormObj.email.value;
var everythingOK = true;
if (!validateName(firstName))
{
alert("Error: Invalid first name.");
everythingOK = false;
}
if (!validateName(lastName))
{
alert("Error: Invalid last name.");
everythingOK = false;
}
if (!validatePhone(phone))
{
alert("Error: Invalid phone number.");
everythingOK = false;
}
if (!validateEmail(email))
{
alert("Error: Invalid e-mail address.");
everythingOK = false;
}
if (everythingOK)
{
if (contactFormObj.reply.checked)
alert("Warning: The e-mail feature is currently not supported.");
alert("All the information looks good.\nThank you!");
return true;
}
else
return false;
}
function validateName(name)
{
var p = name.search(/^[-'\w\s]+$/);
if (p == 0)
return true;
else
return false;
}
function validatePhone(phone)
{
var p1 = phone.search(/^\d{3}[-\s]{0,1}\d{3}[-\s]{0,1}\d{4}$/);
var p2 = phone.search(/^\d{3}[-\s]{0,1}\d{4}$/);
if (p1 == 0 || p2 == 0)
return true;
else
return false;
}
function validateEmail(address)
{
var p = address.search(/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})$/);
if (p == 0)
return true;
else
return false;
}
any help or ideas would be great! Thanks

figured it out Ipages keep kicking out onsubmit.

Related

form validation javascript (error message showed and disappeared quickly)

i want to show the error messages next to the input element and if there's no error messages then send the data to the server (clear data from form) so fire the function on submit
http://codepen.io/anon/pen/RPNpNw
the problem is the error messages showed and disappeared quickly (blink)
but when change the input type to button
http://codepen.io/anon/pen/EjaZqe
will work but the data will be still in form and not cleared as input type="submit" will do
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
<form>
<table style="width:50%;">
<tr>
<td>first name</td>
<td><input type="text" id="txtfname" /></td>
<td><span id="error"></span></td>
</tr>
<tr>
<td>age</td>
<td><input type="number" id="txtage" onblur="checkAge(txtage)" /></td>
<td><span id="errorage"></span></td>
</tr>
<tr>
<td>user name</td>
<td><input type="text" id="txtuser" /></td>
<td><span id="erroruser"></span></td>
</tr>
<tr>
<td>country</td>
<td>
<select onselect="checkSelect(this)" id="slct">
<option selected="selected" value="default">select your country</option>
<option>egypt</option>
<option>usa</option>
</select>
</td>
<td><span id="errorslct"></span></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="register" onclick="allvalidate()" /></td>
</tr>
</table>
</form>
<script>
function allvalidate() {
validate();
checkAge(txtage);
checkuser(txtuser);
checkSelect(this);
}
function validate() {
var txtf = document.getElementById('txtfname');
if (txtf.value == 0 || txtf.value == null) {
document.getElementById('error').innerText = ('you must enter firstname');
document.getElementById('error').style.color = 'red';
txtf.focus();
return false;
}
else {
document.getElementById('error').innerText = ('');
//return true;
}
}
function checkAge(input) {
if (input.value < 18 || input.value > 70) {
document.getElementById('errorage').innerText = ('age must be from 18 :70');
document.getElementById('errorage').style.color = 'red';
return false;
}
else {
document.getElementById('errorage').innerText = ('');
return true;
}
}
function checkuser(input) {
var pattern = '^[a-zA-Z]+$';
if (input.value.match(pattern)) {
document.getElementById('erroruser').innerText = '';
return true;
}
else {
document.getElementById('erroruser').innerText = ('enter valid email');
document.getElementById('erroruser').style.color = 'red';
return false;
}
}
function checkSelect() {
var select=document.getElementById('slct')
if (select.value=='default') {
document.getElementById('errorslct').innerText = ('you must choose country');
document.getElementById('errorslct').style.color = 'red';
return false;
}
else {
document.getElementById('errorslct').innerText = '';
return true;
}
}
</script>
</body>
</html>
Change
<td><input type="submit" value="register" onclick="allvalidate()" /></td>
To:
<td><input type="submit" value="register" onclick="return allvalidate()" /></td>
Otherwise the boolean value is discarded. You also need to change allvalidate to actually return false if one of the validations fail:
function allvalidate() {
var validated = true;
if (!validate()) validated = false;
if (!checkAge(txtage)) validated = false;
if (!checkuser(txtuser)) validated = false;
if (!checkSelect(this)) validated = false;
return validated;
}
<tr>
<td></td>
<td><input type="submit" value="register" onclick="allvalidate()" /></td>
</tr>
well, I'm not expert but what I think is that data is not sending, you need to call the function on onsubmit event, instead of calling it on onclick event. It would send the data as well.

Need help checking verification of radio buttons JavaScript

I am doing a GCSE computing coursework task and I am trying to get the validation right on a set of 3 radio buttons however the code for the radio buttons (which I copy and pasted from an external source that I do not remember now) however this copy and pasted code seems to override the validation for the other fields (Two text input fields and a number input field) The code is shown below.
<!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";
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 the exam number \n";
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";
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];
break;
}
}
if(checked==null)
{
alert('Please choose an option');
return false;
}
else{
return confirm('You have chosen '+checked.value+' is this correct?');
}
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 id="examnumber">Exam Number</td>
<td><input type="number" name="examnumber" size="4" maxlength="4"></td>
</tr>
<tr>
<td><input type="radio" id="examtype" name="examtype" value="GCSE" /> : GCSE<br/>
<input type="radio" id="examtype" name="examtype" value="A2" /> : A2<br/>
<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>
</body>
</html>
You still had quite some errors in the HTML document:
duplicate ID's
unclosed <input> tags
missing 'else' in javascript
duplicate </body> tag
extra double quotes in <script> tag
I fixed these. I also moved the alert of your msg variable above the check for the options, so that they don't interfere with each other. In order to get the first field to focus instead of the last in line, I've added a check to see if result is still true:
<!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?');
}
}
</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 id="examnumber">Exam Number</td>
<td><input type="text" name="examnumber" size="4" maxlength="4"/></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" /></td>
</tr>
</table>
</form>
</body>
</html>

OCR Web Validation using Javascript

I am a Computing teacher trying to stay one step ahead of my pupils whom are working on a assessment to with validating web forms using HTML and JavaScript. So far, I have managed to do the following but can no longer move forward:
<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';
document.ExamEntry.name.focus();
document.getElementById("name").style.color="#FF0000";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+=' You must enter the subject';
document.ExamEntry.subject.focus();
document.getElementById("subject").style.color="#FF0000";
result = false;
}
if (document.ExamEntry.examnumber.value=="") {
msg+=' You must enter the examination number';
document.ExamEntry.examnumber.focus();
document.getElementById("examnumber").style.color="#FF0000";
result = false;
}
if(document.getElementById("examnumber").value.length!=4)
{
msg+='You must have exactly 4 digits in the examination number textbox';
document.ExamEntry.examnumber.focus();
document.getElementById("examnumber").style.color="#FF0000"
result = false;
}
function checkRadio() {
var user_input = "";
var len = document.ExamEntry.entry.length;
var i;
for (i=0;i< len;i++) {
if (document.ExamEntry.entry[i].length.checked) {
user_input = document.ExamEntry.entry[i].value;
break;
}
}
if (msg==""){
return result;
}
else
{
alert(msg);
return result;
}
}
function resetForm()
{
document.getElementById('ExamEntry').reset();
document.getElementById("name").style.color="#000000";
document.getElementById("subject").style.color="#000000";
document.getElementById("examnumber").style.color="#000000";
}
</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 id='examnumber'>Examination Number</td>
<td><input type='text' name='examnumber'></td>
</tr>
<tr>
<td id='entry'>Level of Entry</td>
<td><input type='radio' name='entry' value='gcse'>GCSE<BR></td>
<td><input type='radio' name='entry' value='as'>AS<BR></td>
<td><input type='radio' name='entry' value='a2'>A2<BR></td>
</tr>
<tr>
<td><input type='submit' name='Submit' value='Submit' onclick='return (validateForm());'></td>
<td><input type='reset' name='Reset' value='Reset' onclick=' (resetForm());'></td>
</tr>
</table>
</form>
</body>
What I want to do and what I am trying to do are two different things and it's now hit the point where I am banging my head against a brick wall.
What I WANT to do is be able to:
Extend the Javascript code to make sure that the user’s examination number is exactly 4 digits.
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.
Can anyone help me before I totally lose the plot?
It's been a long time I have tried pure JS. It's a pleasure to try it out anytime though. So, someone's lukcy and I had some free time. I am a very tiny bit OCD when it comes to coding and I ended up cleaning a lot of your code, such as
Always enclose HTML attributes in double quotes - not a hard rule though.
Always close the input attributes - /> - not a hard rule though.
Define your elements and resue where needed in JS
Alwayst try and keep your JS separate from HTML - it's a good practice.
And follow the good old basics
As a result, here we go:
Demo: Fiddle
HTML:
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="#">
<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 id="examnumber">Examination Number</td>
<td><input type="text" name="examnumber" /></td>
</tr>
<tr>
<td id="entry">Level of Entry</td>
<td><input type="radio" name="entry" value="gcse" />GCSE<BR></td>
<td><input type="radio" name="entry" value="as" />AS<BR></td>
<td><input type="radio" name="entry" value="a2" />A2<BR></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" /></td>
<td><input type="reset" name="Reset" value="Reset" onclick="resetForm();"></td>
</tr>
</table>
</form>
JS:
var form = document.forms['ExamEntry'];
var iName = form.elements['name'];
var iSubject = form.elements['subject'];
var iExamNumber = form.elements['examnumber'];
var iLevel = form.elements['entry'];
function validateForm() {
var result = true;
var msg = "";
if (iName.value=="") {
msg+='You must enter your name';
iName.focus();
iName.style.color="#FF0000";
result = false;
} else if (iSubject.value=="") {
msg+=' You must enter the subject';
iSubject.focus();
iSubject.style.color="#FF0000";
result = false;
} else if (iExamNumber.value=="" || !/^\d{4}$/.test(iExamNumber.value)) {
msg+=' You must enter a valid examination number';
iExamNumber.focus();
iExamNumber.style.color="#FF0000";
result = false;
} else if(!checkEntry()) {
msg+=' You must select a level';
result = false;
} else {
var cfm = confirm("You have selected " + checkEntry() + ". Are you sure to punish yourself?");
if (!cfm) {
result = false;
}
}
if (!result && msg != "") alert (msg);
return result;
}
function checkEntry() {
for (var i=0; i<iLevel.length; i++) {
if (iLevel[i].checked) {
return iLevel[i].value.toUpperCase();
}
}
return false;
}
function resetForm() {
form.reset();
iName.style.color="#000000";
iSubject.style.color="#000000";
iExamNumber.style.color="#000000";
}
form.onsubmit = validateForm;
form.onreset = resetForm;
First you added the function checkRadio inside of function validateForm
Also, this line
if(document.getElementById("examnumber").value.length!=4)
actually points to this piece of html
<td id='examnumber'>Examination Number</td>
The td element can't hold values... You need to change the line to this:
if (document.ExamEntry.examnumber.value.length!=4) {
This jsfiddle should help you out...

HTML and Javascript validation

I am trying to add a function, or additional JavaScript to the existing function for a confirmation, I need to insert an additional number field to the form to take the users examination number, the examination number is 4 digits and the JavaScript form will need to validate that it is 4 digits I am new to this and any help is much appreciated.
here is my code so far
<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 ";
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>
}
</style>
</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><input type="submit " name="Submit " value="Submit "
onclick="return validateForm(); " /></td>
<td><input type="reset " name="Reset " value="Reset " /></td>
</tr>
</table>
</form>
</body>
You can use RegExp ^[0-9]{1,4}$ to test the value that matches 4 digits and can type only numbers 0-9
Include this in your javascript function
var inputVal=document.ExamEntry.name.value;
var patt = new RegExp("^[0-9]{1,4}$");
var res = patt.test(inputVal);
if(!res)
{
alert("Please enter a valid 4 digit number");
}
Code will be look like
<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";
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;
}
var patt = new RegExp("^[0-9]{1,4}$");
if (!patt.test(document.ExamEntry.examNumber.value)) {
msg+="You must enter 4 digit examination number \n";
document.ExamEntry.subject.focus();
document.getElementById('examNumber').style.color="red";
result = false;
}
return result;
}
function onSubmit(){
if(confirm('Are you sure to submit')){
return validateForm();
}
return false;
}
</script>
</style>
</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><input type="submit" name="Submit" value="Submit"
onclick="return onSubmit();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
Simple Html is fine
<input type="text" name="pin" maxlength="4" size="4">

Uncaught Reference Error: validateform is not definded

The code is very simple. But this is the first thing off this kind that I am doing, and I simply do not understand what it is that I am doing wrong.
Also this is the raw code straight from OCR.
This is GCSE computing coursework. I don't have to fix it, but I don't know how I'm supposed to test the stuff I'm going to add without the base code working.
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
function validateForm(document) {
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>
<input type="submit" name="Submit" value="Submit" onclick= return "validateForm()"; />
</td>
<td>
<input type="reset" name="Reset" value="Reset" />
</td>
</tr>
</table>
</form>
</body>
Your code has couple of syntax errors. I have removed that.
here is the fiddle link
<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>
<input type="submit" name="Submit" value="Submit" onclick= " return validateForm();" /><!--js function inside quotes-->
</td>
<td>
<input type="reset" name="Reset" value="Reset" />
</td>
</tr>
</table>
</form>
<script>
//function had illegal parameter
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";
// document.getElementById(‘name’).style.color = "red";--->Id should be in quotes
result = false;
}
if (document.ExamEntry.subject.value == "") {
msg += "You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color = "red";
// document.getElementById(‘subject’).style.color = "red";--->Id should be in quotes
result = false;
}
if (msg == "") {
return result;
} {
alert(msg);
return result;
}
}
</script>

Categories