Part III
Managing events and HTML
elements with JavaScript
JavaScript for events in elements
<ELEMENT onEvenement="code">
name event applies to
onAbort loading interrupt image
onBlur loss of focus
input fields, window
onFocus get focus
onClick button, checkbox, radio, reset, submit, link
click an object
returns false to cancel the action
onChange input field change fileupload, password, select, text, textarea
onDblClick double click link, image, bouton(JS1.2)
onError JS error or loading an
image, window
image
onKeyDown key pressed
document, image, link, text
onKeyPress the user pressed a key
returns false to cancel
onKeyUp released key
onLoad loading image, window
JavaScript for events in elements
onMouseDown a mouse button is pressed
document, link, image, button
the mouse button is returns false to cancel
onMouseUp
released
onMouseMove moving the mouse
onMouseOut the mouse just left a zone
link, image, layer
returns true to prevent the display of the
onMouseOver the mouse enters an area URL
onReset cancel data entered form
returns false to cancel, ex:
onSubmit form submission <FORM action = "file.php3" onSubmit =
"return Verif()">
onSelect selection of a text field input fields
onUnload unloading a document image, window
Access data of a form
Access to texts contained in the fields
The form elements concerned are
⚫ text input boxes (INPUT type = "text")
⚫ text input on multiple lines (TEXTAREA)
⚫ masked entry boxes (INPUT type = "password")
⚫ file submission boxes (INPUT type = "file")
⚫ hidden data (INPUT type = "hidden")
access
⚫ window.document.form_name.element_name.value
Example on file submission
example on input text
HTML code in the FORM element
HTML code in the FORM element
Attach a plan: <INPUT type="file" name="file">
for <INPUT type="text" size="2" maxlength="2"
name="number_of_persons"> persons JavaScript statement for reading
JavaScript statement for reading ch = window.document.command.file.value;
ch = window.document.command. ch takes in the example the value:
number_of_persons.value; path_on_disk/plan.gif
ch takes in the example the value 4
Access to texts contained in the
fields
Write the value
window.document.form_name.element_name.value = text;
example on entering text on multiple lines
HTML code in the FORM element
<TEXTAREA name="address" rows="3" cols="40" wrap>I like pizza</
TEXTAREA>
JavaScript statement for writing
window.document.command.address.value = "non-compliant address";
text displayed in TEXTAREA field of the page: non-compliant address
Read the default text
window.document.form_name.element_name.defaultValue
Access to the choices checked by
the client
The form elements concerned are
⚫ check boxes (INPUT type = "checkbox")
⚫ radio buttons (INPUT type = "radio")
Search for checked choices
⚫ window.document.form_name.element_name[index].checked
⚫ window.document.form_name.element_name[index].value
example on radio buttons
HTML code in the FORM element
Payment by: <BR>
<INPUT type="radio" name="payment" value=« blue_card">Blue Card<BR>
<INPUT type="radio" name="payment" value="visa">Visa Card<BR>
<INPUT type="radio" name="payment" value="master_card" checked>Master Card
JavaScript statement to find who is checked (only one)
with(window.document.command){ for(i in payment) if(payment[i].checked == true) window.alert("radio = "+payment [i].value);}
the alert window gives: radio = visa
Access to the choices checked by
the client
example on checkboxes
HTML code in the FORM element
With: <BR>
<INPUT type="checkbox" name="ingredient" value="oil">spicy oil<BR>
<INPUT type="checkbox" name="ingredient"
value="ketchup">ketchup<BR>
<INPUT type="checkbox" name="ingredient" value="mustard" checked>
mustard<BR>
<INPUT type="checkbox" name="ingredient"
value="mayonnaise">mayonnaise
JavaScript statement to find who is checked (one or more)
with(window.document.command){ var list=""; for(i in ingredient)
if( ingredient[i].checked == true) list += ingredient[i].value + ", "; window.
alert("checkbox = "+list);}
the alert window gives: checkbox = oil, mustard,
Access to the choices checked by
the client
Check or uncheck a choice
window.document. form_name.element_name[index].checked =
true/false
example on checkboxes
JavaScript statement that unchecks/checks checkboxes
with(window.document.command){ for(i in ingredient)
if(ingredient[i].checked == true) ingredient[i].checked = false;
else ingredient[i].checked = true;}
Uncheck oil, mustard and check ketchup, mayonnaise
Get the choice checked by default when loading
window.document. form_name.element_name[index].defaultChecked
Access to choices in the choice lists
The form element concerned is SELECT
Read the choices
window.document.form_name.element_name.options[index].selected
window.document.form_name.element_name.options[index].value
window.document.form_name.element_name.length
window.document.form_name.element_name.options[index].text
example on a single choice list (which works for multiples too)
HTML code in the FORM element
<SELECT name="food">
<OPTION value="pizza">pizza
<OPTION value="chicken_fries">chicken / fries
<OPTION value="mussels_fries">mussels / fries
</SELECT>
JavaScript statement
with(window.document.command){ var list = ""; for(i=0; i<food.length; i++) if(food.options[i].selected == true) {
list += food.options[i].value; list += " (HTML text: "+food.options[i].text+"), "; }
window.alert("list of choices= "+list);}
the alert window gives: list of choices= chicken_fries (HTML text: chicken / fries ),
Access to choices in the choice
lists
single choice lists
window.document.form_name.element_name.selectedIndex
example on a single choice list
JavaScript statement
with(window.document.command){ choice = food.options[food.selectedIndex].value;
window.alert("selected choice= "+choice);}
the alert window gives: selected choice= chicken_fries
Change the choices in the choice lists
Change the choices
⚫ window.document.form_name.element_name.
options[index].selected = true/false
example for a multiple choice list
HTML code in the FORM element
<SELECT name="menu" multiple>
<OPTION value="pizza">pizza
<OPTION value="chicken_fries">chicken / fries
<OPTION value="mussels_fries ">mussels / fries
</SELECT>
JavaScript statement that deselects what was chosen and selects what was not
with(window.document.command){ for(i=0; i<menu.length; i++) if(menu.options[i].
selected == true) menu.options[i].selected = false;
else menu.options[i].selected = true;}
if pizza and chicken / fries were selected, then they are deselected and mussels / fries
becomes selected
Access to text on buttons
The form elements concerned are
⚫ submit buttons (INPUT type = "submit")
⚫ submit buttons with image (INPUT type = "image")
⚫ cancel buttons (INPUT type = "reset")
⚫ simple buttons (INPUT type = "button")
window.document. form_name.element_name.value
example on the Information button
HTML code in the FORM element
<INPUT type="button" value="Information" name="binfo">>
JavaScript statement for reading
text = binfo.value;
text contains: Information
Access to arrays
You can access the elements of the form through the
forms[index] array.
⚫ Information in the form:
window.document.forms[0].elements.length
window.document.forms[0].elements[i].type
⚫ For types text, password, hidden, file, textarea:
window.document.forms[0].elements[i].name
window.document.forms[0].elements[i].value
⚫ For radio types, checkbox:
window.document.forms[0].elements[i].ckecked window.
document.forms[0].elements[i].value
⚫ For single or multiple select:
window.document.forms[0].elements[i].options[j].selected
window.document.forms[0].elements[i].options[j].value
⚫ For the button, submit, reset types:
window.document.forms[0].elements[i].value
Events in form
onClick, elements concerned
⚫ check boxes (INPUT type = "checkbox")
⚫ radio buttons (INPUT type = "radio")
⚫ submit buttons (INPUT type = "submit")
⚫ submit buttons with image (INPUT type = "image")
⚫ cancel buttons (INPUT type = "reset")
⚫ simple buttons (INPUT type = "button")
onclick
<HTML><HEAD>...</HEAD>
<SCRIPT language="JavaScript1.2">
<!--function Info(){
window.alert("Our products generally do not expire"); }// --
></SCRIPT><BODY>
<FORM ...>...
<INPUT type="button" value="Information" name="binfo"
onClick="Info()">...
</FORM></BODY></HTML>
when the customer clicks the Information button, an alert window
appears with the text: Our products generally do not expire
onClick for a submit button
JavaScript function declared in <SCRIPT...>...</SCRIPT>
function toConfirm(){ return window.confirm("Do you
really want to submit?"); }
Elements inside the form
<INPUT type="submit" value=“Order" onClick="return
toConfirm()">
when the customer clicks on the button Order, a
confirmation window appears with the text, if he
chooses to cancel, then the submission is canceled
thanks to the two return
onClick for radio buttons
JavaScript function declared in <SCRIPT...>...</SCRIPT>
function AffStatus(choice){
switch (choice) {
case 1 :
window.status = " do you really have a blue card?";
break;
case 2 :
window.status = " do you really have a visa card?";
break;
case 3 :
window.status = " do you really have a master card?";
break;
default : ; }}
onClick for radio buttons
Elements inside the form
<INPUT type = "radio" name = "payment" value = "blue_card"
onClick = "AffStatus(1)"> Blue Card
<INPUT type = "radio" name = "payment" value = "visa" onClick
= "AffStatus(2)"> Visa Card
<INPUT type = "radio" name = "payment" value = "master_card"
checked onClick = "AffStatus(3)"> Master Card
when the customer clicks on the blue card radio
button, does the text really have a blue card? is
displayed in the status bar
Events in form
OnChange, elements concerned
⚫ text input boxes (INPUT type = "text")
⚫ text input on multiple lines (TEXTAREA)
⚫ hidden entry boxes (INPUT type = "password")
⚫ file submission boxes (INPUT type = "file")
⚫ lists (SELECT)
onChange for a hidden field
Element inside the form
<INPUT type="password" size="6"
maxlength="6" name="pwd“
onChange="window.status=this.value">
when the customer has given his code
and he leaves the field, his code appears
clearly in the status bar.
Events in form
onFocus and onBlur, elements concerned
⚫ text input boxes (INPUT type = "text")
⚫ text input on multiple lines (TEXTAREA)
⚫ hidden entry boxes (INPUT type = "password")
⚫ file submission boxes (INPUT type = "file")
⚫ lists (SELECT)
Events in form
onSelect, elements concerned
⚫ text input boxes (INPUT type = "text")
⚫ text input on multiple lines (TEXTAREA)
⚫ hidden entry boxes (INPUT type = "password")
⚫ file submission boxes (INPUT type = "file")
onSelect for a hidden field
Element inside the form
<INPUT type="password" size="6" maxlength="6"
name="pwd" onSelect="status=‘password field
selected’">
When the client selects the field, the message
‘password field selected’ appears in the status bar.
Events in form
onReset and onSubmit
When the form is submitted by pressing the submit button
it is possible to call an onSubmit event
Used to check, for example, the validity of the data before
sending the form, to request the confirmation of the
submission
⚫ The reset event is called when the cancel button is
clicked
<FORM name = "command" action = "script.php3" onSubmit
= "return Verif ()">
when the client clicks on the button Order, a
Verif () check function is called, if it returns
true, the form is sent to the server, otherwise
the submission is canceled.
Event Methods
name role
blur() removes focus from a form field
click() simulates a mouse click on the form field
focus(
moves the focus to a form field
)
select(
selects the content of a form field
)
Enable or Disable Controls
You can disable or enable controls on a form for INPUT,
BUTTON, TEXTAREA, and SELECT elements in response
to an event.
Let's take the example below that activates the field to
enter the credit card code only if you click on the radio
buttons that correspond to the cards and deactivate the
field if you click on the check button:
HTML Code
JavaScript functions
Form validation
JavaScript allows you to perform checks on the
client side before sending to the server.
Some examples of checks:
⚫ the field must not be empty
⚫ the field must contain only numbers
⚫ the field must contain only letters
⚫ the value of the field is a number between two limits
Form validation
When perform the checks?
⚫ when a field is changed (onChange)
⚫ when the form is submitted (onSubmit), do not forget
to put a return to block the submission is case the
input is not valid
The focus() and select() methods can be used to
assign the focus and select an erroneous data,
the customer can then retype the text directly
(he does not need to click with the mouse in the
field, select all the text and retype).
Form validation
HTML code
<FORM name=“order" action="script.php3"
method="post" enctype="text/plain"
onSubmit="return Verif()"> ...for
<INPUT type="text" size="2" maxlength="2"
name=« number_of_persons"
onChange="VerifNb(this.value,'incorrect number of
persons')">persons...
Functions inside <SCRIPT>...</SCRIPT>
function VerifNb(st, text){
var regnb = /^\d{1,}$/;
if(!regnb.test(st)) {
window.alert(text); return false; }
else return true;}
Form validation
function Verif(){
with(window.document.order) { if(!VerifNb(number_of_persons.value,
"number_of_persons in digits")) {
number_of_persons.focus(); number_of_persons.select();
return false; }
if(!VerifNb(pwd.value, "Credit card code in digits")) {
pwd.focus();
pwd.select();
return false; }
if(file.value.length == 0 )
alert("You could have sent us a plan, you might be late for delivery!");
if(address.value.length == 0) {
alert("How to deliver ???");
return false; }
}
return true;}
