← Back to jQuery Course | Chapter 8: Working with Forms | Lesson 5 of 5

Double Submissions रोकना

Processing शुरू होते ही submit button को disable करें।

In this page:

  1. Submit के बाद Disable करना
  2. Submission Lock
  3. Button Feedback
  4. Async Submission
  5. Complete Protection
Syntax
javascript 
$(form).one("submit", handler);
$(form).find(":submit").prop("disabled", true);

Submit के बाद Disable करना

Form submit होते ही submit button को disable करना user को page respond करने से पहले फिर click करके गलती से इसे दो बार भेजने से रोकता है।

उदाहरण: Disable After Submit

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <form id="myForm"><button id="submitBtn" type="submit">Send</button></form>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#myForm").on("submit", function() {
        $("#submitBtn").prop("disabled", true);
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Submission Lock

submit handler की शुरुआत में check किया गया एक boolean flag repeated submit handling को रोक सकता है भले ही disable-the-button approach कहीं bypass हो जाए।

उदाहरण: Submission Lock

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <form id="myForm"><button type="submit">Send</button></form>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      let submitted = false;
      $("#myForm").on("submit", function(event) {
        if (submitted) {
          event.preventDefault();
          return;
        }
        submitted = true;
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Button Feedback

Processing के दौरान button का text बदलकर कुछ 'Submitting...' जैसा कर देना users को बताता है कि उनका action register हो गया है और कुछ हो रहा है, सिर्फ button को greyed out छोड़ने के बजाय।

उदाहरण: Button Feedback

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <form id="myForm"><button id="submitBtn" type="submit">Send</button></form>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#myForm").on("submit", function() {
        $("#submitBtn").text("Submitting...");
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Async Submission

खासकर AJAX submissions के लिए, button तब तक locked रहना चाहिए जब तक request असल में complete न हो जाए -- success हो या failure -- क्योंकि page कभी reload नहीं होता accidental reset के लिए।

उदाहरण: Async Submission

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <button id="submitBtn">Send</button>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#submitBtn").on("click", function() {
        $(this).prop("disabled", true);
        setTimeout(function() {
          $("#submitBtn").prop("disabled", false);
        }, 1000);
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Complete Protection

Validation, एक submission lock, और button feedback को combine करना हर angle से double-submission को cover करता है: bad input को भेजने से पहले पकड़ना, repeated handling को block करना, और user को inform रखना।

उदाहरण: Complete Protection

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <form id="myForm"><input id="name"><button id="submitBtn" type="submit">Send</button></form>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#myForm").on("submit", function(event) {
        if ($("#name").val().trim() === "") {
          event.preventDefault();
          return;
        }
        $("#submitBtn").prop("disabled", true).text("Submitting...");
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>
Related Topics

क्लाइंट-साइड Validation · डायनामिक Form इनपुट्स · Form State को Handle करना · जटिल Form Inputs

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. submit button को उसके click handler में disable करना बजाय form के submit event में, ताकि Enter press करने से form फिर भी दो बार submit हो सके।
  2. एक AJAX submit में button को disable करना और error पर कभी re-enable न करना, form को stuck छोड़ते हुए; complete callback या .always() इस्तेमाल करें।
  3. 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:

← Previous Lesson Client-Side Validation Next Lesson → Introduction to AJAX

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.