Form Events
$(selector).submit(handler);
$(selector).change(handler);
$(selector).focus(handler);
$(selector).blur(handler);Focus
focus event उस moment fire होता है जब कोई user किसी form control में click करता है या tab करके पहुँचता है, hints दिखाने या active field को highlight करने के लिए उपयोगी।
उदाहरण: Focus
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="name" type="text">
<script>
$("#name").on("focus", function() {
console.log("Field focused");
});
</script>
</body>
</html>Blur
blur event तब चलता है जब कोई form control focus खो देता है, जो validation चलाने की natural जगह है -- किसी field की value को user के उसके साथ खत्म करने के तुरंत बाद check करना, हर keystroke पर नहीं।
उदाहरण: Blur
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="email" type="text">
<script>
$("#email").on("blur", function() {
console.log("Validate:", $(this).val());
});
</script>
</body>
</html>Change
change event तब fire होता है जब किसी control की value बदल गई हो और user उससे दूर move हो, इसलिए किसी text input के लिए यह blur तक wait करता है, जबकि किसी checkbox या select के लिए यह selection बदलते ही fire हो जाता है।
उदाहरण: Change
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<select id="color"><option>Red</option><option>Blue</option></select>
<script>
$("#color").on("change", function() {
console.log("Selected:", $(this).val());
});
</script>
</body>
</html>Submit
submit event तब fire होता है जब कोई form submit होता है, या तो submit button click करके या किसी field में Enter दबाकर, और यह final validation चलाने या normal page reload रोकने के लिए event.preventDefault() call करने की standard जगह है।
उदाहरण: Submit
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="myForm"><button type="submit">Send</button></form>
<script>
$("#myForm").on("submit", function(event) {
event.preventDefault();
console.log("Form submitted");
});
</script>
</body>
</html>Input
input event हर keystroke या value change पर तुरंत fire होता है, field के focus खोने से भी पहले, इसे live character counters या instant search-as-you-type behavior के लिए सही choice बनाते हुए।
उदाहरण: Input
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="search" type="text"><p id="count"></p>
<script>
$("#search").on("input", function() {
$("#count").text($(this).val().length + " characters");
});
</script>
</body>
</html>- यह उम्मीद करना कि किसी text input पर
changeevent हर keystroke पर fire होगा, जबकि यह field के focus खोने तक wait करता है। - किसी
submithandler मेंevent.preventDefault()भूल जाना, इसलिए browser फिर भी form submit करता है और page reload कर देता है। - submit button को
submitbind करना form के बजाय, इसलिए किसी field में Enter दबाना handler trigger नहीं करता।
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: