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
|