Javascript for X: Day 3

Today, 26.12.11, is the third day of the Javascript tutorial here on quadd help. And this is final day of Javascript tutorials on quadd.


Day 3
Controlling Forms using Javascript
Today we will learn how to read values from form text boxes and process them. In this process our yesterday's topic of functions will be very useful. And reading of form elements is very important to create interactive webpages and moreover it defines the real purpose of using forms on websites that is to pass values to the server which user entered in the form elements. And before sending information to the server the values entered into the form elements must be read. So will do  today:

• Reading values from form's text box (To simplify things at this level, we will learn to read text boxes only).

We will use HTML Forms and Javascript functions to achieve this.

Example Code:

This example program consist of a form with two elements one text box named as "fname" and one button which on click calls function "valifateForm()" and passes whole form (with its all fields/elements) as argument. The local argument x of function receives whole form and now behave like form now, so when we say x.fname.value that means we are saying form.fname.value that means 'in form there is fname field in which whatever user have entered (value)'. So, this program reads value entered by user in the text box called fname and shows it back to user using alert dialog box.

Output 1: User entered value to the text box

After clicking form button - Submit - program reads value of text box and shows it on alert dialog box.

Calculator example:

Calculator program: This program uses four functions which are called by four different buttons. The user input values are taken from form text boxes and also output is printed to the form text box. This mechanism is same as Visual Basic working syntax of object.propertyname.

Output1: Your own Calculator

Output2: User Enter values and press "+" button.

Output3: User Enter values and press "-" button.

Output4: User Enter values and press "*" button.

Output5: User Enter values and press "/" button.

So readers, this is end of our Javascript for X tutorials. Hope you found it useful. For any help and queries on this, please comment on the respective tutorial.

Yesterday's topic: Javascript Functions
24.12.11 topic: Javascript Popup Boxes