Chapter Fifteen
Changing Horses in Midstream

Making Changes to Actions, Display and Forms After a Page Has Loaded

form_name.action

This call allows you to specify a destination URL from JavaScript for form data that is being submitted.

You can set the action at any time, which may prove useful if you wish to direct form results to different .cgi scripts depending upon the contents of the data your visitor has entered into the form.

document.form_name.action="destination URL";

checkbox_name.checked
radiobutton_name[x].checked

These calls permit you to determine which checkboxes or radio button have been clicked by the visitor to your pages.

Although you can also get to these same results using the elements[x] browser memory arrays, in most cases, it will be far simpler just to name the elements of your forms and access them in this fashion.

x is the index number (commencing with zero) of the radio buttons in the same group.

If a checkbox or radio button is selected, the value of its checked property is true; otherwise, it is false.

You can set the checked property at any time from JavaScript. The on-screen display of the checkbox or radio button updates immediately when you set the checked property.

The following example examines an array of radio buttons called "rb" in the form named "f" to determine which button is selected. The VALUE attribute of the selected button is assigned to the checked button variable.

function getCk(){
 var ck="";
 for (var i =0;i<4;i++){
  if (document.f.rb[i].checked=="1") {
   ck=document.f.rb[i].value;
   }
  }
 }

document.cookie

If you are one of those folks who don't mind the vastly irritating and obnoxious "Cookies" you can parse out the various values stored in a cookie.

You can set the cookie values at any time.

The following function uses the cookie property to record a reminder for users of an application. The "expires=" component sets an expiration date for the cookie, so it persists beyond the current browser session.

function reMind(time, expression){
 /* Record a cookie of the form
    "@<T>=<E>" to map from <T> in
    milliseconds since Jan 1, 1970 returned
    by Date.getTime(), onto an
    encoded expression, <E> (encoded to
    contain no white space, semicolon, or
    comma characters) This is where your
    escape(x) and unescape(x) calls will be
    useful. */
 document.cookie="@"+time+"="
 +expression+";";
 /* Set the cookie expiration time to one
    day beyond the reminder time. */
 document.cookie+="expires="
 +Date(time+24*60*60*1000);
 }

When the user loads the page that contains this function, another JavaScript function may then use string parsing calling .indexOf("@") and .indexOf("=") to determine the date and time stored in the cookie.

checkbox_name.defaultChecked
radiobutton_name[x].defaultChecked

This suffix will return a Boolean value indicating the default selection state of a checkbox or radio button. See also .checked

If an checkbox or radio button is selected by default, the value of the .defaultChecked is true; otherwise, it is false. .defaultChecked initially reflects whether the CHECKED attribute is used within an <INPUT> tag; however, setting defaultChecked overrides the CHECKED attribute.

You can set .defaultChecked at any time.

The on-screen display of the checkbox or radio button does not update when you set .defaultChecked, but it does update the screen when you set .checked.

The following example resets an array of 5 radio buttons called "rb" in the form named "f" to the default selection state.

function reSets(){
 for (var i =0;i<5;i++){
  if (document.f.rb[i].defaultChecked==true){
   document.f.rb[i].checked=true
   }
  }
 }

select.options[x].defaultSelected

