Form in JavaScript

By: aathishankaran in JavaScript Tutorials on 2007-03-27

In JavaScript, the form object represents an HTML form element and provides access to its properties and methods. You can use the form object to get and set form data, submit the form, and perform other operations related to the form.

Here is an example of how to access a form object and its properties in JavaScript:

HTML:

<form name="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">Submit</button>
</form>

JavaScript:

const myForm = document.forms["myForm"];

// Access form properties
console.log(myForm.name); // "myForm"
console.log(myForm.elements["name"].value); // value of the "name" input field

// Add event listener to submit button
myForm.addEventListener("submit", (event) => {
  event.preventDefault(); // prevent the form from submitting

  // Access form data and do something with it
  const formData = new FormData(myForm);
  const name = formData.get("name");
  const email = formData.get("email");
  
  console.log(name, email);
});

In this example, the document.forms["myForm"] expression retrieves a reference to the form element with the name attribute set to "myForm". You can then access the properties of the form object, such as name and elements, to get information about the form and its elements.

You can also add event listeners to the form object to handle form submission or other events, and access the form data using the FormData object.

Previous
<< Checkbox in JavaScript

Next
Handling Events in JavaScript >>