عندما يتم إرسال طريقة النموذج مباشرة عن طريق الاتصال بـ JS ، لا يستجيب حدث إرسال. لماذا؟ إذا كنت تعرف ، الرجاء الرد. للقياس ، استخدمت input.select () لاختباره ، لكنه كان قادرًا على الاستجابة للحدث المحدد. دعونا نضع هذا السبب جانباً ، دعنا نرى كيفية حل المشكلة الحالية أولاً.
مثال على الكود الذي لا يستجيب للأحداث:
<form id = form1 action = http: //www.jb51com> </part>
<script type = text/javaScript>
var form = document.getElementById ('form1') ؛
form.onsubmit = function () {
تنبيه (1) ؛
} ؛
form.submit () ؛
</script>
في العملية الفعلية ، لن يخرج أي تنبيه.
على الرغم من أن استخدام طريقة إرسال لتقديم نموذج ينتهك مبدأ JavaScript غير المزعوم ، في بعض الأحيان يجب عليك استخدامه. على سبيل المثال ، بعد تحديد العنصر ، تحتاج إلى استخدام JS لإرسال نموذج البحث.
2. تحليل المشكلةنظرًا لأن الحدث نفسه لا يستجيب له ، فمن الممكن فقط تشغيل هذه الأحداث يدويًا. قبل تحديد خطة التشغيل اليدوية ، دعنا نراجع طريقة التسجيل للحدث:
هناك طريقتان أصليتان للتسجيل ، راجع مثال الرمز:
<form id = form1 action = https: //www.vevb.com onsubmit = Alert (1)> </pump> <form id = form1 action = https: //www.vevb.com> </form>
<script type = text/javaScript>
document.getElementById ('form1'). onsubmit = function () {
تنبيه (1) ؛
}
</script>
سيؤدي حدث التسجيل هذا إلى إضافة طريقة OnSubmit إلى النموذج. لذلك ، من الممكن تنفيذ هذه الطريقة مباشرة ، وهو ما يعادل تشغيل الحدث يدويًا.
انظر مثال الرمز:
<script type = text/javaScript>
form.onsubmit () ؛
</script>
هذا يمنحك تنبيهًا.
ومع ذلك ، فإن طريقة التسجيل القياسية المتقدمة DOM2 وطريقة التسجيل IE تُستخدم بالفعل بشكل شائع جدًا. طريقة OnSubmit غير موجودة في طرق التسجيل هذه. إذا تم استخدام form.onsubmit () ، فسيتم الإبلاغ عن خطأ مباشرة.
3. الحلبالطبع ، توفر طريقة التسجيل المتقدمة بحد ذاتها حلاً لإطلاق الأحداث يدويًا ، ولكنها تحتاج فقط إلى كتابة برامج مختلفة لمعايير DOM2 و IE. بالإضافة إلى ذلك ، يعد هذا البرنامج فعالًا أيضًا لطريقة التسجيل الأصلية. يرجى الاطلاع على مثال الرمز:
<script type = text/javaScript>
// أي حدث النار
if (form.fireevent) {
form.fireevent ('onsubmit') ؛
form.submit () ؛
// DOM2 FIRE EVENT
} آخر إذا (document.createevent) {
var ev = document.createEvent ('htmlevents') ؛
ev.Initevent ('إرسال' ، خطأ ، حقيقي) ؛
form.dispatchevent (ev) ؛
}
</script>
4. ملخص رمزلن أشرح التفاصيل هنا. الأصدقاء الذين ليسوا على دراية به ، يرجى التحقق من المعلومات ذات الصلة بنفسك. دعنا نربط الكود بأكمله معًا:
<! doctype html public -// w3c // dtd html 4.01 // en http://www.w3.org/tr/html4/strict.dtd>
<html>
<head>
<meta http-equiv = content-type content = text/html ؛ charset = gbk>
<title> إرسال </title>
<script type = text/javaScript src = http: //k.kbcdn.com/js/yui/build/utability/utability.js> </script>
</head>
<body>
<form id = form1 action = https: //www.vevb.com> </pump>
<script type = text/javaScript>
var form = document.getElementById ('form1') ؛
// yui register الحدث
yahoo.util.event.on ('form1' ، 'submit' ، function () {
تنبيه ('yui') ؛
}) ؛
// DOM0 سجل الحدث
form.onsubmit = function () {
تنبيه (1) ؛
} ؛
// DOM2 سجل الحدث
if (form.adDeventListener) {
Form.AdDeventListener ('submit' ، function () {
تنبيه (2) ؛
}، خطأ شنيع)؛
// أي حدث تسجيل
} آخر إذا (form.attachevent) {
form.attachevent ('onsubmit' ، function () {
تنبيه (2) ؛
}) ؛
}
// أي حدث النار
if (form.fireevent) {
form.fireevent ('onsubmit') ؛
form.submit () ؛
// DOM2 FIRE EVENT
} آخر إذا (document.createevent) {
var ev = document.createEvent ('htmlevents') ؛
ev.Initevent ('إرسال' ، خطأ ، حقيقي) ؛
form.dispatchevent (ev) ؛
}
</script>
</body>
</html>
هناك مشكلة صغيرة مع المدى بأكمله. تحت FX ، Form.Submit () ليست هناك حاجة. لقد قدمت النموذج مباشرة ، لذلك يتم حفظ هذه الجملة أيضًا. الرجاء الرد إذا كنت تعرف السبب.
تم اختبار هذا العرض التوضيحي تحت IE6/IE7/FX.