Client-Side Form Handling with JavaScript – Explained with Example Code

HTML forms are essential components of most websites and web apps. They enable interaction between users and those websites, and are a key concept for web developers to understand.

This comprehensive guide covers various aspects of HTML forms, from how to create and structure forms to JavaScript interaction and form validation.

Understanding how to work with forms programmatically allows you to validate and capture user input, handle submissions, and enhance the overall user experience.

By following the examples and best practices provided in this guide, you'll be equipped with the knowledge necessary to build robust web forms that enhance user experience and facilitate seamless data collection and submission.

Whether you're a beginner or an experienced developer, this guide serves as a valuable resource for understanding and implementing HTML forms effectively in your web projects.

Prerequisites:

A basic understanding of JavaScript fundamentals is recommended to fully comprehend the concepts discussed in this tutorial. Familiarity with HTML forms will also be beneficial for understanding and applying the material covered.

If you're new to JavaScript, it's recommended to acquaint yourself with variables, data types, functions, loops, and basic DOM manipulation techniques before diving into this tutorial. This foundational knowledge will facilitate a smoother learning experience as we explore more advanced topics related to form handling in JavaScript.

Starting Note: For your convenience, all the examples and code discussed here can be accessed on GitHub.

Table of Contents

1. Understanding HTML Forms
   – Introduction to HTML form elements
   – JavaScript and Form Handling
   – Accessing Form Fields
   – Example: Registration Form
2. How to Create Radio Buttons
   – JavaScript to Handle Radio Button Selection
   – Radio Button Change Event
3. Checkboxes
   – How to Check if a Checkbox is Checked
   – How to Get Checkbox Values
   – How to Handle Multiple Checkboxes
   – How to Check / Uncheck All Checkboxes
   – How to Dynamically Generate CheckBoxes
4. Select Element
   – How to Interact with a Select Element
   – How to Access Options with JavaScript
   – How to Handle Multiple Selections
   – Example: Task Manager
5. Difference Between Change and Input Event
6. Conclusion

Before we start, here's something to note:

This is a follow up blog on this DOM and Events Handbook and not cover server-side communication/server-side form handling in this blog as it involves advanced topics such as AJAX (Asynchronous JavaScript and XML), Promises, error handling, and handling asynchronous operations in JavaScript.

In this tutorial, we'll instead focuses on how to work with various form elements including radio buttons, checkboxes, and select elements, as well as dynamically generating and interacting with them using JavaScript.

Delving into server-side communication would extend beyond the scope of this article, which aims to provide a comprehensive understanding of DOM manipulation and event handling within the context of form elements.

Understanding HTML Forms

HTML forms are fundamental elements used for collecting and submitting user data on the web. They enable interaction between users and websites by allowing users to input information, make selections, and submit data to servers for processing.

Introduction to HTML Form Elements

HTML forms are created using the <form> element, which acts as a container for various input elements. Common form elements include text fields, checkboxes, radio buttons, dropdown menus, and buttons.

To reference a form in JS, you can use DOM methods like getElementById() or document.forms. document.forms returns a collection of forms, and you can access a specific form using an index, name, or id.

const form = document.getElementById('signup');
const firstForm = document.forms[0]; // accessing first form
const formByName = document.forms['formName']; // accessing form by name
const formById = document.forms['formId']; // accessing form by id

Let's see a basic example of an HTML form:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br>

  <input type="submit" value="Submit">
</form>

In this example, we have a form with two input fields for username and password, along with a submit button.

Form Structure and Attributes

HTML forms can have various attributes that control their behavior and appearance. Some common attributes include:

• action: Specifies the URL where the form data should be submitted.
• method: Specifies the HTTP method used to send form data (post or get).
• target: Specifies where to display the response after form submission (for example, _self, _blank, _parent, _top).
• name: Assigns a name to the form for identification purposes.

Here's an example of a form with action, method, and target attributes:

<form action="/submit-form" method="POST" name="myForm" target="_blank">
  <!-- Form elements go here -->
</form>

JavaScript and Form Handling

JavaScript uses the HTMLFormElement object to represent a form. This object has properties corresponding to the HTML attributes action and method.

Methods like submit() and reset() are used for submitting and resetting forms.

