توضح لك هذه المقالة أمثلة للتحكم في نموذج JS للرجوع إليها. المحتوى المحدد كما يلي
مثال 1: تكرار من خلال جميع عناصر التحكم في النموذج
<script type = "text/javaScript"> // transf وظيفة النموذج getValues () {var f = document.forms [0] ؛ // الحصول على نموذج DOM var elements = f.elements ؛ // احصل على جميع صفيف التحكم var str = '' ؛ // split string // loop traversal for (var i = 0 ؛ i <elements.length ؛ i ++) {var e = elements [i] ؛ // التحكم الحالي str += e.value ؛ // انقسام قيمة التحكم str += '/n' ؛ // split explator} ALERT (str) ؛ // إظهار النتيجة باستخدام مربع مطالبة} </script> <النموذج> مربع النص: <type type = "text" name = "mytext"/> <br/> مربع الراديو: <إدخال type = "radio" name = "myradio" value = "1"/> 1 <input type = "radio" name = "myradio" value = "2" value = ""> == الرجاء تحديد == </orpue> <orpue value = "1"> 1 </teptors> <Option Value = "2"> 2 </point> </select> <br/> <input type = "button" value = "getValues ()"/> </fump>مثال 2: الوصول إلى عنصر تحكم محدد من خلال اسم التحكم
<script type = "text/javaScript"> // CONCENT ONVENT ORDECT من خلال وظيفة اسم التحكم getFormdom () {var f = document.forms [0] ؛ // الحصول على نموذج dom var mytext = f.mytext ؛ // Get Control dom by name // proded اسم التحكم وتنبيه القيمة (mytext.name + ":" + mytext.value) ؛ } </script> <potur> مربع النص: <إدخال type = "text" name = "myText"/> <br/> <input type = "button" value = "getControl" onClick = "getFormdom ()"/> </pump>مثال 3: احصل على عدد مربعات النص في النموذج
<script type = "text/javaScript"> // احصل على عدد مربعات النص في وظيفة النموذج getInputCount () {var f = document.forms [0] ؛ // الحصول على نموذج DOM var elements = f.elements ؛ // احصل على جميع Control Array Var Count = 0 ؛ // stat الرقم الإجمالي // loop traversal لـ (var i = 0 ؛ i <elements.length ؛ i ++) {// التحكم الحالي var e = elements [i] ؛ // هل هو مربع نص إذا ( // يتم إضافة العدد الإجمالي في حد ذاته}} // استخدام مربع المطالبة لعرض تنبيه النتيجة ("مربع النص يحتوي على ما مجموعه:" + count + "s") ؛ } </script>مثال 4: طريقة التقديم لتعديل النموذج
تحدد سمة الطريقة طريقة HTTP (GET أو POST) المستخدمة عند إرسال نموذج. عند استخدام GET ، تكون بيانات النموذج مرئية في شريط عنوان الصفحة ، والنشر أكثر أمانًا لأن البيانات المقدمة في شريط عنوان الصفحة غير مرئي.
<script type = "text/javaScript"> // تعديل وظيفة طريقة تقديم النموذج modifyMethod () {var f = document.forms [0] ؛ // احصل على نموذج dom var method = f.mymethod.value ؛ // طريقة محددة f.method = method ؛ // تعديل طريقة التقديم المحددة // استخدم مربع المطالبة لعرض تنبيه النتيجة ("طريقة التقديم الحالية للنموذج:" + طريقة) ؛ } </script> <method method = "post"> الرجاء تحديد طريقة التقديم: <select name = "mymethod"> <option value = ""> == select == </option> <orture value = "get" </form>مثال 5: حدد ديناميكي سمات الإجراء للنموذج
تحدد سمة الإجراء الإجراء الذي يتم تنفيذه عند تقديم النموذج.
من الممارسات الشائعة إرسال النماذج إلى خادم لاستخدام زر إرسال.
عادة ، يتم تقديم النماذج إلى صفحات الويب على خادم الويب.
إذا تم حذف سمة الإجراء ، فسيتم تعيين الإجراء على الصفحة الحالية.
<script type = "text/javaScript"> // حدد بشكل ديناميكي سمة الإجراء لدالة النموذج modifyCATIC () {var f = document.forms [0] ؛ // الحصول على نموذج DOM var newurl = f.newurl.value ؛ // طريقة محددة f.action = newurl ؛ // تعديل عنوان الإجراء للنموذج المقدم // استخدم مربع المطالبة لعرض تنبيه النتيجة ("الإجراء الحالي للنموذج:" + f.action) ؛ } </script> <method method = "post"> الرجاء تحديد طريقة إرسال: <type type = "text" name = "newurl"/> <br/> <input type = "button" value = "modify prid scike" onClick = "ModifyAction ()/> </form>مثال 6: التحكم في التركيز الانتقائي الديناميكي
<script type = "text/javaScript"> // مربع الراديو الأول هو وظيفة التركيز FocusIt () {var f = document.forms [0] ؛ // الحصول على نموذج dom var myradio = f.myradio ؛ // الحصول على مربع الراديو myradio [0] .focus () ؛ // يحصل مربع الراديو الأول على Focus} </script> <النموذج> مربع النص: <type type = "text" name = "mytext"/> <br/> مربع الراديو: <إدخال type = "radio" name = "myradio" value = "1"/> <input type = "radio" name = "myradio" value = "2"/> == </OPTION> <OPTION VALUES = "1"> 1 </OPTION> <OPTION VALUES = "2"> 2 </OPTION> </30> <BR/> <input type = "button" value = "مربع الراديو الأول هو التركيز" onClick = "FocusIt ()/> </form>مثال 7: تهيئة قيم جميع عناصر التحكم في النموذج إلى الحالة الأولية
<script type = "text/javaScript"> // تهيئة قيم جميع عناصر التحكم في النموذج إلى وظيفة الحالة الأولية init () {var f = document.forms [0] ؛ // الحصول على نموذج dom f.reset () ؛ // استخدم Reset () function} </script>مثال 8: إضافة تفسير لجميع عناصر التحكم في النماذج
<script type = "text/javaScript"> // batch a description for controls functions functions batchcomment () {var f = document.forms [0] ؛ // الحصول على نموذج dom var children = f.childnodes ؛ // احصل على جميع عناصر الطفل في شكل var newarr = [] ؛ // تحديد صفيف العنصر الجديد var j = 0 ؛ // تحديد المركز التراكمي لمجموعة العناصر الجديدة // حلقة من خلال عناصر الطفل لـ (var i = 0 ؛ i <knder.length ؛ i ++) {var e = children [i] ؛ // عنصر الطفل الحالي Newarr [j ++] = e ؛ // أضف إلى الصفيف الجديد // حدد ما إذا كان عنصر تحكم إذا (e.tagName == 'input' || Newarr [j ++] = text ؛ // إضافة عقد للمصفوعة الجديدة}} // قم بمسح محتوى النموذج الموجود f.innerhtml = '' ؛ // وصف الدُفعات لـ (var i = 0 ؛ i <newarr.length ؛ i ++) {// إضافة عناصر قديمة وعقد الوصف في نموذج f.appendchild (newarr [i]) ؛ }}} </script>مثال 9: استخدم عناصر التحكم المخفية لإضافة معلمات إلى النموذج
<script type = "text/javaScript"> // function function showparams () {// اضبط قيمة المتغير المخفي. يمكن أيضًا تحديد هذه القيمة من خلال قيمة مستند قيمة العلامة. // تحديد متغير الربط الحرف var str = 'تشمل المعلمات المقدمة من النموذج:' ؛ // split year parameter str + = '/n year:' + document.forms [0] .myyear.value ؛ // split name parameter str + = '/n name:' + document.forms [0] .Myname.value ؛ // تقسيم المعلمة المخفية str + = '/nhide متغير:' + document.forms [0] .myHidden.value ؛ تنبيه (STR) ؛ // عرض قيمة الحرف} </script> <form> <input type = "hidden" name = "myHidden"/> السنة: <select name = "myyear"> <spue value = "2012"> 2012 </sope> <option value = "2013"> 2013 </sption> </option value = "2014" name = "myName"/> <br/> <br/> <input type = "button" value = "submit" onClick = "showparams () ؛"/> </form>مثال 10: تحقق من كل خانات الاختيار
<script type = "text/javaScript"> // تحقق من جميع الوظائف checkall (c) {// الحصول على جميع خانات الاختيار var arr = document.getElementSbyName ('myName') ؛ إذا كان (C) {// حدد كل خانات الاختيار لـ (var i = 0 ؛ i <arr.length ؛ i ++) {arr [i] .checked = true ؛ // select}} else {// خلاف ذلك ، لا تحدد كل // <Porm> اهتماماتك: <br> <input type = "checkbox" name = "myall" onClick = "checkAll (this.checked)" /> حدد الكل <br> <input type = "checkbox" name = "myName" /> حدد <إدخال type = "checkbox" = "myName" />مثال 11: قم بتعيين أنماط لافتة للنظر لعناصر التحكم في التركيز على النموذج
<script type = "text/javaScript"> function init () {var f = document.forms [0] ؛ // الحصول على نموذج DOM var elements = f.elements ؛ // احصل على جميع صفائف التحكم var str = '' ؛ // تقسيم السلاسل // loop traversal لـ (var i = 0 ؛ i <elements.length ؛ i ++) {var e = elements [i] ؛ // التحكم الحالي e.onfocus = function () {// تحديد رد الاتصال على النمط للتركيز // تعديل الحدود إلى Red this.style.border = '1px solid Red' ؛ } // استعادة نمط الحدود الأصلي}}}} </script>ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.