View Full Version : Help with Javascript on Xhtml form

07-20-2011, 12:02 AM
Hi guys

I am trying to make my first xhtml form using javascript but am having some problems. I have 4 text boxes on the form and two buttons:




Re-enter Password


Reset and Submit query

I want an alert to pop up when the submit button is pressed if any of the fields are not filled in. I have written the javascript for the events but for some reason it is not picking up the car or year fields. When the submit button is pressed it only prompts for a password (if not filled in). I have looked over the code but I cant see where i'm going wrong. I have added the xhtml code with the external javascript pages at the bottom.

Any help would be much appreciated.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">



<!--Scripts for submit button event handlers-->
<script type="text/javascript" src="submit_car.js"></script>
<script type="text/javascript" src="submit_year.js"></script>
<script type="text/javascript" src="submit_pass.js"></script>



<form id="myForm" action="">


<!--Input car name-->

<label>Car<br />

<input type="text" id="car" size="30" />


<br />
<br />

<!--Register car name event handlers-->
<script type="text/javascript" src="car_check.js"></script>

<!--Input year-->

<label>Year<br />

<input type="text" id="year" size="4" />


<br />
<br />

<!--Register year event handlers-->
<script type="text/javascript" src="year_check.js"></script>

<!-- Password entry and re-entry -->

<label>Password<br />

<input type="password" id="first" size="10" />


<br />
<br />

<label>Re-enter Password<br />

<input type="password" id="second" size="10" />


<br />
<br />

<!--Register password event handlers-->
<script type="text/javascript" src="password_check.js"></script>

<input type="reset" name="reset" />
<input type="submit" name="submit" />





//Event handler function for entering car name

function carCheck() {
var car = document.getElementById("car");

if (car.value== "") {
alert ("Please enter a car name");

return false;
} else
return true;

//Registers the event handlers for submit_car.js

document.getElementById("car").onsubmit = carCheck;
document.getElementById("myForm").onsubmit = carCheck;

//Event handler function for entering year

function yearCheck() {
var year = document.getElementById("year");

if (year.value== "") {
alert ("Please enter a year");

return false;
} else
return true;

//Registers the event handlers for submit_year.js

document.getElementById("year").onsubmit = yearCheck;
document.getElementById("myForm").onsubmit = yearCheck;

//Event handler function for ensuring password entry is correct

function passwordCheck() {
var first = document.getElementById("first");
var second = document.getElementById("second");

if (first.value== "") {
alert ("Please enter a password");

return false;

if (first.value !== second.value) {
alert ("The two passwords you entered did not match. \n" +
"Please ensure both passwords are identical.");

return false;
} else
return true;


//Registers the event handlers for submit_pass.js

document.getElementById("second").onblur = passwordCheck;
document.getElementById("myForm").onsubmit = passwordCheck;

07-20-2011, 03:46 AM
Only the form has onsubmit event. So document.getElementById("year").onsubmit will not be called.
You have to put all the validations together into one function and then handle it in the form's on submit
like this:

function validateAll()
if(false == carCheck()||
false == yearCheck() ||
false == passwordCheck())
return false;
return true;

and then

document.getElementById("myForm").onsubmit = validateAll;

For easier validations, try JavaScript Form Validation script (http://www.javascript-coder.com/html-form/javascript-form-validation.phtml).

07-20-2011, 10:39 PM
Thankyou for your help, much appreciated.:)