jQuery :reset Selector

What Is :reset?

:reset (since jQuery 1.0) selects every element of type reset — the control that restores a form to its initial defaults. Official docs state it is equivalent to [type="reset"]. Prefer $("input:reset") over bare $(":reset").

$("input:reset")              // reset inputs (official style)
$("form input:reset")         // reset inside a form
$("input[type=reset]")        // equivalent attribute form

// Avoid on large pages:
$(":reset")                   // implies *:reset

// Clicking reset restores form defaults (browser behavior)

How to Use :reset

Prefix with input, scope to a form, then style, count, or bind a confirm-before-reset handler.

1. Write $("input:reset") — avoid bare $(":reset") on large pages.
2. Scope to a form: $("#signup input:reset").
3. Style or disable the control with normal jQuery methods.
4. For custom UX, listen for click and call preventDefault() when the user cancels.
5. For hot paths, prefer input[type="reset"] so the browser can optimize.

Pseudocode

matches = []
for each element in search context:
    if element.type is "reset":
        matches.add(element)

return matches

// Optional follow-up:
on click(reset):
    if user confirms → allow native form reset
    else → preventDefault()

Cheat Sheet

Keep these facts handy while selecting reset buttons.

Live Preview

Run different selectors against a small sample form and see how many reset controls match.

$("input:reset")
matched: 1

/* reset inputs only — submit/button ignored */

jQuery Examples

Short, copy-ready snippets. Open DevTools Console with jQuery loaded, or use Try It Yourself for a live editor.

var input = $("input:reset");
$("#count").text("For this type jQuery found " + input.length + ".");

For this type jQuery found 1.
Other inputs (text, submit, checkbox) → unchanged

var a = $("input:reset").length;
var b = $("input[type=reset]").length;

console.log("input:reset →", a);
console.log("[type=reset] →", b);
console.log("same set?", a === b);

input:reset → 1
[type=reset] → 1
same set? true

$("input:reset").prop("value", "Clear form");
$("input:submit").prop("value", "Send form");

console.log("reset:", $("input:reset").length);
console.log("submit:", $("input:submit").length);

reset: 1
submit: 1
Labels become "Clear form" and "Send form"

$("form input:reset").on("click", function (e) {
  if (!window.confirm("Clear this form?")) {
    e.preventDefault();
    $("#out").text("Reset cancelled.");
  } else {
    $("#out").text("Form will reset to defaults.");
  }
});

Cancel confirm → "Reset cancelled." (fields keep values)
OK confirm → form clears to defaults

var $resets = $("input[type='reset']");
$("#out").text("Found " + $resets.length + " reset via [type=reset]");

// Pure DOM (no jQuery pseudo-class):
// document.querySelectorAll("input[type='reset']")

Found 1 reset via [type=reset]
Works in querySelectorAll — no :reset extension needed

Performance Notes

Official jQuery docs note that because :reset is not CSS, it cannot use the querySelectorAll boost. Prefer [type="reset"] when the page is large or you re-query often.

Key Takeaways