Unit 20: Client side customisation of web pages
JavaScript Activity 1
The purpose of this lab session is to use JavaScript within an XHTML page.
This exercise will set up the page so that a welcome message is posted when
the page is first loaded, then when the form submit button is clicked, it will
undertake some very basic form data existence validation.
1. Create a theatre booking form html page. (Like the one below)
2. Refer to the lecture notes and write the code that will show an alert box
with a welcome message when the page is loaded. (Hint: you will need
to set the onload event in the Body tag).
3. Test this within a browser to make sure it works.
4. Add the code to do the validation for the text boxes on the form. The
validation will be to make sure that the user enters in a value into the text
boxes. To do this first we need to add the function which will do the
validation as follows into the head section of the HTML page:
<script type="text/javascript">
function checkall(frmEnquiry)
{
if (frmEnquiry.txtName.value == "")
{
alert("You must enter a name");
return (false);
}
}
</script>
Then add the code which will call this function to the form tag as follows:
<form method="post" onsubmit="return checkall(this);"
action="senddetails.asp">
4. Test the code to make sure that the validation works like this:
1
This is the onsubmit
attribute that will call
the function checkall
This is the name of
the form name text
box
