Mastering jQuery: From DOM Manipulation to Dynamic Interactivity

Chapter 5: jQuery Forms and Input Handling

🔹 1. Why Form Handling with jQuery Is Powerful

Forms are where your app connects to the user’s intent — whether it's signing up, logging in, or submitting data. jQuery gives you a clean and simple way to:

• Access and validate inputs
• Handle real-time user feedback
• Prevent invalid submissions
• Send AJAX form data without page reload

🔹 2. Getting and Setting Input Values

✅ Accessing Values

let name = $("#username").val(); // Get

$("#username").val("John");      // Set

✅ Example:

<input type="text" id="email" />

<button id="getEmail">Check</button>

$("#getEmail").click(function(){

  alert("Email: " + $("#email").val());

});

🔹 3. Real-Time Input Validation

✅ Keyup Event + Basic Check

$("#username").on("keyup", function() {

  let value = $(this).val();

  if(value.length < 3){

    $("#error").text("Username too short");

  } else {

    $("#error").text("");

  }

});

Show instant feedback as the user types = better UX.

🔹 4. Form Validation on Submit

$("form").on("submit", function(e){

  e.preventDefault(); // Prevent default reload

  let email = $("#email").val();

  if(email === ""){

    alert("Email is required.");

    return;

  }

  // Proceed with submission logic

});

✅ Combine this with .test() and regex for deeper validation.

🔹 5. Working with Checkboxes & Radios

if($("#agree").prop("checked")) {

  console.log("User agreed to terms.");

}

🔹 6. Select Dropdown Handling

let plan = $("#planSelect").val(); // Get selected

$("#planSelect").val("pro");       // Set selected

✅ Example:

<select id="planSelect">

  <option value="free">Free</option>

  <option value="pro">Pro</option>

</select>

$("#planSelect").change(function(){

  alert("Plan selected: " + $(this).val());

});

🔹 7. Preventing Default Behavior

Use this to stop forms from refreshing the page:

$("form").submit(function(e){

  e.preventDefault();

  // your logic here

});

✅ Essential when handling forms via JavaScript or AJAX.

🔹 8. Submit Form with jQuery AJAX

<form id="loginForm">

  <input type="text" id="user">

  <input type="password" id="pass">

  <button type="submit">Login</button>

</form>

$("#loginForm").on("submit", function(e){

  e.preventDefault();

  let data = {

    user: $("#user").val(),

    pass: $("#pass").val()

  };

  $.post("/api/login", data, function(response){

    alert("Login Success!");

  }).fail(function(){

    alert("Login failed.");

  });

});

🔹 9. Showing/Hiding Submit Button Based on Validation

$("#email").on("keyup", function(){

  let isValid = $(this).val().includes("@");

  $("#submit").prop("disabled", !isValid);

});

✅ Encourages users to correct mistakes before submitting.

🔹 10. Summary Table: jQuery Form Controls