const form = document.getElementById('signup');
form.action; // returns the action attribute
form.method; // returns the method attribute
form.submit(); // submits the form

JavaScript provides Event Handlers to add interactivity to HTML forms. By leveraging these events, you can execute custom scripts in response to user actions within the form:

Submit Event: A form typically has a submit button, which when clicked, sends the form data to the server. This is achieved using an <input> or <button> element with type="submit".

<input type="submit" value="Sign Up">
// or
<button type="submit">Sign Up</button>

To attach an event listener to the submit event, you use the addEventListener() method. Here's an example:

const form = document.getElementById('signup');
form.addEventListener('submit', (event) => {
    // Custom validation and submission logic here
});

In many cases, you may want to intercept the default form submission behavior and execute custom logic before allowing the form to be submitted to the server. You can use preventDefault() for this. Example:

const form = document.getElementById('signup');
form.addEventListener('submit', (event) => {
    event.preventDefault(); // Prevents the default form submission
    // Custom validation and submission logic here
});

Without event.preventDefault(), any custom validation and submission logic would still execute within the event listener, but the default form submission behavior would not be prevented.

Reset Event: The reset event is triggered when the form is reset using a reset button or programmatically. We use reset() method to clear all form fields and reset them to their default values.

document.querySelector('form').addEventListener('reset', function(event) {
    // Custom form reset logic here
});

How to Access Form Fields

You can access form fields using DOM methods like getElementsByName(), getElementById(), querySelector(), and so on

The form.elements property stores a collection of form elements. You can access these Elements by index, id, or name. Here's an example:

const form = document.getElementById('signup');
const nameField = form.elements['name']; // accessing element by name
const emailField = form.elements['email']; // accessing element by name
const firstElement = form.elements[0]; // accessing first element by index no.

Once you've accessed a form field, you can use the value property to access its value. Here's an example:

const nameValue = nameField.value;
const emailValue = emailFieldByName.value;

Form Validation

Form validation is an essential aspect of web development that ensures the data submitted by users is accurate and meets specified criteria before being processed by the server. Common validations include checking for empty fields, valid email formats, and so on.

HTML Form Validation

HTML5 provides built-in form validation through various attributes:

• required: Specifies that a field must be filled out.
• pattern: Specifies a regular expression pattern that the input value must match.
• min and max: Specify the minimum and maximum values for an input field.
• maxlength and minlength: Specify the maximum and minimum length of the input
• type: Specifies the type of input expected (for example, email, number, date).

Here's an example of HTML form validation using these attributes:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required minlength="3" maxlength="15"><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br>

  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="18" max="99"><br>

  <input type="submit" value="Submit">
</form>

JavaScript Form Validation

JavaScript allows developers to perform more sophisticated validation logic beyond what HTML attributes offer. Event listeners can be attached to form elements to handle validation dynamically.

Here's a basic example of JavaScript form validation:

const form = document.querySelector('form');

form.addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent form submission

    // Perform custom validation logic
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;

    if (!emailIsValid(email)) {
        alert('Please enter a valid email address.');
        return;
    }

    if (password.length < 6) {
        alert('Password must be at least 6 characters long.');
        return;
    }

    // If validation passes, submit the form
    form.submit();
});

function emailIsValid(email) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

In this example, the JavaScript function emailIsValid() uses a regular expression to validate the email format. The submit event listener prevents the form from being submitted if the validation fails, and custom error messages are displayed to the user.

Let's See an Example: Registration Form

Now, let's combine all the concepts we've covered into a complete example of a Registration form with client-side validation using JavaScript:

<!DOCTYPE html>
<html>
  <body>
    <h2>User Registration</h2>
    <form id="registrationForm">
      <div>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" />
      </div>
      <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" />
      </div>
      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" />
      </div>
      <div>
        <input type="submit" value="Register" />
      </div>
    </form>

    <div id="errorMessages"></div>
    <script src="script.js"></script>
  </body>
</html>

HTML Structure: We have a simple registration form with fields for username, email, password, and a submit button. There's also a container div (errorMessages) to display validation error messages.

Now let's write JavaScript code to handle form submission and perform client-side validation:

const registrationForm = document.getElementById("registrationForm");
const errorMessages = document.getElementById("errorMessages");

registrationForm.addEventListener("submit", function (event) {
  event.preventDefault();

  const { username, email, password } = registrationForm.elements;

  errorMessages.innerHTML = "";

  if (!username.value.trim()) {
    displayError("Username is required.");
    return;
  }

  if (!email.value.trim() || !isValidEmail(email.value)) {
    displayError("Please enter a valid email address.");
    return;
  }

  if (!password.value.trim() || !isStrongPassword(password.value)) {
    displayError(
      "Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, one digit, and one special character."
    );
    return;
  }

  alert("Registration successful!");
  registrationForm.reset();
});

function displayError(message) {
  errorMessages.innerHTML += `<div class="error">${message}</div>`;
}

function isValidEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

function isStrongPassword(password) {
  return /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}$/.test(password);
}

JavaScript Handling: We select the form and the error message container using getElementById. We attach an event listener to the form's submit event. When the form is submitted, we prevent its default behavior using event.preventDefault() to handle form submission manually.

Form Validation: We retrieve the values of username, email, and password.

We perform basic validation: Username must not be empty, Email must be in a valid format, Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, one digit, and one special character.

Error Handling: If any validation fails, we display the corresponding error message. Error messages are displayed in the errorMessages div.

Form Reset: Upon successful registration (in this case, a simple alert), we reset the form using registrationForm.reset()

Currently, the code uses an alert to indicate successful registration. In a real scenario, you might want to implement an AJAX call to submit the data to a server for processing and handle the response accordingly But that's not what we're going to discuss, as mentioned at the start of this tutorial.

Overall this example covers form creation, form handling with JavaScript, form validation using regular expressions, and dynamic custom error message display, demonstrating a basic user registration form with client-side validation.

Radio Buttons

Radio buttons are a common form element used to select one option from a set of options. In JavaScript, you can manipulate radio buttons to retrieve user selections and perform actions based on those selections.

How to Create Radio Buttons

You can use radio buttons you want users to select only one option from a set of choices. In HTML, you can create radio buttons using the <input> element with the type attribute set to "radio". A group of radio buttons with the same name attribute forms a radio group.

Here's an example:

<!DOCTYPE html>
<html>
  <body>
    <form id="languageForm">
      <p>Select your favorite programming language:</p>
      <div>
        <input type="radio" name="language" value="JavaScript" id="js" />
        <label for="js">JavaScript</label>
      </div>
      <div>
        <input type="radio" name="language" value="Python" id="python" />
        <label for="python">Python</label>
      </div>
      <div>
        <input type="radio" name="language" value="Java" id="java" />
        <label for="java">Java</label>
      </div>
      <!-- More language options can be added here -->
    </form>
  </body>
</html>

You use the id and for attributes for accessibility, linking the label to the corresponding radio button.

How to Retreive the Selected Radio Button Value

Now, let's discuss how to retrieve the value of the selected radio button using JavaScript.

    <!-- HTML -->
    <button id="btn">Show Selected Language</button>
    <p id="output"></p>

    <script>
      const btn = document.querySelector("#btn");
      const radioButtons = document.querySelectorAll('input[name="language"]');
      const output = document.getElementById("output");

      btn.addEventListener("click", () => {
        let selectedLanguage;
        for (const radioButton of radioButtons) {
          if (radioButton.checked) {
            selectedLanguage = radioButton.value;
            break;
          }
        }
        // Displaying the output:
        output.innerText = selectedLanguage
          ? `You selected ${selectedLanguage}`
          : `You haven't selected any language`;
      });
    </script>

Here's how this the code works: the JavaScript code initializes by selecting the button, radio buttons, and output elements from the HTML document. We add a click event listener to the button element. When the button is clicked, the function inside the event listener is executed.

Inside the click event listener, we iterate over all radio buttons in the radioButtons collection. We check if a radio button is checked using its checked property. If a radio button is checked, we assign its value to the selectedLanguage variable and exit the loop using break.

We update the content of the output element (<p> tag with id output) based on whether a language is selected. If a language is selected (selectedLanguage is truthy), we display a message indicating the selected language. Otherwise, we prompt the user to select a language.

Radio Button Change Event

When a radio button is checked or unchecked, it fires a change event. You can listen to this event using addEventListener(). Inside the event handler, you can access the checked state and value of the radio button using this.checked and this.value.

radioButton.addEventListener('change', function (e) {
  if (this.checked) {
    console.log(this.value);
  }
});

How to Dynamically Generate Radio Buttons

Now, let's explore how to dynamically generate radio buttons using JavaScript. This is useful when you want to create radio button options dynamically based on certain criteria or data.

Suppose we have an array of languages, and we want to dynamically generate radio buttons for each language option:

<!DOCTYPE html>
<html>
  <body>
    <div id="languages"></div>

    <script>
      const languageOptions = ["Python", "Javascript", "C++", "Java"];

      // Generate the radio buttons
      const languages = document.querySelector("#languages");
      languages.innerHTML = languageOptions.map((language) => `
          <div>
              <input type="radio" name="language" value="${language}" id="${language}">
              <label for="${language}">${language}</label>
          </div>`).join(' ');
    </script>
  </body>
</html>

It dynamically generates radio buttons based on the languageOptions array and inserts them into the container element (<div id="languages"></div>). Each radio button has a unique ID and value corresponding to the language name, and the labels are associated with their respective radio buttons using the for attribute.

After dynamically generating the radio buttons, Now let's add change event listeners to them to handle changes in selection.

    <!-- HTML -->
    <div id="languages"></div>
    <div id="languageOutput"></div> // we create this one to fetch our selected language output
    
    <!-- Generate the radio buttons -->

// Attaching Change Event Listeners
const radioButtons = document.querySelectorAll('input[name="language"]');
for (const radioButton of radioButtons) {
    radioButton.addEventListener('change', showSelectedlanguage);
}        

// Handling the Change Event
function showSelectedlanguage() {
    if (this.checked) {
        document.querySelector('#languageOutput').innerText = `You selected ${this.value}`;
    }
}

Here's what's happening:

• We select all radio buttons with the name attribute set to "language".
• We use a for...of loop to iterate over each radio button and add a change event listener to each radio button. This listener listens for changes in the state of the radio buttons, i.e., when a radio button is selected or deselected.
• We define a function named showSelectedLanguage to handle the change event triggered by selecting a radio button.
• Inside the showSelectedLanguage function, we first check if the current radio button (this) is checked using the checked property. If the radio button is checked, we update the text content of an element with the id languageOutput using document.querySelector('#languageOutput'). This element serves as a placeholder to display the selected language.

This setup ensures that dynamically generated radio buttons have change event listeners attached to them, allowing for dynamic handling of user selections.

Checkboxes

How to Create an HTML Checkbox

Let's first create a checkbox using the <input> element and type attribute set to "checkbox". let's associate it with label for better accessibility.

<label for="agree">
   <input type="checkbox" id="agree" name="agree" value="yes"> I agree to the terms
</label>

How to Check if a Checkbox is Checked

A checkbox in HTML can exist in two states: checked and unchecked. And we can determine which is active using checked property. If it's true, the checkbox is checked – otherwise, it's unchecked. Example:

<!DOCTYPE html>
<html>
<body>
    <label for="agree">
        <input type="checkbox" id="agree" name="agree"> I agree to the terms
    </label>

    <script>
        const checkbox = document.getElementById('agree');
        console.log(checkbox.checked);
    </script>
</body>
</html>

How to Get Checkbox Values

In HTML forms, when a checkbox is checked and the form is submitted, the browser includes the checkbox in the form data with its name attribute as the key and the value attribute (if specified) as the value. But if the checkbox is unchecked, it's not included in the form data at all.

<label for="agree">
    <input type="checkbox" id="agree" name="agree"> I agree to the terms
</label>

<button id="btn">Show Value</button>
<script>
    const checkbox = document.querySelector('#agree');
    const btn = document.querySelector('#btn');
    btn.onclick = () => {
       alert(checkbox.value);
    };
</script>

So basically the point is: When a checkbox is checked and included in form submissions, the browser defaults to sending 'on' as the value if no value attribute is explicitly defined for the checkbox input element. To accurately handle the checked state of a checkbox using JavaScript, use the checked property instead of relying solely on the value attribute.

How to Handle Multiple Checkboxes

Sometimes, you may need to work with multiple checkboxes with the same name and you want to retrieve the values of the selected checkboxes. Here's an example:

<!DOCTYPE html>
<html>
  <body>
    <p>Select your preferred languages:</p>
    <label for="l1">
      <input type="checkbox" name="language" value="C++" id="l1" />C++
    </label>
    <label for="l2">
      <input type="checkbox" name="language" value="Python" id="l2" />Python
    </label>
    <label for="l3">
      <input type="checkbox" name="language" value="Java" id="l3" />Java
    </label>
    <p>
      <button id="btn">Get Selected Languages</button>
    </p>

    <script>
      const btn = document.querySelector("#btn");
      btn.addEventListener("click", () => {
        const checkboxes = document.querySelectorAll(
          'input[name="language"]:checked'
        );
        const selectedLanguages = Array.from(checkboxes).map(
          (checkbox) => checkbox.value
        );
        alert("Selected Languages: " + selectedLanguages.join(", "));
      });
    </script>
  </body>
</html>

In this example, we have checkboxes for selecting preferred programming languages.

• When the button is clicked, it triggers an event listener. Inside the event listener, we select all checkboxes with the name attribute "language" that are checked.
• We then convert the NodeList returned by querySelectorAll() into an array using Array.from().
• Finally, we map over the array to retrieve the values of selected checkboxes and display them using alert().

How to Check / Uncheck All Checkboxes

Now, let's create a functionality to check or uncheck all checkboxes at once:

<!DOCTYPE html>
<html>
  <body>
    <p>
      <button id="btn">Check / Uncheck All</button>
    </p>
    <p>Select your preferred languages:</p>
    <label for="l1">
      <input type="checkbox" name="language" value="C++" id="l1" />C++
    </label>
    <label for="l2">
      <input type="checkbox" name="language" value="Python" id="l2" />Python
    </label>
    <label for="l3">
      <input type="checkbox" name="language" value="Java" id="l3" />Java
    </label>
    <script src="script.js"></script>
  </body>
</html>

Javascript code:

// function to check or uncheck all checkboxes
function check(checked = true) {
  const checkboxes = document.querySelectorAll('input[name="language"]');

  // Iterate through each checkbox
  checkboxes.forEach((checkbox) => {
    // Set the checked property of each checkbox to the value of the 'checked' parameter
    checkbox.checked = checked;
  });
}

// function to check all checkboxes and change button behavior to uncheck all
function checkAll() {
  check();
  this.onclick = uncheckAll;
}

// function to uncheck all checkboxes and change button behavior to check all
function uncheckAll() {
  check(false);
  this.onclick = checkAll;
}

const btn = document.querySelector("#btn");

btn.onclick = checkAll;

In this example, we have a button labeled "Check / Uncheck All".

• When the button is first clicked, it's intended to check all the checkboxes. Therefore, the checkAll function is assigned to handle this action (const btn = document.querySelector("#btn");).
• If the button is clicked again, it unchecks all checkboxes. We define functions check(), checkAll(), and uncheckAll() to handle the checking and unchecking of checkboxes.
• We assign checkAll() to the button's onclick event initially, and then switch between checkAll() and uncheckAll() based on the current state of the checkboxes.

Alternate approach could be:

function checkAll(checked = true) {
  const checkboxes = document.querySelectorAll('input[name="language"]');
  checkboxes.forEach((checkbox) => {
    checkbox.checked = checked;
  });
}

const btn = document.querySelector("#btn");

btn.addEventListener("click", () => {
  // Find the first checkbox with the name attribute set to 'language'
  const firstCheckbox = document.querySelector('input[name="language"]');
  // Check if the first checkbox is checked
  const isChecked = firstCheckbox.checked;
  // Call the checkAll function with the opposite state of the first checkbox
  checkAll(!isChecked);
});

Here, we select the first checkbox with the name "language" to determine its current checked state. Then, we call checkAll() with the opposite state.

How to Dynamically Generate CheckBoxes

<!DOCTYPE html>
<html>
  <body>
    <div id="languages"></div>

    <script>
      const languageOptions = ["Python", "Javascript", "C++", "Java"];

      // Generate the checkboxes
      const html = languageOptions
        .map(
          (language) => `<label for="language-${language}">
                <input type="checkbox" name="language" id="language-${language}" value="${language}"> ${language}
            </label>`
        )
        .join(" ");
      document.querySelector("#languages").innerHTML = html;
    </script>
  </body>
</html>

Here's how it works:

• We define an array languageOptions containing language names.
• We use the map() method to iterate through the languageOptions array and generate an array of HTML strings for each language.
• Each HTML string comprises a label element associated with an input checkbox. The input checkbox includes appropriate attributes such as type, name, id, and value, dynamically derived from the language name.
• We join the array of HTML strings into a single string using join(' ').
• Finally, we set the innerHTML property of the root <div> element with the id languages to the generated HTML string, thereby rendering checkboxes for each programming language.

Select Element:

The <select> element in HTML provides a dropdown list of options for users to choose from. It allows for single or multiple selections. Example:

<select id="cities">
    <option value="JAI">Jaipur</option>
    <option value="DEL">New Delhi</option>
    <option value="UDR">Udaipur</option>
    <option value="MUM">Mumbai</option>
</select>

By default, a <select> element allows for a single selection. To enable multiple selections, add the multiple attribute.

<select id="cities" multiple>

Users can now select multiple fruits by holding down the Ctrl (or Cmd on Mac) key while clicking.

How to Interact with a Select Element:

To interact with a <select> element using JavaScript, we use the HTMLSelectElement type, which provides useful properties like selectedIndex and value. Example:

<script>
const selectElement = document.getElementById('cities');
console.log(selectElement.selectedIndex); // Returns the index of the selected option
console.log(selectElement.value); // Returns the value of the selected option
console.log(selectElement.multiple); // Returns true if multiple selections are allowed
</script>

JavaScript allows you to handle events on the <select> element, such as when a user selects an option. Example:

<button id="btn">Get Selected City</button>
    <script>
      const btn = document.querySelector("#btn");
      const selectElement = document.getElementById("cities");
      btn.onclick = (event) => {
        event.preventDefault();
        const selectedCity =
          selectElement.options[selectElement.selectedIndex].text;
        alert(`Selected city: ${selectedCity}, 
        Index: ${selectElement.selectedIndex}`);
      };
    </script>

Using the value property: The value property represents the value of the selected option. Let's understand it with example:

<select id="cities">
    <option value="">Jaipur</option> 
    <option value="DEL">New Delhi</option>
    <option value="UDR">Udaipur</option>
    <option>Mumbai</option>
</select>

const btn = document.querySelector("#btn");
const selectElement = document.querySelector("#cities");

btn.onclick = (event) => {
    event.preventDefault();
    alert(selectElement.value);
};

• If "Jaipur" is selected, this means we have an empty string since the value attribute is empty in our Html.
• If an option lacks a value attribute, the select box's value property becomes the text of the selected option. Example: if "Mumbai" is selected, the value property is "Mumbai".
• If multiple options are selected, the value property of the select box is derived from the first selected option based on the previous rules.

How to Access Options with JavaScript

The HTMLOptionElement type represents individual <option> elements within a <select> element in JavaScript. It provides properties like index, selected, text, and value to access information about each option.

const selectElement = document.getElementById('cities');
const secondOptionText = selectElement.options[1].text; // Accessing text of the second option
const secondOptionValue = selectElement.options[1].value; // Accessing value of the second option

How to Handle Multiple Selections:

When a <select> element allows multiple selections, you can iterate through its options to find which ones are selected and retrieve their text values.

const selectElement = document.getElementById('cities');
const selectedOptions = Array.from(selectElement.options).filter(option => option.selected);
const selectedValues = selectedOptions.map(option => option.text); 

The output will be an array containing text of selected options. We can use option.value to get an array of values instead. Example:

<!DOCTYPE html>
<html>
  <body>
    <select id="cities" multiple>
      <option value="JAI">Jaipur</option>
      <option value="DEL">New Delhi</option>
      <option value="UDR">Udaipur</option>
      <option value="MUM">Mumbai</option>
    </select>

    <button id="btn">Get Selected Cities</button>
    <script>
      const btn = document.querySelector("#btn");
      const selectElement = document.querySelector("#cities");

      btn.onclick = (event) => {
        event.preventDefault();
        const selectedOptions = Array.from(selectElement.options)
          .filter((option) => option.selected)
          .map((option) => option.text);
        alert("Selected City: " + selectedOptions.join(", "));
      };
    </script>
  </body>
</html>

• When the button is clicked, the script collects the selected options by filtering the options based on the selected property. It then maps over the selected options to retrieve their text content.
• Finally, it displays the selected languages in an alert message.

Let's See an Example: Task Manager (Adding and Removing Tasks)

<!DOCTYPE html>
<html>
  <style>
    #container {
      max-width: 540px;
      margin: 50px auto;
    }

    form {
      display: flex;
      flex-direction: column;
    }
  </style>
  <body>
    <div id="container">
      <form>
        <label for="task">Task:</label>
        <input
          type="text"
          id="task"
          placeholder="Enter a task"
          autocomplete="off"
        />

        <button id="btnAdd">Add Task</button>

        <label for="taskList">Task List:</label>
        <select id="taskList" name="taskList" multiple></select>

        <button id="btnRemove">Remove Selected Tasks</button>
      </form>
    </div>
    <script src="script.js"></script>
  </body>
</html>

This HTML structure includes input fields for entering task descriptions, buttons for adding and removing tasks, and a <select> element to display the list of tasks. We added a little css for clarity. Let's see Javascript code now:

const btnAdd = document.querySelector('#btnAdd');
const btnRemove = document.querySelector('#btnRemove');
const taskList = document.querySelector('#taskList');
const taskInput = document.querySelector('#task');

btnAdd.onclick = (e) => {
    e.preventDefault();

    // Validate the task input
    if (taskInput.value.trim() === '') {
        alert('Please enter a task description.');
        return;
    }

    // Create a new task option
    const option = new Option(taskInput.value, taskInput.value);
    taskList.add(option, undefined);

    // Reset the task input
    taskInput.value = '';
    taskInput.focus();
};

btnRemove.onclick = (e) => {
    e.preventDefault();

    // Save the selected tasks
    let selectedTasks = [];

    for (let i = 0; i < taskList.options.length; i++) {
        selectedTasks[i] = taskList.options[i].selected;
    }

    // Remove selected tasks
    let index = taskList.options.length;
    while (index--) {
        if (selectedTasks[index]) {
            taskList.remove(index);
        }
    }
};

Explaination: we select the necessary elements from the HTML and attach event listeners to the "Add Task" and "Remove Selected Tasks" buttons. When the "Add Task" button is clicked, we create a new task option based on the input field value and add it to the <select> element. When the "Remove Selected Tasks" button is clicked, we remove the selected tasks from the <select> element.

Difference Between Change and Input Event

The input event in JavaScript is triggered whenever the value of an input, <select>, or <textarea> element changes. Unlike the change event, which waits for a value to be committed (for example, when an input loses focus), the input event fires continuously as the value changes. The input event basically provides a way to respond to user input in real-time. Example:

<!DOCTYPE html>
<html>
<body>
    <label for="userInput">Enter Your Name:</label>
    <input type="text" id="userInput" placeholder="Your name">
    <p>Your name is: <span id="displayName"></span></p>
</body>
</html>

<script>
    const userInput = document.getElementById('userInput');
    const Name = document.getElementById('displayName');

    userInput.addEventListener('input', function() {
        Name.textContent = userInput.value || 'Guest!';
    });
</script>

• This JavaScript code selects the input field with the ID "userInput" and the span element with the ID "displayName".
• An event listener is attached to the input event of the userInput field.
• When the input event is triggered (for example, when typing in the input field), the event handler updates the text content of the displayName span dynamically to reflect the entered name, or it displays "Anonymous" if the input field is empty.
• Now, if you change 'input' to 'change' here userInput.addEventListener('input', function() like this: userInput.addEventListener('change', function(), the event listener will be triggered only when the input field loses focus after a value has been entered (as opposed to continuously while the value is being changed in real-time).

Conclusion

By understanding the fundamentals of HTML form elements, attributes, and events, you can create dynamic and user-friendly web forms that enhance the user experience.

JavaScript plays a crucial role in handling form submissions, validating user input, and providing real-time feedback to users.

Through practical examples and detailed explanations, in this guide you've learned about working with radio buttons, checkboxes, select elements, and handling multiple selections.

Keep exploring and experimenting with the concepts presented here to create robust and intuitive forms for your web applications.