How HTML Forms Works with JavaScript and Optimize Your Productivity with JQuery

No webpage can be complete without having a source of adding interactions and letting users send information to the database for the purpose of solving problems using programs on a webpage. That is some client-side processing.

The DOM model forms consists elements that creates interface for your webpage or application and we tie events to these elements to perform actions we desired. These interface elements inside HTML form using tag.

So what are these interface elements HTML? They are the ones that can receive events and add interactivity to the page as discussed in our previous article includes, text box radio buttons and check-boxes etc. is a way of receiving information from the user like ordering a shoes from an online store, providing destination for your ride, find shortest distance between two locations, a group of people for our soccer match, finding a lottery winner using initial input from the user. Remember that is all information’s from the form are sent at once to the server.

Before

After

multiple form in a page possible…

and tags that consists interface elements inside it it has attributes include action (where to submit the form), method (how it will submit), (where to load the response from the server) and name which gives unique identification to a form for referencing its object in JavaScript.

wHEN IT INVOLVE SERVER AND CLIENT-SIDE PROCESSING TWO ATTRIBUTES ARE MOST IMPORTANT:

Main attribute in form is ‘action’ tell where information will GET or POSTED

**SECOND ‘**method’ either GET, POST, HEAD, OPTION, etc… tells about your request type

collection of forms in a webpage can be accessed using collection

documente.forms[0]

document.forms.length

document.myForms

document.forms[0] or

document.forms[“myForm”] //documents consisting forms collection

This enables you to access all the form’s methods and properties is a simple form below

Generalizing your code is a way to make it work by playing reference of the object or in simple mean not just hard code your function…

All elements inside a form can be access using “elements” keyword that would be great for validating your data inputs in the form of all object consist a submit() method. For this you will have to use return keyword in the event handler to cancel the event while form validation. One more method reset() restores the default value of a form.

When using submit method of forms on submit event handler would execute.

What is the main interaction TAG???

Now it’s time to add some form interface elements to a form before that you must know that every element inside a form is an object so you have liberty of method and properties. To add any of the interface element, we should use tag inside the and by adding attribute ‘type’ you define the type of interface element. For example type=“text” defines the text box in a form. Now let’s talk about each of interface element type very quickly:

Text Box: this helps us to add text input into your form for example username, first name, and occupation etc. We use type=“text” to define textbox in a form. This control offers some common attributes like ‘name’ (to uniquely identify element), ‘value’ (get or set value to element), ‘form’ (return element’s form location) and ‘type’ (returns type of element e.g. button or checkbox).

Some specific properties for text box are ‘size’, ‘maxlength’. select() methods select all text in a textbox. For conversion from string to a int or float we parseInt(), parseFloat(), and Number(). eventhandlers include onchange, onselect, onkeydown, onkeypress, and onkeyup

Some common method include focus() and blur() among all interface elements. Focus method have you give the focus to the form element and blur method executes the line of code immediately after you lose the focus of of a form element. All blur method is a very good way to validate element data like checking if email entered correctly. Similarly you have these as event handler attributes named as ‘onfocus’ and ‘onblur’ these will execute code when you get the focus or lose the focus (leave) from the form element respectively.

A practice of using onblur and focus() will validate the data or on incorrect input will take you back to the input text-box

Button Element: type=“button”. it can be accessed as forms.element[“button1”] if name is defined or from or directly forms.button1. onclick, onmouseup and onmousedown are event-handler specific to the button.

An easy to shorten up you DOM code is assigning objects as variable like to make it more readable, this just point the variable to the object location

myForm = document.form1 =

You can create functions for on blur and on focus event handler’s do some useful validations.

Password: type=“password” helps to hide characters in the text box but they will be visible then send to the server unless it is a secure is a secure connection. there in another similar element with type=“hidden” that actually hides text box from user. It’s a good way to keep information of a previous page to current page user entered and send it all together at once the server once everything is done.

Textarea: allows multiline text and to define the size use attributes ‘cols’ and rows’ to set the height and width of the text box in terms of number of characters and lines from ‘rows’. It has same properties as a text element. ‘wrap’ you do have to press enter with two options soft and hard. Soft make sure’s that wrapping will occur on client-side but hard will cause the wrapping will be converted to carriage returns when posted to server

//appending text content to textarea

function DisplayEvent(eventName)

{

var myMessage = window.document.form1.textarea2.value;

myMessage = myMessage + eventName;

document.form1.textarea2.value = myMessage;

}

Checkbox and radio button: type=“checkbox” for checkbox and type=“radio” for radio button. They will have two common properties ‘checked’ a way to check if element is checked or not also to to check one check by JavaScript is possible using this property.

document.forms[0].element[“chkbox1”]

document.form1.checkBox.checked = true

document.form1.radioButton1[radBtnIndex].value //taking an element from radio button’s collection

remember that radio button works as group of radio buttons using name attribute makes all the radio button as one group they will look as collection of elements of radio button.so only one radio-button should be checked. Also It is good to check one radio button by default.

document.form1.textarea2.value

except that the radio button is a grouped element, meaning that only one in a group can be checked at once

Selection Boxes: allows to create drop-down list box or combo box to select single or multiple items from them. To add any item in a selection box the use tag inside tag. ‘size’ number of visible elements. To allow multiple elements selection use ’ multiple’ attribute without any assigning value. selectedIndex determines at selected option it returns the index number from selection object’s options collection. index, text (visible to user), value(posted on server"

Selection object consist of a collection of options they can access by this way. Where “selectBox” is name attribute given to selection box:

form1.selectBox.options[0].value

form1.selectBox.options[“sunday”] //if name given to option

change event fires when user choose another option from the list…

Add/Remove Options:

Two paraments The fi rst is the text you want to

appear in the list, and the second the value to be assigned to the option.

var myNewOption = new Option(“TheText”,”TheValue”); //creating new option

document.theForm.theSelectObject.options[0] = myNewOption; //adding new option blank index of selection box

document.theForm.theSelectObject.options[0] = null //remove an option of a specific index , this remove element at last

collection is reordered if element inserted in between.

Adding option at certain element will replace the current option a good way is to first all the elements by one then insert the new option at that position

---

This is slightly more complex than the code required to remove an option. First, you use an if statement to check that there is not already a Wednesday option. If there is no Wednesday option, you then need to make space for the new Wednesday option to be

inserted.

add(), remove() are sophisticated methods to add/remove an option. add() takes two parameter, first option you want to add, the second is specifying index position to which you want you add an option. The good it won’t overwrite existing opition but simply move the current element to next index element to till last by one

var option = new Option(“Wednesday”, 2);

var thursdayOption = theDay.options[2];

try

{

days.add(option, thursdayOption);

}

catch (error)

{

days.add(option, 2);

}

remove() needs one parameter the index to which you want to remove element.

change - when user select or change current to a different then onchange event fires or triggers

How to generate HTML code for your page using JavaScript.

onload event-hander is a good way to set default values to form elements. Set to current date:

theForm.firstDay.options[nowDate.getDate() - 1].selected = true;

theForm.secondDay.options[nowDate.getDate() - 1].selected = true;

//------------

theForm.firstMonth.options[nowDate.getMonth()].selected = true;

theForm.secondMonth.options[nowDate.getMonth()].selected = true;

theForm.firstYear.options[nowDate.getFullYear() - 1970].selected = true;

theForm.secondYear.options[nowDate.getFullYear() - 1970].selected = true;

Get used to with methods valueOf, indexOf,