• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 25. Controls > Using Form Input for Dynamic Actions

Using Form Input for Dynamic Actions

The most common way users interact with a Web page is via the mouse. You can also use forms to receive input from visitors and then perform a specific action. In Chapter 13, I showed you how to move objects from point to point, but you defined those points. Now, it's the visitors'turn.

To receive visitor input through a form:

<script src="findDOM.js"></script>

In any JavaScript function that addresses an object on the screen directly, you need to include the findDOM code. To do so, include it in an external text file and then import that file into the page in which it will be used (Code 25.7).


function moveObjectTo(objectID,x,y)

Add moveObjectTo() to the JavaScript at the head of your document. This function moves the element from its current position to a new position (see "Moving Objects from Point to Point" in Chapter 13), based on the xVal and yVal values of the specified form.


<div id="object1" style=" position:
→ absolute; top: 60px; left: 60px;
→ visibility: visible">...</div>

Set up a CSS layer positioned with the top and left properties.


<form action="#" name="form1"
→ method="get">...</form>

Set up a simple form, and give it a name.

Code 25.7. Enter the coordinates to move Coco the Cat around on the screen (Figure 25.8).


<input type="TEXT" name="xVal"
→ size="3">

Add form fields that allow visitors to enter the x and y coordinates of the position to which they want to move the object.


<input type="button" value="Move"
→ onclick="moveObjectTo
→ ('object1',0)">

Add a form button that triggers moveObjectTo(). Pass the function the ID of the object you want to move and the number of the form you created in step 5. Clicking this button causes the element to move to the specified coordinates (Figure 25.8).

Figure 25.8. The cat has moved to the indicated coordinates. Good kitty!



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint