الأزرار "الناجحة" التي تعرضها عند استدعاء form.submit ()

Question

أنا أعمل على واجهة المستخدم الرسومية على الويب لمنتج يشبه الأجهزة.

لدي نموذج HTML يعمل بشكل جيد: إنه يعرض قائمة بالأشياء مع مربعات الاختيار ، يقوم المستخدم بالتحقق من بعضها وينقر على زر "إزالة" الذي يقدم النموذج. يحصل الخادم على المنشور ، ويزيل العناصر ، ويقوم بتحديث الصفحة. كل شيء بخير.

هناك شرط لإضافة "هل أنت متأكد؟" تأكيد للنموذج. إذا أضفت مكالمة إلى

 confirm("are you sure?");

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

في مكان آخر من المنتج ، لدينا مربع حوار تأكيد مخصص على طراز CSS ، أرغب في استخدامه ، لكنه يعمل مثل هذا: في المكان المناسب ، يمكنك إجراء مكالمة إلى

myConfirm("Confirm", "Are you sure", "Yes", "No", confirmCallback);

هذا يضع نقرة ، ويخصص مربع حوار ، ومراكزه ويعرضه ، ثم يعيد خطأ ولا يقدم النموذج.

في وقت لاحق عندما يقرر المستخدم ، إذا ضغطوا على "نعم" ، فإنه يستدعي وظيفة intrectionCallback. في الجانب الآخر ، تقوم صفحات Ajax المستندة إلى المنتج بإعداد معلوماتها ، وتنشئ جهازًا آخر ويستخدم كائن Ajax النموذج الأولي لنشره ، وكل شيء على ما يرام. (إذا كان "لا" ، فسيتم إزالة مربع الحوار ونقر النقر وتستمر الأمور.)

في هذه الصفحة الأكثر بساطة ، مع نموذج HTML النقي ، لدي وظيفة تأكيد تبدو مثل هذا:

var confirmCallback = function() {
    document.myForm.submit();
}

ويطلق النار بشكل جيد ، ولكن عند تقديم النموذج ، تم بالفعل النقر على زر إزالة ، والخطأ الذي تم إرجاعه بواسطة تأكيد مخصص تم تقديم الطلب. بدلاً من ذلك ، يعتبر هذا تقديمًا جديدًا ، ولم يتم النقر على زر إزالة ، لذلك لا يعتبر "ناجحًا" من حيث HTML 4 القياسي لـ W3.org. يحصل الخادم على البيانات ، ولا يوجد زر إزالة ، يقول "لقد حصلت عليها ولكني لا أتعامل مع ما تريد مني أن أفعله به" ولا أفعل شيئًا سوى تقديم الصفحة التالية.

إذا كنت تقرأ هذا بعيدًا ، شكرًا لك ، وهنا سؤالي الفعلي. كيف يمكنني ، في وظيفة JavaScript الخاصة بي ، بطريقة crossbrowser ، أن أتسبب في إطلاق زر إزالة ، وأصبح "ناجحًا" وأرسل مع بقية البيانات؟

Answer 1

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

إذا كان اسم الأزرار مختلفًا ، فقد تحتاج إلى استخدام أساليب DOM لإضافة الحقل المخفي لأنني لا أعتقد أنه يمكنك تغيير اسم حقل بمجرد إضافته إلى DOM في جميع المتصفحات.

إذا كنت بحاجة إلى أن يعمل هذا الحل بدون JS ، فقد تحتاج إلى اللعب مع منطق JS أكثر قليلاً (للقيام بمزيد من التعديلات على شجرة DOM الأولية) أو تعديل رمز الخادم. يمكنك حتى وضع السلوك "هل أنت متأكد" في الرد ثم ...

Answer 2

Assuming that the remove button is the submit button for that form then probably the easiest solution is to give the form an id

<form id="submitForm"...

Then in your confirm call the form submit

document.getElementById("submitForm").submit()

I think that will do what you're asking but it seems like you were pretty much at that solution already so if you're asking something else let me know.

Answer 3

In your callback, remove the onclick handler for the button (causing the confirmation), then trigger a click on the button. This will cause the button click to submit the form and result in the button causing the submit to be posted back along with the form data.

var confirmCallback = function() {
    $('submitButton').stopObserving('click');
    $('submitButton').click();
}