Handling Form State
In this page:
Enable and Disable
prop(disabled, true/false) controls whether a form field can currently be interacted with by the user, greying it out and blocking input when disabled. This is the live behavioral state, not just a visual style, so a disabled field's value also won't be submitted with the form.
Example: Enable and Disable
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="field" type="text">
<button id="btn">Disable</button>
<script>
$("#btn").on("click", function() {
$("#field").prop("disabled", true);
});
</script>
</body>
</html>Required State
The required property, read and set through prop(), controls whether a field must be filled in before the browser will allow form submission. Toggling it with jQuery lets you make fields conditionally required based on other choices the user has made.
Example: Required State
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="field" type="text">
<script>
$("#field").prop("required", true);
</script>
</body>
</html>Checked State
Checkboxes and radio buttons use the checked property, accessed through prop() rather than attr(), since it reflects the live, currently-clicked state rather than the original HTML markup. This is the same distinction covered in the attr() versus prop() topic, applied specifically to selectable inputs.
Example: Checked State
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="agree" type="checkbox">
<script>
$("#agree").prop("checked", true);
console.log($("#agree").prop("checked"));
</script>
</body>
</html>Reset State
Calling a form's native reset() restores every field to its initial HTML-authored defaults, undoing any changes the user made -- this happens at the DOM level, not through jQuery specifically, though jQuery can trigger it via trigger(reset).
Example: Reset State
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="myForm"><input value="typed text"></form>
<button id="resetBtn">Reset</button>
<script>
$("#resetBtn").on("click", function() {
document.getElementById("myForm").reset();
});
</script>
</body>
</html>Track Changes
A simple boolean flag, set inside change or input event handlers, can track whether a form has been modified since it was loaded. This is commonly used to warn a user about unsaved changes if they try to navigate away.
Example: Track Changes
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="field" type="text">
<script>
let dirty = false;
$("#field").on("input", function() {
dirty = true;
});
</script>
</body>
</html>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: