JQuery এ ফর্মগুলি ডাবল জমা আটকাবেন

Question

আমার একটি ফর্ম রয়েছে যা সার্ভারটি প্রক্রিয়া করতে একটু সময় নেয়। আমাকে নিশ্চিত করতে হবে যে ব্যবহারকারীটি অপেক্ষা করছে এবং আবার বোতামটি ক্লিক করে ফর্মটি পুনরায় জমা দেওয়ার চেষ্টা করবেন না। আমি নিম্নলিখিত jQuery কোড ব্যবহার করার চেষ্টা করেছি:

<script type="text/javascript">
$(document).ready(function() {
    $("form#my_form").submit(function() {
        $('input').attr('disabled', 'disabled');
        $('a').attr('disabled', 'disabled');
        return true;
    });
});
</script>

যখন আমি ফায়ারফক্সে এটি চেষ্টা করি সবকিছু অক্ষম হয়ে যায় তবে ফর্মটি কোনও পোস্টের ডেটা সহ জমা দেওয়া হয় না এটি অন্তর্ভুক্ত বলে মনে করা হয়। আমি ফর্মটি জমা দেওয়ার জন্য jQuery ব্যবহার করতে পারি না কারণ ফর্মের সাথে জমা দেওয়ার জন্য আমার বোতামের প্রয়োজন কারণ একাধিক জমা বোতাম রয়েছে এবং আমি নির্ধারণ করি যে কোনটির দ্বারা পোস্টের মধ্যে কোনটির মূল্য অন্তর্ভুক্ত রয়েছে। আমার ফর্মটি যেমন হয় ঠিক তেমন জমা দেওয়ার প্রয়োজন এবং ঘটনার পরে আমার সবকিছু অক্ষম করা দরকার।

ধন্যবাদ!

Comments

আপনার সকল সহায়তার জন্য সবাইকে ধন্যবাদ!

— অ্যাডাম

JQuery- এ ডাবল-ক্লিকগুলি থামাতে লিঙ্কগুলি অক্ষম করার

— বো পারসন

Answer 1

2018 এর আপডেট : আমি এই পুরানো উত্তরের জন্য সবেমাত্র কিছু পয়েন্ট পেয়েছি এবং কেবল এটি যুক্ত করতে চেয়েছিলাম যে অপারেশনকে আদর্শবান করে তোলার সবচেয়ে ভাল সমাধান হ'ল যাতে সদৃশ জমা দেওয়া নিরীহ হয়।

উদাহরণস্বরূপ, যদি ফর্মটি একটি অর্ডার তৈরি করে তবে ফর্মটিতে একটি অনন্য আইডি রাখুন। সার্ভারটি প্রথমবার সেই আইডি দিয়ে একটি অর্ডার তৈরির অনুরোধটি দেখে, এটি তৈরি করা উচিত এবং "সাফল্য" সাড়া দেওয়া উচিত। পরবর্তী সাবমিশনগুলির "সাফল্য" সাড়া দেওয়া উচিত (যদি ক্লায়েন্ট প্রথম প্রতিক্রিয়া না পায়) তবে কোনও পরিবর্তন করা উচিত নয়।

প্রতিযোগিতার পরিস্থিতি রোধ করতে ডাটাবেসে স্বতন্ত্রতা পরীক্ষার মাধ্যমে নকলগুলি সনাক্ত করা উচিত।

---

আমি মনে করি আপনার সমস্যাটি এই লাইন:

$('input').attr('disabled','disabled');

আমি অনুমান করেছি সহ আপনি সমস্ত ইনপুটগুলি অক্ষম করছেন, যার ফর্মটি জমা দেওয়ার কথা রয়েছে ones

কেবল জমা বাটন (গুলি) অক্ষম করতে, আপনি এটি করতে পারেন:

$('button[type=submit], input[type=submit]').prop('disabled',true);

তবে আমি মনে করি না যে এই বোতামগুলি অক্ষম থাকলেও আইই ফর্মটি জমা দেবে। আমি একটি ভিন্ন পদ্ধতির পরামর্শ দিতে চাই।

এটি সমাধানের জন্য একটি jQuery প্লাগইন

