Form Properties and Methods in JavaScript

Form Properties and Methods in JavaScript

Forms are an essential part of web applications, and JavaScript provides multiple ways to interact with them using properties and methods.

🔹 1. Accessing Forms and Elements

Forms are accessed via the document.forms collection, and form elements are accessed through their names or indexes.

✔ Example: Access a Form by Name

let myForm = document.forms["loginForm"];
console.log(myForm); // Logs the form element

✔ Example: Access a Form by Index

let firstForm = document.forms[0]; // Access the first form on the page
console.log(firstForm);

✔ Example: Access Form Elements

let usernameField = document.forms["loginForm"]["username"];
console.log(usernameField.value); // Get input value

✅ HTML Example

<form name="loginForm">
  <input type="text" name="username" placeholder="Enter username">
  <input type="password" name="password" placeholder="Enter password">
  <button type="submit">Submit</button>
</form>

🔹 2. Form Properties

Property	Description
form.elements	Returns a collection of all elements inside the form.
form.action	Gets or sets the form submission URL.
form.method	Gets or sets the HTTP method (GET, POST).
form.name	Gets or sets the form name.
form.length	Returns the number of form elements.

✔ Example: Accessing Form Properties

let form = document.forms["loginForm"];
console.log(form.action);  // Form action URL
console.log(form.method);  // Form method (GET/POST)
console.log(form.length);  // Number of elements in the form

✔ Example: Change Form Action and Method

form.action = "submit.php";
form.method = "POST";

🔹 3. Input Properties and Methods

Each form input field has properties that allow reading and modifying values.

Property	Description
input.value	Gets or sets the input value.
input.type	Gets or sets the input type (text, password, checkbox, etc.).
input.name	Gets or sets the input name attribute.
input.disabled	Enables or disables the input.
input.checked	Checks or unchecks a checkbox or radio button.

✔ Example: Get and Set Input Values

let username = document.forms["loginForm"]["username"];
console.log(username.value); // Get input value
username.value = "JohnDoe"; // Set input value

✔ Example: Enable/Disable Input Field

username.disabled = true; // Disable input

✔ Example: Check a Checkbox

document.getElementById("agree").checked = true;

✅ HTML Example with Checkbox

<input type="checkbox" id="agree"> I agree

🔹 4. Handling Form Submission

Forms are submitted using the .submit() method or the default form submission behavior.

✔ Example: Prevent Default Form Submission

document.forms["loginForm"].addEventListener("submit", function (event) {
    event.preventDefault(); // Prevent the form from submitting
    console.log("Form submission stopped!");
});

✔ Example: Submit a Form Using JavaScript

document.forms["loginForm"].submit();

🔹 5. Validating Form Data

✔ Example: Validate Before Submitting

document.forms["loginForm"].addEventListener("submit", function (event) {
    let username = this["username"].value;
    if (username.trim() === "") {
        alert("Username cannot be empty!");
        event.preventDefault();
    }
});

🎯 Conclusion

✅ Accessing Forms → document.forms["formName"]
✅ Getting Input Values → input.value
✅ Changing Form Action & Method → form.action = "newURL"
✅ Handling Form Submission → form.submit(), event.preventDefault()
✅ Validating Data → if (input.value === "") { alert("Error") }

🚀 Now you can control forms like a pro!