Returns a Boolean value indicating the default selection state of an option in a select grouping (appearing between the <SELECT> and </SELECT> tags.

select is either the value of the NAME designation of a select grouping or of an element in the elements array.

x is an integer (from 0 to the number of options less one) representing an option in a select grouping.

If an option in a select grouping is selected by default, the value of .defaultSelected is true; otherwise, it is false. .defaultSelected initially reflects whether the SELECTED call is used within an <OPTION> tag; however, setting .defaultSelected overrides the SELECTED attribute.

You can make the .defaultSelected call at any time. But the display on screen of the select option does not update when you make the .defaultSelected call, only when you make the .selected or .selectedIndex calls.

A select grouping created without the MULTIPLE specification can have only one option selected by default. When you set .defaultSelected for such an option, any previous default selections, including defaults set with the SELECTED specification, are cleared. If you set .defaultSelected in a select grouping created with the MULTIPLE specification, previous default selections are not affected.

In the example below, the restoreIt() function returns the "s" select option in the form named "f" to its default state.

The "for" loop uses the options array to test every option in the select grouping. The "if" statement sets the selected value if .defaultSelected is true.

function restoreIt(){
 for (var i = 0;i  if (document.f.s.options[i].defaultSelected){
   document.f.s.options[i].selected=true;
   }
  }
 }

The previous example assumes that the select grouping is similar to the following:

<FORM NAME="f">
<SELECT NAME="s">
 <OPTION SELECTED> Item 1
 <OPTION> Item 2
 <OPTION> Item 3
 <OPTION> Item 4
</SELECT>
</FORM>

window.defaultStatus

This specifies the default message displayed in the status bar at the bottom of the window.

window is any valid way of referring to a window.

The .defaultStatus message appears when nothing else is in the status bar.

Do not confuse the .defaultStatus call with the .status call. The .status call displays a priority or transient message in the status bar, such as the message that appears when an onMouseOver= occurs over a link.

You can call the .defaultStatus at any time. You must include "return true;" if you want to call the .defaultStatus property in an onMouseOver= call, like this:

<A HREF="somepage.htm"
onMouseOver="somecall();return true;"> Some Page</A>

In the following example, the dispIt() function sets both the status and defaultStatus values in an onMouseOver= call:

function dispIt(){
 window.defaultStatus="Click the link for"
 +" the Coolest Page on the Net!";
 window.status="Cut-N-Paste JavaScript"
 +" Home Page"
 }

<A HREF="http://www.infohiway.com/javascript"
onMouseOver = "dispIt(); return true">
Cut-N-Paste Home Page</A>

In the previous example, notice that the onMouseOver= call includes a "return true;". You must "return true;" to set .status or .defaultStatus in an action call.

hidden_name.defaultValue
password_name.defaultValue
text_name.defaultValue
textarea_name.defaultValue

These calls allows you to read or set a new values for form elements without updating the display the visitor sees on screen. (If you set .value, the screen will be updated - except, of course, hidden form element values)

You can set .defaultValue at any time you wish from your script.

Why would you want to do this? Dunno. Seems like it is a way to do something to the user without him or her knowing it. If you are doing devious things, this may prove of use to you.

<HTML><HEAD>
<TITLE>Using defaultValue</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from JS-Impaired Browsers
rr=""+(navigator.appVersion.indexOf("Win")>-1?
"\r\n":"\n");
 
function readIt(){
 str1=document.ug.hid.devaultValue;
 str2=document.ug.pas.devaultValue;
 str3=document.ug.txt.devaultValue;
/* All four strings have read from form
    at this point. */
 redoIt();
 }
 
function redoIt(){
 str1="new value not displayed"
 document.ug.hid.devaultValue=str1;
 document.ug.pas.devaultValue=str1;
 document.ug.txt.devaultValue=str1;
 document.ug.are.value="hidden elemen"
+"t: "+document.ug.hid.devaultValue
+rr+"password element: "
 +document.ug.pas.devaultValue+rr
+"text element: "
 +document.ug.pas.devaultValue;
 /* values are now changed without an
     update to screen. (Except text area) */
 }
function readIt1(){
 str1="a new value is displayed"
 document.ug.hid.value=str1;
 document.ug.pas.value=str1;
 document.ug.txt.value=str1;
 document.ug.are.value="hidden elemen"
 +"t: "+document.ug.hid.value
 +rr+"password element: "
 +document.ug.pas.value+rr
 +"text element: "
 +document.ug.pas.value;
 /* values are now changed with an
    update to screen. */
 }
// End Hiding -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white">
<CENTER>
<P><B>JavaScript Using defaultValue</B>
<P>
<FORM NAME="ug">
<INPUT TYPE="hidden" NAME="hid"
 VALUE="initial value">
Password: <INPUT TYPE="password"
 NAME="pas" VALUE="test">
<BR>Some Text<INPUT TYPE="text"
 NAME="txt"
 VALUE="initial value" SIZE=40>
<P><B>And a text area which shows what's
actually going on in the program</B><BR>
<TEXTAREA NAME="are" ROWS=4
 COLS=75>
initial value
</TEXTAREA><BR>
<INPUT TYPE="button" NAME="but"
 VALUE=" Click to Change defaultValues "
+"(no screen update) "
 onClick="readIt()">
<INPUT TYPE="button" NAME="but"
 VALUE=" Click to Change Values "
+"(does update screen) "
 onClick="readIt1()">
</FORM>
</BODY>
</HTML>

Click Here to See This Script.

form_name.encoding

This call returns the initial ENCTYPE (MIME encoding) you have specified in your HTML form tag.

form_name is either the name of a form or an element in the forms array.

You can set the encoding type for a given form from JavaScript at any time.

The following functions get and set the value of the form named "ugly" encoding:

function getEncoding(){
 str=document.ugly.encoding;
 }
function setEncoding() {
 document.ugly.encoding="text/html";
 }

variable=document.forms[x];

This is one of the automatic "browser memory" arrays that you can read from when it is convenient for your program to do so.

When you have a number of forms in your HTML, they will be loaded into the forms array in the order they appear in that HTML, saving you the need to name those forms, if you wish, when needing to refer to them in JavaScript.

If this call is used with a frameset document, the forms array will contain the "children" of that frameset in order, i.e. as specified by the <FRAME SRC="filename.htm"> tags within the <FRAME> tags.

Browser memory arrays always commence with 0.

select_name.options[x].index

This allows you to retrieve the index numeric for an option in a select array.

select_name is either the value of the NAME attribute of a select grouping or an element in the elements array.

x is an integer representing an option in a select grouping of options, starting from zero.

variable=form_name.method

A string specifying how form field input information is sent to the server.

form_name is either the name of a form or an element in the forms array.

variable should be either "GET" or "POST". You can read or set the method at any time.

Certain values of the .method call may require specific values for other form element values.

The following function returns the value of the email method:

function getMethod(){
 return document.email.method
 }

variable=some_thing.name

some_thing can be almost any of the various forms, form elements or windows you have defined with a NAME=.

variable=frame_reference.name
variable=frame_ref.frames.name
variable=radio_name[x].name
variable=select_name.options.name
variable=window_reference.name
variable=window_ref.frames.name

Don't confuse the NAME= label with the VALUE= label in an element.

In the following example, the first call opens a window called msg. The alert() call displays "Infohiway Home Page" in the alert dialog box, because it is the value of str2, which is the NAME portion (the second field) of the window.open() call.

function winOpn(){
 str1="http://www.infohiway.com";
 str2="Infohiway Home Page";
 msg=window.open(str1, str2);
 alert(msg.name);
 }

selectName.options[x].selected

This is a Boolean value specifying the current selection state of an option in a select object.

selectName is either the value of the NAME specified for a <SELECT> tag or an element in the elements array.

x is an integer representing an option in that <SELECT> grouping.

If an option in that <SELECT> grouping is selected, it is set to true; otherwise, it is false.

You can set the selected <OPTION> at any time. The display of the <OPTION> updates immediately when you make the .selected call.

In general, the .selected call will be more useful than the .selectedIndex call for <SELECT> groupings that are created with the MULTIPLE specification. With the .selected call, you can step through every option in the options array to determine multiple selections. And you can select individual options without clearing the selection of other options.

x=selectName.selectedIndex

or

x=selectName.options.selectedIndex

x will be set to an integer specifying the index of the selected option in a <SELECT> grouping.

selectName is either the value of the NAME you specified for a <SELECT> grouping or its corresponding element in the elements array.

Options in a <SELECT> grouping are indexed in the order in which they are defined, starting with an index of 0. You can make the .selectedIndex call at any time. The display of the <SELECT> grouping updates immediately when you set the .selectedIndex. Both forms of the syntax specify the same value.

In general, the .selectedIndex call is more useful for <SELECT> groupings that are created without the MULTIPLE specification. If you read .selectedIndex when multiple options are selected, the .selectedIndex call returns the index of the first option only.

Setting .selectedIndex clears all other options that are selected in that <SELECT> grouping.

As stated in the section before, the .selected call of the select grouping's options array is more useful for <SELECT> groupings that are created with the MULTIPLE specification. With the .selected call, you can step through every option in the options array to determine multiple selections. And you can select individual options without clearing the selection of other options.

In the following example, a getSel(); call would set nr equal to the selected option index number (commencing with 0 in the selection box named "a":

function getSel(){
 nr=document.isn.a.selectedIndex;
 }

With the HTML of the form like this:

<FORM NAME="isn">
<SELECT NAME="a" SIZE=4>
 <OPTION SELECTED> Option 0
 <OPTION> Option 1
 <OPTION> Option 2
 <OPTION> Option 3
</SELECT>
</FORM>

window.status

window directs a priority or transient message in the status bar at the bottom of the window, such as the message that appears when a onMouseOver= call is actuated by the visitor moving the cursor over an anchor, or for the slightly annoying but ubiquitous scrolling messages

Don't confuse the .status call with the .defaultStatus call. The .defaultStatus call returns the default message displayed on the status line at the bottom of the browser.

You can specify the status line display at any time. You must include "return true;" if you want to specify the status display using the onMouseOver= call.

form_name.target

and

link_name.target

For any form, a literal string specifying the name of the window that responses go to after a form has been submitted.

For any link, a literal string specifying the name of the window that will display the page content of a clicked hyperlink.

form_name is either the name of a form or of an element in the forms array.

link_name is an element in the links array.

The target call can be read and will initially contain the TARGET= string of the <FORM></FORM> or <A HREF=></A> tags.

However, you can reset the target and override the original HTML calls, i.e., you can change the target for a form or window at any time.

For some esoteric reason known only to the Netscape® JavaScript source programmers, the target property cannot be assigned the value of a JavaScript expression or variable. You must use a string literal.

variable=sel_name.options[x].text;

variable will return a string specifying the text that follows an <OPTION> tag in a <SELECT> selection box.

sel_name is either the value of the NAME= of the <SELECT> or an element in the elements array.

x is an literal numeric or a variable set equal to an integer representing the <OPTION> listing, commencing with zero.

.text will initially return the text that was specified in your HTML following the <OPTION> tag.

You can set the .text value at any time, but it is a pretty dumb thing to do, since the screen display is not altered, so a visitor selection an option he or she desired might be miffed if you overrode his/her decision and effected some other result.

Said another way: be careful if you change the .text. If you read it after you have changed it, it will return new value, not the text that is displayed on-screen.

top.variable

The .top call is a synonym for the top-most Navigator window, which is a "document window" or "Web Browser window."

top.status

is the same as:

parent.window.status

Other top calls:

top.defaultStatus
top.length
top.window.close()
top.window.open()
top.document.close()
top.document.bgColor="red";
top.frame_name
top.frames[x]

The .top designation refers to the top-most window that contains frames or nested framesets. Use the .top call to refer to this ancestor window.

The parent document defined as follows:

<FRAMESET ROWS="100,100,*">
<FRAME SRC="pane1.htm" NAME="a">
<FRAME SRC="pane2.htm" NAME="b">
<FRAME SRC="pane3.htm" NAME="c">
</FRAMESET>

A script in, say, pane1.htm with this statement:

x=top.length;

would set

x=3;

And the following statement in the same script:

top.b.document.bgColor="red";

would set the background color of pane2.htm to red. However, the following statement would do exactly the same thing:

parent.b.document.bgColor="red";

which might lead you to wonder about bothering to learn the .top call. The only answer is, perhaps, that your JavaScript would not be so ugly.

Using the .value calls in JavaScript

One of the most-used calls in your scripts will be the .value call.

If used to read, the .value call allows you to read what the user has entered in various form elements.

If used to write, the .value call allows you to change the display in a form element on-screen, instantly. (Without reload of the page)

string=document.variable.value;
document.variable.value=string;

In the first form of the call, string is set equal to the VALUE= specified in your HTML of an image, a radio button form element, a checkbox form element, a select form element, an option form element, a hidden form element, a text form element, a textarea form element, a password form element, etc.

In the second form, that value is changed to be equal to the string you specify.

The .value call is a read capable or a write capable call.

When you name something on your HTML page, whether it is a form element, a check box, a radio button, a select options listing or a text area, if you have a VALUE included in that tag, even if set to "", you are able to read the present value of that item (after, say, a visitor has performed some typing or selected or checked an item)

Many times you will want to change that value during the course of your script. This allows you to change (hence, print to screen) a value presently displayed on-screen. Particularly, the text and textarea form elements are useful for this purpose.

hidden, text, and textarea items

The .value returns in a string that initially reflects the VALUE= attribute.

This string is displayed in the text and textarea fields. The value of this property changes when a user or a program modifies the field.

You can specify a changed .value at any time. The display of the text and textarea objects (but not the hidden form element, of course) is updated immediately on-screen when you specify the change of .value.

passwords

The .value returns a string that initially reflects the VALUE= attribute. This string is represented by bullets in the password field. The .value of this element changes when a visitor to your pages types into the form, but the on-screen display is always shown as bullets.

If your script specifies the .value and then reads it, JavaScript returns the current value. If a user interactively modifies the value in the password field, you could not evaluate it accurately (for security reasons) in earlier browser versions, but 3.x versions now permit reading it.

button, reset, and submit items

When a VALUE= is specified in your HTML, the .value returns a string that reflects it. This string is displayed on the face of the button.

When a VALUE= attribute is not specified in your HTML, the .value returned differs for each object:

str=document.button.value;

returns

str="";

str=document.reset.value;

returns

str="Reset";

str=document.submit.value;

returns

str="Submit Query";

These returned value strings are displayed on the faces of the buttons and are read-only.

But do not confuse the VALUE= with the NAME= portion of your elements. The NAME= is not displayed on-screen; it is used to reference different form elements or images from your JavaScript.

select/options array

The .value returns a string that initially reflects the VALUE= attribute. The value of this specification can change when your script modifies it. The VALUE= specification is not displayed on-screen, but is returned to the server if the option is selected.

You can make the .value call at any time.

Do not confuse the .value call with the selection state of the <SELECT> grouping or the text that is displayed as an option. The .selected and .selectedIndex calls are used to determine which options are selected, and the .defaultSelected is used to determine the default selection state. The text that is displayed in each option is specified in the original HTML.

checkboxes and radio buttons

When a VALUE= is specified in your HTML for checkboxes or radio buttons, the .value call will return a string set equal to it. When a VALUE= specification is not made in your original HTML, the .value call returns a string set equal to "on". The VALUE= specification you make is not displayed on-screen, but is returned to the server if the radio button or checkbox is selected.

You can set the .value at any time.

Do not confuse the .value call with the selection state of the text that is displayed next to each checkbox and radio button. The .checked call determines the selection state of the box or button and the .defaultChecked call returns the default selection state. The text that is displayed is specified following the <INPUT TYPE="checkbox"> or the <INPUT TYPE="radio"> tag.

The ckIt() function in the following script reads the .value of a group of buttons and displays it on screen immediately following the form.

<HTML><HEAD>
<TITLE>Read Form Element
 Values</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from JS-Impaired Browsers
function ckIt() {
 document.write("Submit Button value"
 +" is "
 +document.ug.btn1.value
 +"<BR>"
 +"Reset Button value is "
 +document.ug.res.value
 +"<BR>Help Button value is "
 +document.ug.hel.value);
 }
// End Hiding -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white"><CENTER>
<P><B>JavaScript to Read Form Element Values</B>
<BR>(Two without defined values and one with)
<P><FORM NAME="ug">
<FONT COLOR="red"><B>Do not click on buttons
shown below:</B></FONT>
<BR>No defined value submit button:
<INPUT TYPE="submit" NAME="btn1">
<BR>No defined value reset button:
<INPUT TYPE="reset" NAME="res">
<BR>Defined value as " Help ":
<INPUT TYPE="button" NAME="hel"
 VALUE=" Help ">
</FORM><P>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from JS-Impaired Browsers
ckIt();
// End Hiding -->
</SCRIPT>
</BODY>
</HTML>

Click Here to See This Script.

This will print the following just below the buttons on screen when the page is loaded:

Submit Button Value is Query Submit
Reset Button Value is Reset
Help Button Value is Help

The following showIt() routine reads the .value of a group of radio buttons and displays it in a text window:

<HTML><HEAD>
<TITLE>Radio Button Value Reads</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from JS-Impaired Browsers
// First, get the correct newline character
rr=""+(navigator.appVersion.indexOf("Win")>1?"\r\n":"\n");
 
function showIt(){
 /* Here we use the "length" call to
    determine how many buttons are in
    the rb grouping. Yes, we know there
    are four, but it's good practice to use
    this construction, because you may
    modify your program (add some
    more radio buttons) and this saves
    you having to modify the loop limiter
    at that time. */
 len=document.ug.rb.length;
 ls=""
 for (var i=0;i<len;i++){
  ck=""+(document.ug.rb[i].checked?
    " (checked)":" (not checked)");
  ls+="The value of radio button "+i
  +" (rb["+i+"]) is "+document.ug.rb[i].value
  +ck+rr;
  }
 /* Now that we're done with the loop, we
    can send the long string to the
    textarea window. */
 document.ug.ta.value=ls;
 }
// End Hiding -->
</SCRIPT>
<BODY BGCOLOR="white"><CENTER>
<P><B>JavaScript to Perform Radio Button
Value Reads</B>
<BR>Illustrates that an unvalued radio button
shows as "on" - so we must see if it is <B>checked</B>.
<FORM NAME="ug">
<TABLE BORDER=0>
<TR><TD>
<INPUT TYPE="radio"
 NAME="rb" CHECKED> Radio Button One
<BR><INPUT TYPE="radio"
 NAME="rb">Radio Button Two
<BR><INPUT TYPE="radio"
 NAME="rb"> Radio Button Three
<BR><INPUT TYPE="radio"
 NAME="rb"> Radio Button Four
<BR><INPUT TYPE="button" NAME="but"
 VALUE=" Click to Check It "
 onClick="showIt()"></TD></TR>
</TABLE>
<BR><TEXTAREA NAME="ta" ROWS=5
 COLS=60>
</TEXTAREA>
</FORM>
</BODY>
</HTML>

Click Here to See This Script.

© Copyright 1997, John H. Keyes john.keyes@intellink.net