Manipulating data in javascript - AJAX

You can use JavaScript to achieve much more than popping up dialog boxes. JavaScript gives you the opportunity to define and use variables and arrays, work with date and time arithmetic, and control program flow with loops and conditional branches.

The concept of a variable might already be familiar to you if you’ve ever done any algebra, or programmed in just about any computer language. A variable is a piece of data given a name by which you can conveniently refer to it later. In JavaScript, you declare variables with the keyword var:

The preceding line of code declares the variable speed and by using the assignment operator = assigns it a value of 63. We may now use this variable in other statements:

Variables need not be numeric; the statement

assigns a string to the variable lastname.

Both numeric and string variables may be manipulated within JavaScript statements. Consider the following code:

This code would write Hello, Susan Smith into our document.

You met the concept of an object earlier in the lesson and saw how objects have both properties that describe them and methods that perform actions on them.

Objects in JavaScript have a hierarchical relationship. References begin with the highest-level object, with subsequent levels appended separated by a period:

This string starts with the object document, then refers to an objectimage1 within that object, and finally the property src (the source file for the image).Suppose that we have the following HTML code somewhere in our page:

We can refer, in JavaScript, to the string that the user has typed into the lastname field by referring to the property value of the object corresponding to that field:


Example—Form Validation
Let’s use this technique to check a user’s entered form data for validity. We want to trap the event of the user attempting to submit the form and use this event to trigger our JavaScript function, which checks the data for validity. Here’s the HTML code for our form:

We can see here that the onSubmit event handler is called when the Submit button is clicked and calls a JavaScript function called numcheck().We need this function to check what our user has entered for validity, and either submit the form or (if the entry is invalid) issue an error. Note the word return prior to the function call. This is here because on this occasion we want the function to tell us whether the submit method should be allowed to go ahead.We want our function to return a value of false to the form if the form submission is to be stopped. Here’s the function:

The first action of the function is to assign the user’s entered value to the variable numentered. We then test that number for validity by checking that it is greater than or equal to 1 and less than or equal to 10. Depending on the result, we either return a value of true to the calling form (thus allowing the form to be submitted) or pop up a dialog informing of the error. In the latter case, when the user clicks OK to clear the dialog, a value of false is returned to the calling form, preventing the form from being submitted until the user enters appropriate data.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

AJAX Topics