HTML and CSS Reference
In-Depth Information
Writing the user-defined function findItem().
The user-defined function, findItem(), uses a combination of standard document object
model (DOM) objects, properties, and methods and Internet Explorer's built-in XML parser
methods to find inventory items by item description in the XML document. The findItem()
function will accomplish the following activities to complete this action:
1. Convert the text field (search) input value character data to uppercase characters.
2. Validate that the input value is not blank or a noncharacter value.
3. Move to the first record in the XML document.
4. Compare each element in the XML document with the text box value until a match is found.
5. Construct an output text string with search results.
Plan
Ahead
Creating the JavaScript User-Defined Functions,
findItem() and keyPressed()
The next step is to create the JavaScript user-defined function that takes a target
value from the input search text box and compares it with the <item-description> elements
in the XML document, chapter12-1products_solution.xml.
With the XML document linked to the chapter12-1 search-items_solution.html
Web page, the next step is to add the JavaScript user-defined functions, findItem() and
keyPressed(), to the HTML document. The findItem() function is called when a user
clicks the Submit button. The keyPressed() function is called with every key pressed by
the user and tests if the user pressed the enter key on the keyboard by comparing the
key to ASCII value 13, which represents the enter key. If the enter key was pressed,
the findItem() function is called.
To Enter Code for the findItem() User-Defined Function
The code to begin the JavaScript section and create the findItem() user-defined function is shown
in Table 12-36.
Table 12-36 Code to Begin the JavaScript Section and Create the findItem() Function
Line
Code
7
<script type=”text/javascript”>
8
<!--Hide from old browsers
9
function findItem() {
10
SearchString=SearchText.value.toUpperCase()
11
if ((SearchString==“”) || (SearchString==“ “)) {
12
SearchResult.innerHTML=“&ltPlease enter a valid description.&gt”
13
return
14
}
Lines 7 and 8 start the JavaScript <script> section. Line 9 defines the findItem() user-defined function. Line 10
converts the SearchText text field value to uppercase characters using the toUpperCase() method. Line 11 is a
standard if statement to determine if the resulting SearchString value is blank or null. If the string is blank or null,
the code on line 12 assigns a message to the contents to <div> area innerHTML property. The return statement on
line 13 stops the search and displays the error message. The brace on line 14 closes the if statement.
Search WWH ::




Custom Search