Double Submissions रोकना
In this page:
$(form).one("submit", handler);
$(form).find(":submit").prop("disabled", true);Submit के बाद Disable करना
Form submit होते ही submit button को disable करना user को page respond करने से पहले फिर click करके गलती से इसे दो बार भेजने से रोकता है।
उदाहरण: Disable After Submit
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="myForm"><button id="submitBtn" type="submit">Send</button></form>
<script>
$("#myForm").on("submit", function() {
$("#submitBtn").prop("disabled", true);
});
</script>
</body>
</html>Submission Lock
submit handler की शुरुआत में check किया गया एक boolean flag repeated submit handling को रोक सकता है भले ही disable-the-button approach कहीं bypass हो जाए।
उदाहरण: Submission Lock
<!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>
let submitted = false;
$("#myForm").on("submit", function(event) {
if (submitted) {
event.preventDefault();
return;
}
submitted = true;
});
</script>
</body>
</html>Button Feedback
Processing के दौरान button का text बदलकर कुछ 'Submitting...' जैसा कर देना users को बताता है कि उनका action register हो गया है और कुछ हो रहा है, सिर्फ button को greyed out छोड़ने के बजाय।
उदाहरण: Button Feedback
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="myForm"><button id="submitBtn" type="submit">Send</button></form>
<script>
$("#myForm").on("submit", function() {
$("#submitBtn").text("Submitting...");
});
</script>
</body>
</html>Async Submission
खासकर AJAX submissions के लिए, button तब तक locked रहना चाहिए जब तक request असल में complete न हो जाए -- success हो या failure -- क्योंकि page कभी reload नहीं होता accidental reset के लिए।
उदाहरण: Async Submission
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="submitBtn">Send</button>
<script>
$("#submitBtn").on("click", function() {
$(this).prop("disabled", true);
setTimeout(function() {
$("#submitBtn").prop("disabled", false);
}, 1000);
});
</script>
</body>
</html>Complete Protection
Validation, एक submission lock, और button feedback को combine करना हर angle से double-submission को cover करता है: bad input को भेजने से पहले पकड़ना, repeated handling को block करना, और user को inform रखना।
उदाहरण: Complete Protection
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="myForm"><input id="name"><button id="submitBtn" type="submit">Send</button></form>
<script>
$("#myForm").on("submit", function(event) {
if ($("#name").val().trim() === "") {
event.preventDefault();
return;
}
$("#submitBtn").prop("disabled", true).text("Submitting...");
});
</script>
</body>
</html>- submit button को उसके
clickhandler में disable करना बजाय form केsubmitevent में, ताकि Enter press करने से form फिर भी दो बार submit हो सके। - एक AJAX submit में button को disable करना और error पर कभी re-enable न करना, form को stuck छोड़ते हुए;
completecallback या.always()इस्तेमाल करें। - handler के अंदर
let sending = falseजैसा एक lock flag set करना, जहाँ यह हर call पर reset हो जाता है, इसे बाहर रखने के बजाय ताकि यह persist करे।
- jQuery जटिल form inputs handle करता है और form state पढ़ता और बदलता है।
- जैसे-जैसे user interact करता है forms को dynamically बदला जा सकता है।
- Client-side validation और double submissions रोकना form behavior बेहतर बनाते हैं।
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: