How to use Form Handling in javascript

Form Handling

JavaScript provides access to the forms within an HTML document through the Form object known as HTMLFormElement in the DOM. Which is a child of the Document Object.


accept-charsetUTF-8Specifies the charset used in the submitted form (default: the page charset).
actionURLContains a URL that defines where to send the data after submitting the form
autocompleteOn (default)
Determines that the browser retains the history of previous values.
enctypespecifies how the browser encodes the data before it sends it to the server. (default: is url-encoded).
encodingHolds the value of the enctype attribute, which usually contains either application/x-www-form-urlencoded value or the multipart/form-data value (in the case of file upload)
elements[ ]An array of DOM elements that correspond to the interactive form fields within the form


lengthThe number of a form field with a given form tag. Should bt the same as elements.length
methodGET (default)
Specifies how to send the form data to a web server. The data can be sent as URL variables, by using the get method or as HTTP post, by using the post method
namenameSpecifies a name used to identify the form
novalidatenovalidateSpecifies that the browser should not validate the form.
target_self (default)
Specifies the target of the address in the action attribute


checkValidity ( )Returns a true or false value indicating whether or not all the fields in the form are in a valid state.
reset ( )Returns all form fields to their initial state.
submit ( )Submits the form to the URL specified in the form’s action attribute

Events: –

  • onreset
  • onsubmit
Tagged : / / / / / / /

What is Event in Javascript?

What is Event

The actions to which JavaScript can respond are called Events. An Event is some notable action to which a script can respond.

  • Clicking an element
  • Submitting a form
  • Scrolling page
  • Hovering an element

Event Handler

An Event handler is JavaScript code associated with a particular part of the document and a particular event. A handler is executed if and when the given event occurs at the part of the document to which it is associated.

  • onclick
  • ondblclick
  • onchange
  • onblur

Event Binding with HTML Attribute

These bindings are element attributes, such as onclick and on change, which can be set equal to JavaScript that is to be executed when the given event occurs at that object.

Ex: – <button onclick= “alert(‘Button Clicked’);”>Click Me</button>

Event Binding with JavaScript

When we use this approach we can add or remove handlers dynamically as well as it improves the separation between the structure of the document and its logic and presentation.

Ex: –

Event Binding with JavaScript

Overwriting Event Handler

DOM Event Model

The DOM 2 Event Model specification describes a standard way to create, capture, handle and cancel event in a tree like structure such as an XHTML document’s object hierarchy.


  • Capture Phase
  • Target Phase
  • Bubbling Phase

addEventListener ( )

This method is introduced by DOM2, used to engage an event handler in a page.

Object.addEventListener(event, handler, capturePhase);


  • Object is the node to which the listener is to be bound.
  • Event is a string indicating the type of event.
  • Handler is the function that should be called when the event occurs.
  • capturePhase is a Boolean indicating whether to use Bubbling (false) or Capture (true). This is optional. If you omit there is false by default.

btn.addEventListener(“click”, show, false);

Why we should use addEventListener ( ) ?

Why we should use addEventListener ( )

  • It allows you to bind multiple handlers to an object for the same event.
  • It enables you finer-grained control of the phase when the listener is activated (Capture or Bubbling).
  • It works on any DOM element, not just HTML elements.

removeEventListener ( )

DOM Event Flow/ Event Propagation

The DOM 2 Event Model specification describes a standard way to create, capture, handle and cancel event in a tree like structure such as an XHTML document’s object hierarchy.


  • Capture Phase
  • Target Phase
  • Bubbling Phase

Event Object

DOM events pass an Event object as an argument to handlers. This object contains extra information about the event that occurred.

Ex:- addEventListener(“click”, function(e) { });

Event Methods

  • stopPropagation() –  Prevents further propagation of the current event in the capturing and bubbling phases.

Syntax:- e.stopPropagation();

  • stopImmediatePropagation() – Prevents other listeners of the same event from being called.

Syntax:- e.stopImmediatePropagation();

  • preventDefault()  – The Event interface’s preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

Syntax:- e.preventDefault();

Mouse Event

  • mousedown – It fires when mouse button is pressed down.
  • mouseup – It fires when the mouse button is released.
  • click – It fires when something is clicked. mousedown, mouseup and click events fires in sequence.
  • dblclick – It fires when something is clicked twice in rapid succession. mousedown, mouseup, click, mousedown, mouseup, click, and dblclick events fires in sequence.
  • mouseenter – It fires when a mouse starts to hover over some element. NO bubble.
  • mouseleave – It fires when a mouse exits while hovering over some element. No bubble.
  • mouseover – It fires when mouse is hovering over some element.
  • mouseout – It fires when mouse leaves from hovering over some element.
  • mousemove – It fires when the mouse moves.
  • contextmenu – It fires when mouse right button is clicked.

Focus Event

  • focus – It fires when an element gains focus, such as selecting a form field. No Bubble
  • blur – It fires when element loses focus, such as moving away from a form field. No Bubble
  • focusin – It fires just as an element is about to gain focus.
  • focusout – It fires just as an element loses focus and just before the blur event.

Key Event

  • keydown – It fires as a key is pressed down.
  • keypress – It fires after a key is pressed down (after keydown). It only works with printable characters.
  • keyup – It fires as the key is released.
Tagged : / / /

How to use Visibility Property in CSS?

This property is used to specify whether or not an element is visible. We can set this property to visible (default), hidden or collapse.

hidden –

The element is invisible not removed.


This value is only used for table elements. collapse removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content. If collapse is used on other elements, it will be treated as “hidden”.


p { visibility: hidden;}

Hiding an Element with CSS: Display vs Visibility vs Opacity | Magnus Benoni
Tagged : / / / / /