Using Input From a Form Field | CSS, DHTML, and Ajax, Fourth Edition

The most common way users interact with a Web page is with the mouse. But you can also use forms in which visitors enter information, which is then used to perform a specific action, without having to reload the page.

In Chapter 16, I showed you how to move objects from point to point, but you defined those points. Now it's the visitors' turn to define the movement, by allowing them to enter coordinates into form fields.

In this example (Figure 17.4), two form fields are presented to define the x,y position of the object on the page. After entering their desired coordinates, the visitor can click the form button, and the object will be moved.

Figure 17.4. The visitor enters the new coordinates for the picture to dash to.

To receive visitor input through a form:

function moveObjectTo(objectID, formNum) {...}

Add moveObjectTo() to the JavaScript at the head of your document (Code 17.4).

Code 17.4. To show how to read data from form fields, we adapted the function to read values from the input fields.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML, & Ajax | Using Input From a Form Field</title> <script type="text/javascript"> function moveObjectTo(objectID,formNum) {      x = document.forms[formNum].xVal.value;      y = document.forms[formNum].yVal.value;      var object = document.getElementById (objectID);      object.style.left = x + 'px';      object.style.top= y + 'px';      return false; } </script> <style type="text/css" media="screen"> #dash {       visibility: visible;       position: absolute;       top: 36px;       left: 137px;} </style> </head> <body> <div > <img src="/books/3/292/1/html/2/dash.jpg" height="203" width="150" alt="Walking Boy" /></div> <div id="controls"> <form name="newXY"  action="#" method="get">      x:      <input type="text" name="xVal" size="3" />      <br />      y:      <input type="text" name="yVal" size="3" />      <br />      <input onclick="moveObjectTo('dash',0)"; type="button" value="Move" /> </form></div> </body></html>

This function is a modified version of the moveObjectTo() function from Chapter 16. The function reads the values from the indicated form (formNum) using the forms[] array and form field names (xVal and yVal):

x = document.forms[formNum].xVal.value;

It then uses those values for the object's new left and top position.

The form number is an array, with each <form> element given a unique number. The first form is form 0, while subsequent forms are 1, 2, 3, etc.

#dash {...}

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

<div >...</div>

Set up the object you want to control with the form data.

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

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

<input type="text" name="xVal"  size="3">

Add form fields that allow visitors to enter the x and y coordinates of the object's new position.

onclick="moveObjectTo('dash', 0);"

Add an event handler 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 4. Remember, each form is automatically numbered by the Web page, with the first form on the page being 0. Clicking this button causes the element to move to the specified coordinates.

Tip

This example is admittedly of limited use for most Web page applications. However, the technique described has broad applications, especially when we start looking at Ajax.