Build a website with javascript games and other dynamic content

Step Two - Changing Form Values upon events

When this page started the first think that it did was to change the empty text box farther below to show 'Try to change it!' That is because in the body tag of this page was defined that on the event of loading that page it will start the script say_hello()

<body onload="say_hello()" >

<script>

function say_hello()

{

document.form_name.textboxname.value="Try to change it!";

}

</script>



Another event that could be used on text boxes is the onchange event which I demonstrate in the same text box

Click in the text box and try to change it. It will change back when you click again outside of box. The box appears in the source as


<form name="form_name"

<input type="text" onchange="changeback()"

value="" name="textboxname">

The change back function itself is defined by a script like

<script>

function changeback()

{

if(document.form_name.textboxname.value=="Try to change it!") return;

document.form_name.textboxname.value="Try to change it!";

}

</script>



Please note also that there is a if in the beginning of the funtion. It checks that the box does not already have the value required. Otherwise the function could call itself indefinetly often, everytime when it triggers the onchange event by assigning a value to the box.

This method of assigning a value can be used for all form items like text boxes, checkboxes, radio buttons, and even the caption on a button.

Next step

 

AK
Start

My Games

Get Games

Build Games
space
1 - simple javascripts
2 - change form values
3 - statusbar & mouse
4 - change images
5 - preload images
6 - change location
7 - open/close windows
8 - other sources

Feedback or Questions

about me

 
 

Copyright by Armin Kielack 1998 last modified: