jQuery Working with Forms

Forms are central to user interaction on the web — they collect names, passwords, selections, and file uploads. jQuery makes reading, validating, submitting, and dynamically updating form elements straightforward and consistent across browsers.

Reading Form Values

The val() method reads the current value of form inputs.

Text Input and Textarea

var username = $("#username").val();
var bio      = $("#bio").val();

Dropdown (Select)

var selectedCountry = $("#countrySelect").val();

Radio Buttons

var gender = $("input[name='gender']:checked").val();

Checkboxes

var hobbies = [];
$("input[name='hobby']:checked").each(function() {
  hobbies.push($(this).val());
});
console.log(hobbies);    // e.g., ["Reading", "Cooking"]

Handling Form Submission

Calling event.preventDefault() stops the browser's default behavior (page reload) so the data can be handled with JavaScript or AJAX.

<form id="registrationForm">
  <input type="text" id="fullName" placeholder="Full Name">
  <input type="email" id="email" placeholder="Email">
  <button type="submit">Register</button>
</form>
<div id="formMessage"></div>

<script>
$(function() {
  $("#registrationForm").submit(function(event) {
    event.preventDefault();

    var name  = $("#fullName").val().trim();
    var email = $("#email").val().trim();

    if (name === "" || email === "") {
      $("#formMessage").text("Please fill in all fields.");
    } else {
      $("#formMessage").text("Thank you, " + name + "! We will email you at " + email);
    }
  });
});
</script>

Validation Basics

Real-time Email Validation on blur

$("#email").blur(function() {
  var emailVal = $(this).val();
  var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (!emailPattern.test(emailVal)) {
    $("#emailError").text("Please enter a valid email address.");
  } else {
    $("#emailError").text("");
  }
});

Password Strength Check on keyup

$("#password").keyup(function() {
  var pass = $(this).val();
  var strength = "Weak";

  if (pass.length >= 8 && /[A-Z]/.test(pass) && /[0-9]/.test(pass)) {
    strength = "Strong";
  } else if (pass.length >= 6) {
    strength = "Medium";
  }

  $("#strengthLabel").text("Password strength: " + strength);
});

Dynamically Updating Forms

Show/Hide Fields Based on Selection

<select id="accountType">
  <option value="personal">Personal</option>
  <option value="business">Business</option>
</select>
<div id="businessFields" style="display:none;">
  <input type="text" placeholder="Company Name">
  <input type="text" placeholder="Tax ID">
</div>

<script>
$(function() {
  $("#accountType").change(function() {
    if ($(this).val() === "business") {
      $("#businessFields").slideDown(300);
    } else {
      $("#businessFields").slideUp(300);
    }
  });
});
</script>

Enable Submit Button Only When Form is Complete

$(function() {
  $("input").on("input", function() {
    var allFilled = true;

    $("input[required]").each(function() {
      if ($(this).val().trim() === "") {
        allFilled = false;
      }
    });

    $("#submitBtn").prop("disabled", !allFilled);
  });
});

Serializing Form Data

serialize()

Converts form values into a URL-encoded string suitable for GET or POST requests.

var formData = $("#contactForm").serialize();
// Result: "name=Alice&email=alice%40example.com"

serializeArray()

Converts form values into an array of objects with name and value keys.

var formArray = $("#contactForm").serializeArray();
// [ { name: "username", value: "Alice" }, { name: "email", value: "alice@example.com" } ]

Using serialize() with AJAX

$("#contactForm").submit(function(event) {
  event.preventDefault();
  $.post("send-message.php", $(this).serialize(), function(response) {
    $("#confirmation").text(response);
  });
});

Resetting a Form

// Via native DOM access through jQuery
$("#contactForm")[0].reset();

Key Points

• val() reads and sets values for text inputs, textareas, dropdowns, and checkboxes.
• Always call event.preventDefault() in a form's submit handler to prevent page reload.
• Validate data on both the client side (UX) and the server side (security).
• Use prop("disabled", true/false) to enable or disable form buttons dynamically.
• serialize() and serializeArray() are the standard ways to prepare form data for AJAX submission.