আমরা কেবল নিম্নলিখিত কোড সহ এই সমস্যাটি সমাধান করেছি। data()ফর্মটি ইতিমধ্যে জমা দেওয়া বা না হিসাবে চিহ্নিত করতে এখানে কৌশলটি jQuery এর ব্যবহার করছে । এইভাবে, আমাদের জমা দেওয়া বোতামগুলির সাথে গোলযোগ করতে হবে না, যা আইই বাইরে বেরিয়ে আসে।

// jQuery plugin to prevent double submission of forms
jQuery.fn.preventDoubleSubmission = function() {
  $(this).on('submit',function(e){
    var $form = $(this);

    if ($form.data('submitted') === true) {
      // Previously submitted - don't submit again
      e.preventDefault();
    } else {
      // Mark it so that the next submit can be ignored
      $form.data('submitted', true);
    }
  });

  // Keep chainability
  return this;
};

এটি এর মতো ব্যবহার করুন:

$('form').preventDoubleSubmission();

যদি এজেএক্স ফর্মগুলি থাকে যা প্রতি পৃষ্ঠা লোডে একাধিকবার জমা দেওয়ার মঞ্জুরি দেওয়া উচিত , আপনি তাদেরকে এমন একটি শ্রেণি প্রদান করতে পারেন যা এটি নির্দেশ করে, তারপরে এটিকে আপনার নির্বাচক থেকে বাদ দিন:

$('form:not(.js-allow-double-submission)').preventDoubleSubmission();

Comments

শুধু একটি পয়েন্টার - এটি $(this)একটি ক্যাশে ভাল না var that = $(this)?

— স্টুয়ার্ট.স্ক্লিনার

@ স্টুয়ার্ট.স্ক্লিনার - ভাল ধারণা। আমি $formযদিও - 'ফর্ম' ব্যবহার করেছি কারণ এটি আরও বর্ণনামূলক, এবং নেতৃস্থানীয় $কারণ আমার সম্মেলনের দ্বারা, এর অর্থ এটি একটি jQuery অবজেক্ট।

— নাথান লং

ফ্যাক্সটি বৈধ কিনা তা পরীক্ষা করার জন্য jquery বৈধতা অবিরত বৈধতা ব্যবহার করার সময়। যদি ($ (এটি)। বৈধ)) {। form.data ('জমা দেওয়া', সত্য);}

— cck

@ ক্যাক অসাধারণ, আমি এটি ব্যবহার করেছি। আপনার অপসারণের অতিরিক্ত বন্ধন রয়েছে যা আমি সরিয়েছি: যদি ($ (এটি)। માન્ય) {। Form.data ('জমা দেওয়া', সত্য);

— ব্রায়ান ম্যাকেকে

@ ব্রায়ানম্যাককে যদি ফর্মটি বৈধ না থাকে এবং সাবমিট বাটন টিপতে হয় তবে এই জ্যুয়েরি প্লাগইন চিহ্নগুলি জমা দেওয়া গুণাবলী সত্য তবে অবিরাম বিশ্বাসযোগ্যতা বৈধতা ত্রুটির কারণে জমা দিতে বাধা দেয়। ত্রুটিগুলি সংশোধন করার পরে কেউ ফর্মটি জমা দিতে পারবেন না কারণ জমা দেওয়া গুণাবলী সত্য!

— cck

Answer 2

সময় নির্ধারণের ভুল - ক্লায়েন্টের ব্রাউজারে ক্রিয়াটি কতক্ষণ গ্রহণ করবে তা আপনি কীভাবে জানবেন?

এটা কিভাবে করতে হবে

$('form').submit(function(){
  $(this).find(':submit').attr('disabled','disabled');
});

ফর্মটি জমা দেওয়ার পরে এটি সমস্ত জমা বোতামের ভিতরে অক্ষম করে দেবে।

মনে রাখবেন, ফায়ারফক্সে আপনি যখন একটি বোতাম অক্ষম করবেন তখন আপনি ইতিহাসে ফিরে যাওয়ার পরে এই অবস্থাটি মনে থাকবে। এটি রোধ করতে আপনাকে উদাহরণস্বরূপ, পৃষ্ঠা লোডে বোতাম সক্ষম করতে হবে।

Comments

ফায়ারফক্সের পরামর্শের কারণে +1, তবে পৃষ্ঠা লোডে বোতাম সক্ষম করার পাশাপাশি অন্য কোনও বিকল্প আছে কি?

— রাফেল ইসিড্রো

এটিই সবচেয়ে পরিষ্কার উপায়। আমি ক্লিক ইভেন্ট হ্যান্ডলারের সাহায্যে সাবমিট বাটনটি অক্ষম করার চেষ্টা করছিলাম তবে আমার পদ্ধতির ক্রোম নিয়ে সমস্যা দেখা দিচ্ছিল। এই সমাধানটি সুন্দরভাবে কাজ করে।

— অ্যান্টনি

এই পদ্ধতির সাথে খুব সাবধানতা অবলম্বন করুন, যদি আপনার জমা দেওয়ার বোতামের কোনও মূল্য থাকে এবং আপনার এটির প্রয়োজন হয় তবে ফর্মটি এটি জমা দেবে না।

— ফ্যাবিয়েন ম্যাগনার

সর্বশেষতম jQuery ডকুমেন্টেশন অনুসারে আপনার .attr এর পরিবর্তে .প্রপ ব্যবহার করা উচিত। তথ্যসূত্র: api.jquery.com/prop/#entry-longdesc-1 ".prop () পদ্ধতিটি .attr () পদ্ধতির পরিবর্তে অক্ষম রাখতে এবং চেক করতে ব্যবহার করা উচিত" "

— জে প্লানা

Answer 3

আমি মনে করি নাথান লংয়ের উত্তরটি যাওয়ার উপায়। আমার জন্য, আমি ক্লায়েন্ট-পার্শ্বের বৈধতা ব্যবহার করছি, সুতরাং আমি সবেমাত্র একটি শর্ত যুক্ত করেছি যাতে ফর্মটি বৈধ হবে।

সম্পাদনা : এটি যুক্ত না করা থাকলে, ক্লায়েন্ট-পাশের বৈধতা যদি কোনও ত্রুটির মুখোমুখি হয় তবে ব্যবহারকারী কখনই ফর্মটি জমা দিতে পারবেন না।

        // jQuery plugin to prevent double submission of forms
        jQuery.fn.preventDoubleSubmission = function () {
            $(this).on('submit', function (e) {
                var $form = $(this);

                if ($form.data('submitted') === true) {
                    // Previously submitted - don't submit again
                    alert('Form already submitted. Please wait.');
                    e.preventDefault();
                } else {
                    // Mark it so that the next submit can be ignored
                    // ADDED requirement that form be valid
                    if($form.valid()) {
                        $form.data('submitted', true);
                    }
                }
            });

            // Keep chainability
            return this;
        };

Answer 4

event.timeStampফায়ারফক্সে কাজ করে না। মিথ্যা ফিরিয়ে দেওয়া মানহীন, আপনার কল করা উচিত event.preventDefault()। এবং যখন আমরা এতে আছি, সর্বদা একটি নিয়ন্ত্রণের সাথে ব্রেস ব্যবহার করুন ।

পূর্ববর্তী সমস্ত উত্তরগুলি সংক্ষিপ্ত করতে, এখানে একটি প্লাগইন রয়েছে যা কাজ করে এবং ক্রস ব্রাউজারে কাজ করে।

jQuery.fn.preventDoubleSubmission = function() {

    var last_clicked, time_since_clicked;

    jQuery(this).bind('submit', function(event) {

        if(last_clicked) {
            time_since_clicked = jQuery.now() - last_clicked;
        }

        last_clicked = jQuery.now();

        if(time_since_clicked < 2000) {
            // Blocking form submit because it was too soon after the last submit.
            event.preventDefault();
        }

        return true;
    });
};

কার্ন 3 এল কে সম্বোধন করার জন্য, সময় পদ্ধতিটি কেবল আমার জন্য কাজ করে কারণ আমরা সাবমিট বোতামটির ডাবল-ক্লিক থামানোর চেষ্টা করছি। আপনার যদি জমা দেওয়ার ক্ষেত্রে খুব দীর্ঘ প্রতিক্রিয়া সময় থাকে তবে আমি সাবমিট বাটন বা ফর্মটি কোনও স্পিনার দিয়ে প্রতিস্থাপন করার পরামর্শ দিচ্ছি।

উপরের উদাহরণগুলির মধ্যে বেশিরভাগ যেমন ফর্মের পরবর্তী সাবমিশনগুলি সম্পূর্ণরূপে অবরুদ্ধ করে রাখে তার একটি খারাপ পার্শ্ব-প্রতিক্রিয়া রয়েছে: যদি কোনও নেটওয়ার্ক ব্যর্থতা থাকে এবং তারা পুনরায় জমা দেওয়ার চেষ্টা করতে চায় তবে তারা তা করতে অক্ষম হবে এবং তারা পরিবর্তনগুলি হারাবে প্রণীত। এটি অবশ্যই একজন ক্ষুব্ধ ব্যবহারকারী তৈরি করবে।

Comments

তুমি ঠিক বলছো. আপনি অন্য পথে যেতে পারেন - তাত্ক্ষণিকভাবে অক্ষম করুন এবং তারপরে দীর্ঘ সময়সীমা পেরিয়ে আবার সক্ষম করুন। ডাবল ক্লিকগুলি প্রতিরোধ করে, পুনরায় জমা দেওয়ার অনুমতি দেয় তবে তবুও পিছিয়ে থাকা ব্যবহারকারীদের জন্য অবৈধ পুনরায় জমা দেওয়ার অনুমতি দেয়।

— Ctrl-C

Answer 5

দয়া করে jquery- নিরাপদ প্লাগইনটি দেখুন।

ব্যবহারের উদাহরণ:

$('.safeform').safeform({
    timeout: 5000,  // disable next submission for 5 sec
    submit: function() {
        // You can put validation and ajax stuff here...

        // When done no need to wait for timeout, re-enable the form ASAP
        $(this).safeform('complete');
        return false;
    }
});

Answer 6

... তবে যে পোষ্টের ডেটা এতে অন্তর্ভুক্ত বলে মনে করা হচ্ছে তার সাথে ফর্মটি জমা দেওয়া হয়নি।

সঠিক। অক্ষম ফর্ম উপাদান নাম / মান সার্ভারে প্রেরণ করা হবে না। আপনার সেগুলি কেবল পঠনযোগ্য উপাদান হিসাবে সেট করা উচিত ।

এছাড়াও, অ্যাঙ্করগুলি এর মতো অক্ষম করা যায় না। আপনাকে হয় তাদের এইচআরএফগুলি অপসারণ করতে হবে (প্রস্তাবিত নয়) বা তাদের ডিফল্ট আচরণ (আরও ভাল উপায়) প্রতিরোধ করতে হবে, যেমন:

<script type="text/javascript">
$(document).ready(function(){
    $("form#my_form").submit(function(){
      $('input').attr('readonly', true);
      $('input[type=submit]').attr("disabled", "disabled");
      $('a').unbind("click").click(function(e) {
          e.preventDefault();
          // or return false;
      });
    });
</script>

Comments

@ অ্যাডাম, হ্যাঁ, যে কোনও সংযুক্ত ক্লিক হ্যান্ডলারগুলি গুলি চালানো হবে। আমি ভেবেছিলাম আপনি কেবল তাদের সংশোধন করা বন্ধ করতে চেয়েছিলেন?

— karim79

@ করিম 79৯ ক্লিক ক্লিককারীরা বরখাস্ত হয় কি না সে সম্পর্কে আমি পাত্তা দিই না, আমি কেবল এটি নিশ্চিত করতে চাই যে ব্যবহারকারীর অন্য জমা দেওয়া বোতামটি ক্লিক করে ফর্মটি পুনরায় জমা না দেওয়া হয়েছে।

— অ্যাডাম

@ অ্যাডাম - না, তা হবে না। আমি আমার উদাহরণ, আমি যুক্ত করেছি $('input[type=submit]').attr("disabled", "disabled");তবে আমার প্রিয় onclick="this.disabled = 'disabled'"উপায়টি হ'ল জমা দেওয়ার অনক্লিকটি .োকানো।

— karim79

@ করিম 79৯ আমি চেষ্টা করেছিলাম, তবে তারপরে আমি যে সাবমিট বোতামটি ক্লিক করছি তা পোস্টে অন্তর্ভুক্ত নয়। কোন বোতামটি ক্লিক করা হয়েছিল তা নির্ধারণ করার জন্য আমার এটি পোস্টে অন্তর্ভুক্ত করা দরকার

— অ্যাডাম

আমি জানি যে আপনি 'ক' এর জন্য ক্লিক ইভেন্টটি নিখরচায় রেখেছেন তবে কেন কেবল $ ('এ') ব্যবহার করবেন না click ?

— ফ্যাবিও

Answer 7

নাথান লং এর পদ্ধতির উন্নতি করার সম্ভাবনা রয়েছে । আপনি ইতিমধ্যে জমা দেওয়া ফর্মটি সনাক্তকরণের জন্য যুক্তিটি এটির সাথে প্রতিস্থাপন করতে পারেন:

var lastTime = $(this).data("lastSubmitTime");
if (lastTime && typeof lastTime === "object") {
    var now = new Date();
    if ((now - lastTime) > 2000) // 2000ms
        return true;
    else
        return false;
}
$(this).data("lastSubmitTime", new Date());
return true; // or do an ajax call or smth else

Comments

কেন আপনি পৃথিবীতে এই পদ্ধতির জন্য টাইমার ব্যবহার করবেন?

— বোবার্ট

Answer 8

নাথনের কোড তবে jQuery বৈধতা প্লাগইন জন্য

যদি আপনি jQuery যাচাইকরণ প্লাগইন ব্যবহার করে থাকেন, তারা ইতিমধ্যে বাস্তবায়নকৃত হ্যান্ডলারটি জমা দিয়েছে এবং সেক্ষেত্রে একের বেশি কার্যকর করার কোনও কারণ নেই। কোড:

jQuery.validator.setDefaults({
  submitHandler: function(form){
    // Prevent double submit
    if($(form).data('submitted')===true){
      // Previously submitted - don't submit again
      return false;
    } else {
      // Mark form as 'submitted' so that the next submit can be ignored
      $(form).data('submitted', true);
      return true;
    }
  }
});

আপনি সহজেই এর মধ্যে এটি প্রসারিত করতে পারেন } else {ইনপুটগুলি অক্ষম করতে এবং / অথবা জমা বোতামটি সক্রিয় ব্লকের ।

চিয়ার্স

Answer 9

আমি এই পোস্ট থেকে ধারণাগুলি ব্যবহার করে শেষ করেছি এমন একটি সমাধান নিয়ে এসেছি যা আটজাকোর সংস্করণের সাথে বেশ অনুরূপ।

 jQuery.fn.preventDoubleSubmission = function() {

    var last_clicked, time_since_clicked;

    $(this).bind('submit', function(event){

    if(last_clicked) 
      time_since_clicked = event.timeStamp - last_clicked;

    last_clicked = event.timeStamp;

    if(time_since_clicked < 2000)
      return false;

    return true;
  });   
};

এটি ব্যবহার করে:

$('#my-form').preventDoubleSubmission();

আমি দেখতে পেয়েছি যে সমাধানগুলিতে এক ধরণের সময়সীমা অন্তর্ভুক্ত ছিল না তবে কেবল অক্ষম জমা দেওয়া বা অক্ষম ফর্ম উপাদানগুলি সমস্যা তৈরি করেছে কারণ একবার লক আউটটি ট্রিগার হয়ে গেলে আপনি পৃষ্ঠাটি রিফ্রেশ না করা পর্যন্ত আপনি আবার জমা দিতে পারবেন না। এজ্যাক্স স্টাফ করার সময় এটি আমার জন্য কিছু সমস্যা সৃষ্টি করে।

এটি সম্ভবত অভিনেত্রী হিসাবে কিছুটা প্রেটটি করা যেতে পারে।

Answer 10

যদি কোনও ফর্ম পোস্ট করতে AJAX ব্যবহার করে থাকে async: falseতবে ফর্মটি সাফ হওয়ার আগে সেটটিকে অতিরিক্ত জমা জমাগুলি আটকাতে হবে:

$("#form").submit(function(){
    var one = $("#one").val();
    var two = $("#two").val();
    $.ajax({
      type: "POST",
      async: false,  // <------ Will complete submit before allowing further action
      url: "process.php",
      data: "one="+one+"&two="+two+"&add=true",
      success: function(result){
        console.log(result);
        // do something with result
      },
      error: function(){alert('Error!')}
    });
    return false;
   }
});

Comments

<code> asnyc: সত্য </ কোড> সেট করা একটি খারাপ দৃষ্টিভঙ্গি কারণ অনুরোধটি শেষ না হওয়া পর্যন্ত এটি ব্রাউজারকে হিমশীতল করে যা এজেএক্সের সারাংশকে প্রহার করে

— এডউইন এম

Answer 11

বুটস্ট্র্যাপ 3 এর জন্য নাথানের সমাধানটি কিছুটা পরিবর্তিত হয়েছে This উপরন্তু এটি 30 সেকেন্ড পরে সময়সীমা শেষ হবে এবং ফর্মটি পুনরায় জমা দেওয়ার অনুমতি দেবে।

jQuery.fn.preventDoubleSubmission = function() {
  $('input[type="submit"]').data('loading-text', 'Loading...');

  $(this).on('submit',function(e){
    var $form = $(this);

    $('input[type="submit"]', $form).button('loading');

    if ($form.data('submitted') === true) {
      // Previously submitted - don't submit again
      e.preventDefault();
    } else {
      // Mark it so that the next submit can be ignored
      $form.data('submitted', true);
      $form.setFormTimeout();
    }
  });

  // Keep chainability
  return this;
};

jQuery.fn.setFormTimeout = function() {
  var $form = $(this);
  setTimeout(function() {
    $('input[type="submit"]', $form).button('reset');
    alert('Form failed to submit within 30 seconds');
  }, 30000);
};

Answer 12

দুটি জমা বোতাম ব্যবহার করুন।

<input id="sub" name="sub" type="submit" value="OK, Save">
<input id="sub2" name="sub2" type="submit" value="Hidden Submit" style="display:none">

এবং jQuery:

$("#sub").click(function(){
  $(this).val("Please wait..");
  $(this).attr("disabled","disabled");
  $("#sub2").click();
});

Answer 13

জমা দেওয়ার ক্ষেত্রে সহজ কাউন্টার ব্যবহার করুন।

    var submitCounter = 0;
    function monitor() {
        submitCounter++;
        if (submitCounter < 2) {
            console.log('Submitted. Attempt: ' + submitCounter);
            return true;
        }
        console.log('Not Submitted. Attempt: ' + submitCounter);
        return false;
    }

এবং monitor()ফর্ম জমা দেওয়ার কল কল করুন।

    <form action="/someAction.go" onsubmit="return monitor();" method="POST">
        ....
        <input type="submit" value="Save Data">
    </form>

Answer 14

আমি একই ধরণের সমস্যা পেয়েছি এবং আমার সমাধান (গুলি) নিম্নরূপ।

আপনার যদি কোনও ক্লায়েন্টের পাশের বৈধতা না থাকে তবে আপনি এখানে নথিবদ্ধ হিসাবে কেবল jquery এক () পদ্ধতি ব্যবহার করতে পারেন।

http://api.jquery.com/one/

এটি হ্যান্ডলারটি চাওয়ার পরে এটি অক্ষম করে।

$("#mysavebuttonid").on("click", function () {
  $('form').submit();
});

আমি যদি ক্লায়েন্ট সাইডের বৈধতা যাচ্ছিলাম যেমনটি করছিলাম তবে এটি কিছুটা আরও জটিল। উপরের উদাহরণটি ব্যর্থ বৈধতার পরে আপনাকে আবার জমা দিতে দেয় না। পরিবর্তে এই পদ্ধতির চেষ্টা করুন

$("#mysavebuttonid").on("click", function (event) {
  $('form').submit();
  if (boolFormPassedClientSideValidation) {
        //form has passed client side validation and is going to be saved
        //now disable this button from future presses
        $(this).off(event);
   }
});

Answer 15

আপনি এটি দ্বারা দ্বিতীয় জমা থামাতে পারেন

$("form").submit(function() {
        // submit more than once return false
        $(this).submit(function() {
            return false;
        });
        // submit once return true
        return true; // or do what you want to do
    });
});

