Java Reference
In-Depth Information
When you enter numerical values in the text fi elds and click the button, the box will move to the coordi-
nates you specifi ed. Figure 12-14 shows the box moved to 100,100.
Figure 12-14
In the body of the page, you defi ne a
<div/>
tag with an
id
of
divBox
.
<div id=”divBox”></div>
Inside this element is a form consisting of three <input/> elements. Two of these are text boxes in which
you can input the left and top positions to move the <div/> to, and these have ids of inputLeft and
inputTop, respectively. The third <input/> is a Submit button.
<div id=”divBox”>
<form id=”formBoxController” onsubmit=”moveBox(); return false;” action=”“>
<p>Left: <input type=”text” value=”0” id=”inputLeft” /></p>
<p>Top: <input type=”text” value=”0” id=”inputTop” /></p>
<p><input type=”submit” value=”Move The Box” /></p>
</form>
</div>
When you click the Submit button, the browser fi res the
submit
event for the form. When a submit
button is pressed, the browser attempts to send data to the web server. This attempt at communica-
tion causes the browser to reload the page, making any change you made through DHTML reset itself.
Therefore, you must force the browser to not reload the page. You do this by setting the
submit
event to
return a value of
false
.
In order for the <div/> element to be moved around on the page, it needs to be positioned. This example
positions the element absolutely, although it would be possible to position it relatively as well.
#divBox
{
position: absolute;
