Using
JavaScript to Control Form
Part 3
The
three techniques discussed in this final tutorial have a common
theme. They are all concerned with presenting forms, rather than
validating form input. The first section looks at adding extra emphasis
to form elements. We then look at intelligent forms that change
their questions according to the answers given. And finally we cover
dynamically changing form element attributes, for example the value
of a checkbox.
This
is Javascript for IE5.
Highlighting
Forms
Usually forms do not visually notify you of anything except when
an element has the focus, which is done with a very thin dotted
line around that element. To transfer focus to a form element, we
must click the element.
If
we are expected to enter data into several text boxes, we are implicitly
expected to re-focus between the text boxes ourselves. This hidden
work is an unwanted labour for any viewer, and with this technique
we can remove it.
This
program does two things. It provides extra visual enhancements to
the form, and also automatically focuses an element when the mouse
pointer is over it.
<HTML>
<HEAD>
<TITLE>Highlight</TITLE>
<SCRIPT>
clr=new Array('yellow','white','silver');
function highlight(state) {
element=event.srcElement;
if (element.tagName=='INPUT') {
etype=element.type;
if ((etype=='submit' || etype=='reset') && state==1) state=2;
element.style.backgroundColor=clr[state];
element.focus();
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="mainform" onmouseover="highlight(0);"
onmouseout="highlight(1);">
<INPUT TYPE="TEXT" NAME="FIRSTNAME">First
Name
<INPUT TYPE="TEXT" NAME="LASTNAME">Last
Name
<BR>
<INPUT TYPE="CHECKBOX" NAME="MUSIC">Music
<INPUT TYPE="CHECKBOX" NAME="SPORT">Sport
<INPUT TYPE="CHECKBOX" NAME="TRAVEL">Travel
<INPUT TYPE="HIDDEN" NAME="DETAILS">
<BR>
<INPUT TYPE="SUBMIT">
<INPUT TYPE="RESET">
</FORM>
</BODY>
</HTML>
Passing
long-winded variables around a program can prove to be more of a
headache than using an array and index system. Instead of passing
the actual colour between functions, we pass an index for the clr
array, which contains a list of colours that we use in the program.
So we only need to pass an integer to the array, and we retrieve
a colour value.
Inside
the highlight(state) function, we discover which element fired the
event, using the srcElement property of the event object. We only
wish to highlight form elements - not any text or images that happen
to be inside them. That is, we only wish to highlight form fields,
and a form field is generally an <INPUT> element.
If
we had a <SELECT> or <TEXTAREA> element in the form,
we could also detect this:
etag=element.tagName;
if (etag=='INPUT' || etag=='SELECT' || etag=='TEXTAREA' ) {
We
should use the etag variable to save computational effort - this
method only calculates the element.tagName once, and not the three
times we would expect.
Most
form elements have a background color of white. But buttons have
a different background color, which is generally silver.
etype=element.type;
if ((etype=='submit' || etype=='reset') && state==1) state=2;
So
we must provide for this situation. We do not want to create white
buttons because this looks unprofessional. If the element we are
over is either a submit button or reset button, and we are leaving
the element, i.e. state is 1, then without this line, we would change
the button background color to white. This line says that in this
case, let state=2, which then changes the background color to silver.
element.style.backgroundColor=clr[state];
We
must physically change the background color of the selected element
to the highlight color or the original background color, depending
on whether we are entering or leaving an element.
element.focus();
If
we are entering an element, we also focus this element. This places
the flashing vertical line cursor inside the text box, and now the
highlighted text box will receive all typed input.
Intelligent
Forms
Intelligent Forms are a computer alternative to the common paper
form phrases:
*
'If YES, go to part 6B. If no, go to part 7'
* 'If YES, which model?'
For
example, the question 'Are you married?' might take you to section
2 or section 3 depending on your answer. A Critical Question is
one which determines what comes next.
We
can use the power and capabilities of computers to intercept the
critical question, and provide various form alternatives depending
on the answer. This is better than expecting a viewer to decode
the instructions for a form. We can make the computer to do all
the hard work for us.
The
basic principle involved is the same as the paper form. If answer
1 is selected, ask question set A, if answer 2 is selected, ask
question set B,etc. The radio element most readily fills the role
of the critical question, as it makes us choose one option or the
other, but not both.
Basic
Version
This
sample program asks the viewer if they have a printer, and if they
do, the computer prompts for the make and model of the printer.
If not, the viewer will not see the make and model question.
<HTML>
<HEAD>
<TITLE>Intelligent Forms</TITLE>
<SCRIPT>
function yes() {
MMDiv.style.visibility='visible';
mainform.MakeModel.focus();
}
function no() {
MMDiv.style.visibility='hidden';
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="mainform">
Do you own a printer?
<INPUT TYPE="RADIO" NAME="PRINTER" onclick="yes();">Yes
<INPUT TYPE="RADIO" NAME="PRINTER" onclick="no();"
CHECKED>No
<BR>
<DIV ID="MMDiv" style="visibility:hidden">
<LABEL FOR="MakeModel">
<INPUT TYPE="TEXT" ID="MakeModel">
Make and Model</LABEL>
</DIV>
<BR>
<INPUT TYPE="SUBMIT">
<INPUT TYPE="RESET">
</FORM>
</BODY>
</HTML>
As
you can see, the Make and Model text box only becomes visible if
the Yes radio box is checked, and is invisible if the No radio box
is checked.
There
are two tricks with this code. The first is to place the entire
Make and Model form elements, i.e. the form field and its label,
inside a <DIV> container element. The code then alters the
visibility of the DIV element.
The
second trick is that we supply individual event handlers for each
radio box. You can see that the yes() function is called whenever
the Yes radio box is clicked, and no() is called whenever the No
radio box is clicked.
yes()
displays the Make and Model element, and focuses it, while no()
hides the Make and Model element.
Moving
Element Version
There
are other things we can do with intelligent forms. We can change
the whole layout of the form and remove any gaps caused by invisible
elements.
The
code for the moving type of form is very similar to the previous,
but we make extensive use of the left and top styles.This time,
when the Make and Model fields become visible or invisible, we move
other elements around the page.
This
may be too slow for very large forms, but it looks good.
<HTML>
<HEAD>
<TITLE>Moving Forms</TITLE>
<SCRIPT>
function yes() {
MMDiv.style.visibility='visible';
mainform.S.style.left=10;
mainform.S.style.top=70;
mainform.R.style.left=140;
mainform.R.style.top=70;
mainform.MakeModel.focus();
}
function no() {
MMDiv.style.visibility='hidden';
mainform.S.style.left=10;
mainform.S.style.top=45;
mainform.R.style.left=140;
mainform.R.style.top=45;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="mainform">
Do you own a printer?
<INPUT TYPE="RADIO" NAME="PRINTER" onclick="yes();">Yes
<INPUT TYPE="RADIO" NAME="PRINTER" onclick="no();"
CHECKED>No
<BR>
<DIV ID="MMDiv" style="visibility:hidden">
<LABEL FOR="MakeModel">
<INPUT TYPE="TEXT" ID="MakeModel">
Make and Model</LABEL>
</DIV>
<BR>
<INPUT TYPE="SUBMIT" NAME="S" STYLE="position:absolute;top:45;left:10">
<INPUT TYPE="RESET" NAME="R" STYLE="position:absolute;top:45;left:140">
</FORM>
</BODY>
</HTML>
This
code uses DHTML to move the SUBMIT button and RESET button into
a new position which removes gaps in the form. It's both effective
and sleek.
Dulled
Version
We
may not wish to entirely hide a field, but just to prevent any input
to it, and change it's color to indicate a no-entry status. DHTML
again rescues us.
The
DISABLED attribute prevents a form field from receiving the focus,
and hence any input. The DISABLED attribute can be changed dynamically
at run-time, and we can also change the color of the field to indicate
on or off, so that the field is not hidden, but just 'dulled'.
The
code for a form that uses 'dulled' form elements looks very similar
to the previous example, but concentrates on the color style and
disabled attribute.
<HTML>
<HEAD>
<TITLE>Intelligent Dulled Forms</TITLE>
<SCRIPT>
function yes() {
MMDiv.style.color ='black';
mainform.MakeModel.disabled=false;
mainform.MakeModel.focus();
}
function no() {
MMDiv.style.color ='gray';
mainform.MakeModel.disabled=true;
mainform.MakeModel.value='';
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="mainform">
Do you own a printer?
<INPUT TYPE="RADIO" NAME="PRINTER" onclick="yes();">Yes
<INPUT TYPE="RADIO" NAME="PRINTER" onclick="no();"
CHECKED>No
<BR>
<DIV ID="MMDiv" style="color:gray">
<LABEL FOR="MakeModel">
<INPUT TYPE="TEXT" ID="MakeModel" DISABLED>
Make and Model</LABEL>
</DIV>
<BR>
<INPUT TYPE="SUBMIT">
<INPUT TYPE="RESET">
</FORM>
</BODY>
</HTML>
And
so, we can only input the make and model if we have a printer. This
code also clears any input from the Make and Model text box if you
initially select yes, but later select no.
Changing
the Text of Form Fields
This section is concerned with changing the text of an element.
So, if we have a series of checkboxes, we may wish to change their
captions.
This
has several uses, we can tailor text to a person, or can create
a multiple choice type quiz or exam.
To
change the text we use a combination of the <LABEL> element
and the innerText property of DHTML.
innerText
returns any text contained within an element. Its full use is quite
complicated, the property is very closely linked to three other
properties, innerHTML, outerText and outerHTML. The property is
also very dependent on any contained HTML as well as any contained
text.
For
this example, all we need to know is that the value of the innerText
property for:
<LABEL
ID="LABEL1" FOR="BAND1">Boy Zone</LABEL>
is
'Boy Zone'.
We
may change this value dynamically in JavaScript. Using:
LABEL1.innerText="Madonna";
The
program demonstrates this in action.
<HTML>
<HEAD>
<TITLE>InnerText</TITLE>
<SCRIPT>
function sexchange(sex) {
if (mainform.BAND1.checked) mainform.BAND1.checked=false;
if (mainform.BAND2.checked) mainform.BAND2.checked=false;
if (mainform.BAND3.checked) mainform.BAND3.checked=false;
switch (sex) {
case 0:
LABEL1.innerText="Boy Zone";
LABEL2.innerText="Led Zeppelin";
LABEL3.innerText="Oasis";
break;
case 1:
LABEL1.innerText="Madonna";
LABEL2.innerText="Diana Ross";
LABEL3.innerText="Spice Girls";
break;
}
}
</SCRIPT>
<FORM NAME="mainform">
<INPUT TYPE="RADIO" NAME="SEX" VALUE="M"
onclick="sexchange(0);" CHECKED>Male
<INPUT TYPE="RADIO" NAME="SEX" VALUE="Y"
onclick="sexchange(1);">Female
<BR>Which bands do you like?<BR>
<INPUT TYPE="CHECKBOX" NAME="BAND1">
<LABEL ID="LABEL1" FOR="BAND1">Boy Zone</LABEL>
<BR>
<INPUT TYPE="CHECKBOX" NAME="BAND2">
<LABEL ID="LABEL2" FOR="BAND2">Led Zeppelin</LABEL>
<BR>
<INPUT TYPE="CHECKBOX" NAME="BAND3">
<LABEL ID="LABEL3" FOR="BAND3">Oasis</LABEL>
</FORM>
</BODY>
</HTML>
We
first detect any sex changing operation.
<INPUT
TYPE="RADIO" NAME="SEX" VALUE="M"
onclick="sexchange(0);" CHECKED>Male
<INPUT TYPE="RADIO" NAME="SEX" VALUE="Y"
onclick="sexchange(1);">Female
The
sexchange(sex) function changes the captions for the checkboxes
and also clears any previous input.
The
basic structure for each checkbox is:
<INPUT
TYPE="CHECKBOX" NAME="BAND1">
<LABEL ID="LABEL1" FOR="BAND1">Boy Zone</LABEL>
This
code creates a label for the checkbox 'BAND1'. The text is positioned
after the checkbox because the LABEL element is after the INPUT
element.
And
this brings this series of articles to a close. I hope you enjoyed
them, and feel able to adapt the ideas and routines into your own
forms.
Using
JavaScript to Control Forms - Part
1
Using JavaScript to Control Forms - Part
2
We
hope this tutorial was helpful. If you like, you can link to our
tutorials from your web site. Just use the following code:
<a
href="http://www.ezi-hosting.com/tutorials.htm">Free
Scripting Tutorials from EziHosting</a>
|
Web Hosting Australia Monthly
Special 