Answer 16

আমার সমাধান:

// jQuery plugin to prevent double submission of forms
$.fn.preventDoubleSubmission = function () {
    var $form = $(this);

    $form.find('[type="submit"]').click(function () {
        $(this).prop('disabled', true);
        $form.submit();
    });

    // Keep chainability
    return this;
};

Answer 17

আমার ক্ষেত্রে ফর্মটির অনসামিতের কিছু বৈধতা কোড ছিল, তাই আমি নাথন লং উত্তরটি অনসামিত চেকপয়েন্ট সহ বাড়িয়েছি

$.fn.preventDoubleSubmission = function() {
      $(this).on('submit',function(e){
        var $form = $(this);
        //if the form has something in onsubmit
        var submitCode = $form.attr('onsubmit');
        if(submitCode != undefined && submitCode != ''){
            var submitFunction = new Function (submitCode);
            if(!submitFunction()){
                event.preventDefault();
                return false;
            }                   
        }

        if ($form.data('submitted') === true) {
            /*Previously submitted - don't submit again */
            e.preventDefault();
        } else {
          /*Mark it so that the next submit can be ignored*/
          $form.data('submitted', true);
        }
      });

      /*Keep chainability*/
      return this;
    };

Answer 18

জমা বোতাম পরিবর্তন করুন:

<input id="submitButtonId" type="submit" value="Delete" />

সাধারণ বোতাম সহ:

<input id="submitButtonId" type="button" value="Delete" />

তারপরে ক্লিক করুন ফাংশন:

$("#submitButtonId").click(function () {
        $('#submitButtonId').prop('disabled', true);
        $('#myForm').submit();
    });

এবং প্রয়োজনীয় যখন পুনরায় সক্ষম বোতাম মনে রাখবেন:

$('#submitButtonId').prop('disabled', false);

Answer 19

আমি পয়েন্টার-ইভেন্টগুলির ভাল পুরানো ফ্যাশন সিএসএস ট্রিককে বিশ্বাস করতে পারি না: এখনও কোনওটিরই উল্লেখ করা হয়নি। অক্ষম বৈশিষ্ট্য যুক্ত করে আমার একই সমস্যা ছিল তবে এটি আর পোস্ট করবে না। নীচে চেষ্টা করুন এবং আপনার জমা বোতামের আইডি দিয়ে # সাবমিটবটন প্রতিস্থাপন করুন।

$(document).on('click', '#SubmitButton', function () {
    $(this).css('pointer-events', 'none');
})

Comments

ব্যবহারকারী Enterকী টিপলে এটি ফর্ম জমাগুলি থামায় না ।

