تعطيل النماذج مع JavaScript عند تقديمها لمنع إرسال مزدوج

Question

أرغب في تعطيل نموذج بعد تقديمه لمنع التقديمات المزدوجة. كنت أعتقد أن حالة الاستخدام القياسية جميلة ، لكن جميع الأمثلة التي يمكنني اكتشافها معيب.

يعتمد كل ما يمكنني العثور عليه على تعطيل زر الإرسال ، لكن هذا لا يمنع إعادة تقديم النموذج إذا ضرب المستخدم مفتاح Enter في النموذج ، وهو نهج شائع جدًا.

أفكر في تعديل أحد البرامج النصية الموجودة هناك لحساب ذلك ، ولكن قبل إعادة اختراع العجلة ، هل يعرف أي شخص البرنامج النصي الذي يتعامل بالفعل مع هذا بشكل صحيح بأنه قادر على المشاركة؟ أنا مندهش حقًا أنه لا يبدو أن هناك أي شيء بعد.

Answer 1

يمكنك إنشاء متغير منطقي (أو كائن مع متغير عضو منطقي) وإرسال النموذج فقط عندما يكون المتغير خطأ. شيء مثل:

function init() {
    var submit = false;
    var f = document.getElementById("FormID");
    f.onsubmit = function() {
        if(submit) {
            return false;
        } else {
            submit = true;
            return true;
        }
    }
}

بالطبع ، سيكون عليك الاتصال init بعد تحميل الصفحة ، في أي نكهة تختار القيام بذلك (window.onload = ..., window.addEventListener(...), window.attachEvent(...), ، إلخ.).

Answer 2

http://jsfiddle.net/c2n4v/

var sent = false;
$('#form').submit(function(e) {
    if (!sent) {
        sent = true;
        // do whatever
    }
    else e.preventDefault();
});

Answer 3

لقد جربت الكثير من الحلول ولكن لم يعمل لي أي منهم. لقد استخدمت هذا الأمر وهو يعمل بشكل جيد حقًا:

jQuery

<script>
$(document).ready(function(){
  $('#buttonSubmit').click(function() {
    if ($('#frm-confirm').attr('submitted')){
        event.preventDefault();
    } else {
        $('#frm-confirm').attr('submitted',true);
    }
  });
});
</script>

HTML/PHP

<form id="frm-confirm" action="" method="post">
    <input id="amount" name="amount" value="<?php echo round($_POST['amount'],2); ?>" type="hidden" />
    <input id="order_id" name="order_id" value="<?php echo htmlspecialchars($_POST['order_id']);?>" type="hidden" />
    <input type="submit" id="buttonSubmit" name="confirm" value="Confirm" />
</form>