More JavaScript

JavaScript and HTML forms One of the most common usages of JavaScript is to respond to user actions when completing HTML forms JavaScript enables us to process HTML forms by providing –a large library of object classes with associated methods and attributes This library is part of a much bigger library, the DOM (Document Object Model) library that will be introduced in CS 4408 Now, however, we will consider just a small part of it, connected with HTML form elements

Processing input elements We have seen that we can access any HTML element on a page if it has an id attribute Remember the form which contained this: What is your name? We could check if its value is the empty string with this JavaScript statement if ( document.getElementById( ‘ name ’ ).value =='') { alert("Name is empty"); }

The JavaScript object class for representing input elements We have already seen that the this object class contains an attribute called value We have just read the value of this attribute But we can also change its value Consider the form on the next slide –which asks for the colour of the user’s hair and eyes

Initial state of form

The user gives his hair colour as ‘brown’ and hits the tab key on his keyboard

The cursor flashes in the eye-colour input box, which is still empty, waiting for him to type something

The user can now declare his eye colour

But, let’s refresh the form

Suppose the user declares his hair colour is ‘red’. Before he hits the tab key, the cursor is still in the hair-colour box and the eye-colour box is empty

But, immediately after he hits the tab key, the value ‘blue’ appears in the eye-colour box

Although, if he wants, the user can replace the eye-colour ‘blue’ with some other colour

Specification for the form we have just seen form { background-color:yellow; width:300; padding:0.1in } function respond() { var hairColour=document.getElementById('hairColour'); var eyeColour=document.getElementById('eyeColour'); if (hairColour.value=='red') { eyeColour.value='blue'; } } Colour of your hair? Colour of your eyes? Submit details

Attributes and methods of the HTMLInputElement class Attributes DOMString defaultValue; boolean defaultChecked; readonly HTMLFormElement form; DOMString accept; DOMString accessKey; DOMString align; DOMString alt; boolean checked; boolean disabled; long maxLength; DOMString name; boolean readOnly; DOMString size; DOMString src; long tabIndex; readonly DOMString type; DOMString useMap; DOMString value; Methods void blur() ; void focus() ; void select() ; void click() ;

Notice that some attributes are readonly Attributes DOMString defaultValue; boolean defaultChecked; readonly HTMLFormElement form; DOMString accept; DOMString accessKey; DOMString align; /*deprecated from HTML 4.0 onwards*/ DOMString alt; boolean checked; boolean disabled; long maxLength; DOMString name; boolean readOnly; DOMString size; DOMString src; long tabIndex; readonly DOMString type; DOMString useMap; DOMString value; The form attribute of a HTMLInputElement object lets us access the object which represents the entire form of which the input element forms a part The type attribute of a HTMLInputElement object gives us the type of the input element We cannot change either of these

Using the size attribute Remember that Spanish names are often very long We might want to cater for that on a form which asks where the user comes from and what his name is

Initial state of the form

Suppose the user has stated he is from ‘Ireland’ but has not yet hit the tab key

After he has hit the tab key, the size of the input element for entering his name is unchanged

And the user just enters his name as usual

But, let’s refresh the form

Suppose the user declares she is from Spain, but has not yet hit the tab key

After she has hit the tab key, the box in which she can enter her name gets much bigger

So she can type in a long Spanish name and still see it all

Specification of previous form form { background-color:yellow; width:600; padding:0.1in } function respond() {var country=document.getElementById('country'); var name=document.getElementById('name'); if (country.value=='Spain') { name.size=80; } } What country are you from? What is your name? Submit details

Sometimes, people from other countries have long name We could let the user declare she has a long name, by clicking on a checkbox

When the user has declared her country and hit the tab key, focus moves to the checkbox

The user has clicked the checkbox but has not yet hit the tab key

The user has just hit the tab key and the name box has become bigger

So she can now type in her long name and still see it all

Specification of previous form form { background-color:yellow; width:600; padding:0.1in } function respond() {var longName=document.getElementById('longName'); var name=document.getElementById('name'); if (longName.checked) { name.size=80; } } What country are you from? Your name? Long name? <input type="checkbox" name="longName" id="longName“ onchange="respond()" > Submit details

On this form, the company is trying to push sales of Superman’s Cloak so it is pre-checked on the form

Suppose the user wants only Batman’s Cloak, …

Suppose the user wants only Batman’s Cloak, so he clicks on the first checkbox, and then …

… he unchecks the box for Superman’s Cloak, and then …

and then when he clicks on the box for entering his name, an alert box pops us

Specification of previous form form { background-color:yellow; width:600; padding:0.1in } li { list-style-type : none } function respond(someString) { var clickedItem=document.getElementById(someString); if (clickedItem.defaultChecked && !clickedItem.checked) { alert("Are you really sure you do not want Superman's cloak?"); } } Your T-shirt selection? Batman's cloak <input type="checkbox" name="products" id="products1" value='batman' onchange="respond('products1')" > Superman's cloak <input type="checkbox" name="products" id="products2" value='superman' onchange="respond('products2')“ checked='checked‘ >(our most popular item) Dr. Who's coat <input type="checkbox" name="products" id="products3" value='drWho' onchange="respond('products3')" > What is your name? Submit order

We can generalize the previous approach form { background-color:yellow; width:600; padding:0.1in } li { list-style-type : none } function respond(someString) {var clickedItem=document.getElementById(someString); if (clickedItem.defaultChecked && !clickedItem.checked) { alert("Are you really sure you do not want "+clickedItem.value+"?"); } } Your T-shirt selection? Batman's cloak Superman's cloak (our most popular item) Dr. Who's coat (another very popular item) What is your name? Submit order

A reminder: checking forms again

Suppose the user clicks on the ‘Check form’ button

He is warned that he has not declared his country and …

… that he has not declared his name

A better way to do this

It would be better if we did not have a special button for checking that the form is completed correctly It would be better if the form-checking task could be performed by the button that we use to submit the data on the form This button should –Check whether the form is completed correctly If it is, the data should be submitted If it is not, a warning message should be produced

Form has just one button

User clicks on this button and gets a warning

User specifies country and clicks on button … Now get a different warning

User specifies both country and name and …

User specifies both country and name and clicks on the button and …

User specifies both country and name and clicks on the button and … the data are sent to the server, which replies

Text of previous PHP program form { background-color:yellow; width:600; padding:0.1in } function maybeSubmit() {if ( !errorFoundIn('country') && !errorFoundIn('name') ) { var form1=document.getElementById('form1'); form1.submit(); } } function errorFoundIn(someString) {var someItem=document.getElementById(someString); if (someItem.value=='') { alert('You have not specified your '+someString); return true; } else { return false; } } <?php $country=$_POST['country']; $name=$_POST['name']; if ($country && $name) { echo " Hello $name from $country "; } else {?> " id="form1“ > What is your country? What is your name? Submit details <?php } ?>

We have just used the submit() method from the HTMLFormElement object class Attributes readonly HTMLCollection elements; readonly long length; DOMString name; DOMString acceptCharset; DOMString action; DOMString enctype; DOMString method; DOMString target; Methods void submit() ; void reset() ;

Now, that we know about the submit() method We can use it instead of having to use the input of type=‘image’ If we want to use a picture as a submit button, we can just –Put the picture on the form using an img element –Give the img element an onclick attribute Which uses the submit() method of the form object

Using an image with the submit() method form { width : 400; background-color:gray; padding:0.1in legend { color : white }.myImage { height:25; width:25 } function mySubmit() {var form1=document.getElementById('form1'); form1.submit(); } <?php $surname=$_POST['surname']; if ($surname) {echo "Your surname is $surname";} else {?> " id="form1“ > What is your surname? Submit data <?php } ?> Example program

Fresh form

User enters data and …

User enters data and clicks on image and …

User enters data and clicks on image and the server replies

Now, back to the HTMLInputElement object class

In the HTMLInputElement class, the attribute defaultValue can be used to access any value which is specified on the original form Attributes DOMString defaultValue; boolean defaultChecked; readonly HTMLFormElement form; DOMString accept; DOMString accessKey; DOMString align; DOMString alt; boolean checked; boolean disabled; long maxLength; DOMString name; boolean readOnly; DOMString size; DOMString src; long tabIndex; readonly DOMString type; DOMString useMap; DOMString value; Methods void blur() ; void focus() ; void select() ; void click() ;

This form has no fieldset legends

The user is told what must be entered because the input elements contain some default text " id="form1"> Submit details

But, now, when we are checking if the form has been completed correctly, we cannot just check for the empty string –because the inputs always contain a non- empty string Instead, a correctly completed form does not have the default value in any of its input elements

Text of appropriate PHP program form { background-color:yellow; width:600; padding:0.1in } function maybeSubmit() {if ( !errorFoundIn('country') && !errorFoundIn('name') ) { var form1=document.getElementById('form1'); form1.submit(); } } function errorFoundIn(someString) {var someItem=document.getElementById(someString); if ( someItem.value==someItem.defaultValue ) { alert('You have not specified your '+someString); return true; } else { return false; } } <?php $country=$_POST['country']; $name=$_POST['name']; if ($country && $name) { echo " Hello $name from $country "; } else {?> " id="form1"> Submit details <?php } ?>

Fresh form

Error alert is produced when user clicks button on an incomplete form

When user clicks button on a complete form, …

When user clicks button on a complete form, the data are sent to the server, which replies

For more information about the HTMLInputElement object class Go to this web-page and search for the text “Interface HTMLInputElement”