— সংস্কার করা হয়েছে

Answer 20

কেবল এটিই কেন নয় - এটি ফর্মটি জমা দেবে তবে জমা দেওয়ার বোতামটিও অক্ষম করবে,

   $('#myForm').on('submit', function(e) {
       var clickedSubmit = $(this).find('input[type=submit]:focus');
       $(clickedSubmit).prop('disabled', true);
   });

এছাড়াও, আপনি যদি jQuery বৈধতা ব্যবহার করে থাকেন তবে আপনি এই দুটি লাইনটি নীচে রাখতে পারেন if ($('#myForm').valid())।

Answer 21

এই কোডটি বোতামের লেবেলে লোডিং প্রদর্শন করবে এবং এতে বোতামটি সেট করবে

অক্ষম রাষ্ট্র, তারপরে প্রক্রিয়াজাতকরণের পরে, পুনরায় সক্ষম করুন এবং মূল বোতামের পাঠ্য ফিরে করুন **

$(function () {

    $(".btn-Loading").each(function (idx, elm) {
        $(elm).click(function () {
            //do processing
            if ($(".input-validation-error").length > 0)
                return;
            $(this).attr("label", $(this).text()).text("loading ....");
            $(this).delay(1000).animate({ disabled: true }, 1000, function () {
                //original event call
                $.when($(elm).delay(1000).one("click")).done(function () {
                    $(this).animate({ disabled: false }, 1000, function () {
                        $(this).text($(this).attr("label"));
                    })
                });
                //processing finalized
            });
        });
    });
    // and fire it after definition
});

Answer 22

আমি খুব অনুরূপ একটি সমস্যা ব্যবহার করে সমাধান করেছি:

$("#my_form").submit(function(){
    $('input[type=submit]').click(function(event){
        event.preventDefault();
    });
});