Forms - JavaScript: Novice to Ninja - page 260

Now reload the page and click on the Submit button. You should see an alert dialog saying
“ Submitted .” After you click OK, the browser tries to load a nonexistent page (the URL
should end in something similar to ".../search?searchBox=hello"). This is because when the
event fired, our search() function was invoked displaying the alert dialog; then the form
was submitted to the page in its action attribute for processing, but unfortunately this
page doesn't exist. We won't create that page either, since back-end processing won't be
covered in this topic. What we'll do instead is stop the form from being submitted to that
URL altogether. This is done by using the preventDefault() method that we saw in
the last chapter. Add the following line to the search function:
function search() {
alert("Form Submitted");
return false;
}
Now reload search.htm and try submitting the form. You'll see that the alert dialog still ap-
pears, but after you click OK, nothing else happens.
Retrieving and Changing Values from a Form
Text input element objects have a value property that can be used to find the text inside
the field.
We can use this to report back what the user has searched for. Edit the search() function
to the following:
function search(event) {
alert("You Searched for: " + input.value);
event.preventDefault();
}
Note that in this example, input is the global variable defined at the start of the scripts.js
file. It points to the input element in our form, but it could have been called anything.
Now refresh the page, enter some text in the search box, and you should see a similar sight
to the screenshot shown in Figure 8.2 :