บทความนี้แสดงตัวอย่างของการควบคุมแบบฟอร์ม JS สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
ตัวอย่างที่ 1: วนซ้ำการควบคุมทั้งหมดของแบบฟอร์ม
<script type = "text/javaScript"> // transf ฟังก์ชันฟอร์ม getValues () {var f = document.forms [0]; // รับองค์ประกอบ DOM VAR = F.Elements; // รับอาร์เรย์ควบคุมทั้งหมด var str = ''; // การแยกสตริง // loop traversal สำหรับ (var i = 0; i <elements.length; i ++) {var e = องค์ประกอบ [i]; // การควบคุมปัจจุบัน str += e.value; // การแยกค่าควบคุม str += '/n'; // แยกแยก} Alert (STR); // แสดงผลลัพธ์ด้วยกล่องพรอมต์} </script> <form> กล่องข้อความ: <อินพุต type = "text" name = "mytext"/> <br/> กล่องวิทยุ: <อินพุต type = "Radio" name = "myradio" value = "1"/> 1 <อินพุต type = "Radio" name = "myRadio" value = "2"/> เลือก == </potion> <ตัวเลือกค่า = "1"> 1 </opovie> <ตัวเลือกค่า = "2"> 2 </optural> </select> <br/> <อินพุต type = "ปุ่ม" value = "getValues ()"/> </form>ตัวอย่างที่ 2: การเข้าถึงการควบคุมเฉพาะผ่านชื่อควบคุม
<script type = "text/javascript"> // การเข้าถึงการควบคุมเฉพาะผ่านฟังก์ชั่นชื่อควบคุม getFormdom () {var f = document.forms [0]; // รับแบบฟอร์ม dom var mytext = f.mytext; // รับการควบคุม DOM โดยชื่อ // แจ้งชื่อการควบคุมและการแจ้งเตือนค่า (mytext.name + ":" + mytext.value); } </script> <form> กล่องข้อความ: <อินพุต type = "text" name = "mytext"/> <br/> <input type = "button" value = "getControl" onClick = "getFormdom ()"/> </form>ตัวอย่างที่ 3: รับจำนวนกล่องข้อความในแบบฟอร์ม
<script type = "text/javascript"> // รับจำนวนกล่องข้อความในฟังก์ชันฟอร์มฟังก์ชัน getInputCount () {var f = document.forms [0]; // รับองค์ประกอบ DOM VAR = F.Elements; // รับอาร์เรย์ควบคุมทั้งหมด var count = 0; // stat จำนวนทั้งหมด // loop traversal สำหรับ (var i = 0; i <elements.length; i ++) {// การควบคุมปัจจุบัน var e = องค์ประกอบ [i]; // เป็นกล่องข้อความหรือไม่ถ้า (e.tagname == 'อินพุต' && e.type == 'ข้อความ') {count ++; // หมายเลขทั้งหมดจะถูกเพิ่มด้วยตัวเอง}} // ใช้กล่องพรอมต์เพื่อแสดงการแจ้งเตือนผลลัพธ์ ("กล่องข้อความมีทั้งหมด:" + count + "s"); } </script>ตัวอย่างที่ 4: วิธีการส่งสำหรับการแก้ไขแบบฟอร์ม
แอตทริบิวต์วิธีการระบุวิธี HTTP (รับหรือโพสต์) ที่ใช้เมื่อส่งแบบฟอร์ม เมื่อใช้ Get ข้อมูลฟอร์มจะปรากฏในแถบที่อยู่หน้าเว็บและโพสต์มีความปลอดภัยมากขึ้นเนื่องจากข้อมูลที่ส่งในแถบที่อยู่หน้าเว็บไม่สามารถมองเห็นได้
<script type = "text/javascript"> // แก้ไขฟังก์ชันวิธีการส่งแบบฟอร์ม modifymethod () {var f = document.forms [0]; // รับวิธีการแบบฟอร์ม dom var = f.mymethod.value; // วิธีที่เลือก f.method = วิธีการ; // แก้ไขวิธีการส่งที่เลือก // ใช้กล่องพรอมต์เพื่อแสดงการแจ้งเตือนผลลัพธ์ ("วิธีการส่งปัจจุบันของแบบฟอร์ม:" + วิธี); } </script> <form method = "post"> โปรดเลือกวิธีการส่ง: <select name = "myMethod"> <ค่าตัวเลือก = "> == โปรดเลือก == </ตัวเลือก> <ตัวเลือกค่า =" get "> รับ </ตัวเลือก> <ตัวเลือกค่า =" โพสต์ "> โพสต์ </ตัวเลือก </form>ตัวอย่างที่ 5: ระบุแอตทริบิวต์การกระทำของแบบฟอร์มแบบไดนามิกแบบไดนามิก
แอตทริบิวต์การกระทำกำหนดการกระทำที่ดำเนินการเมื่อส่งแบบฟอร์ม
เป็นเรื่องธรรมดาที่จะส่งแบบฟอร์มไปยังเซิร์ฟเวอร์เพื่อใช้ปุ่มส่ง
โดยทั่วไปแล้วแบบฟอร์มจะถูกส่งไปยังหน้าเว็บบนเว็บเซิร์ฟเวอร์
หากแอตทริบิวต์การกระทำถูกละเว้นการกระทำจะถูกตั้งค่าเป็นหน้าปัจจุบัน
<script type = "text/javascript"> // ระบุแอตทริบิวต์การกระทำของฟังก์ชันฟอร์ม modifyAction () {var f = document.forms [0]; // รับแบบฟอร์ม dom var newUrl = f.newurl.value; // วิธีที่เลือก f.action = newUrl; // แก้ไขที่อยู่การดำเนินการของแบบฟอร์มที่ส่ง // ใช้กล่องพรอมต์เพื่อแสดงการแจ้งเตือนผลลัพธ์ ("การกระทำปัจจุบันของแบบฟอร์ม:" + F.Action); } </script> <form method = "post"> โปรดเลือกวิธีการส่ง: <input type = "text" name = "newUrl"/> <br/> <input type = "button" value = "Modify Submit Action" OnClick = "ModifyAction ()"/> </ตัวอย่างที่ 6: การควบคุมโฟกัสแบบเลือกแบบไดนามิก
<script type = "text/javascript"> // กล่องวิทยุแรกคือฟังก์ชันโฟกัส focusit () {var f = document.forms [0]; // รับแบบฟอร์ม dom var myradio = f.myradio; // รับกล่องวิทยุ myradio [0] .focus (); // กล่องวิทยุแรกได้รับโฟกัส} </script> <form> กล่องข้อความ: <อินพุต type = "text" name = "mytext"/> <br/> กล่องวิทยุ: <อินพุต type = "Radio" name = "myradio" value = "1"/> <อินพุต type = "Radio" Name = "myRadio" value = "2"/> == </potion> <ค่าตัวเลือก = "1"> 1 </potion> <ตัวเลือกค่า = "2"> 2 </potion> </select> <br/> <อินพุต type = "ปุ่ม" value = "กล่องวิทยุแรกคือโฟกัส" onClick = "focusit ()"/>ตัวอย่างที่ 7: เริ่มต้นค่าของการควบคุมทั้งหมดในรูปแบบไปยังสถานะเริ่มต้น
<script type = "text/javascript"> // เริ่มต้นค่าของการควบคุมทั้งหมดในรูปแบบไปยังฟังก์ชันสถานะเริ่มต้น init () {var f = document.forms [0]; // รับแบบฟอร์ม dom f.reset (); // ใช้ฟังก์ชั่นรีเซ็ต ()} </script>ตัวอย่างที่ 8: แบทช์เพิ่มคำอธิบายลงในการควบคุมแบบฟอร์มทั้งหมด
<script type = "text/javascript"> // batch คำอธิบายสำหรับฟังก์ชันการควบคุมแบบฟอร์มทั้งหมดฟังก์ชัน batchcomment () {var f = document.forms [0]; // รับแบบฟอร์ม dom var children = f.childnodes; // รับองค์ประกอบลูกทั้งหมดของฟอร์ม var newarr = []; // กำหนดอาร์เรย์องค์ประกอบใหม่ var j = 0; // กำหนดตัวห้อยสำหรับอาร์เรย์องค์ประกอบใหม่ // ลูปผ่านองค์ประกอบลูกสำหรับ (var i = 0; i <children.length; i ++) {var e = เด็ก [i]; // องค์ประกอบลูกปัจจุบัน newarr [j ++] = e; // เพิ่มในอาร์เรย์ใหม่ // พิจารณาว่าเป็นตัวควบคุมถ้า (e.tagname == 'อินพุต' || e.tagname == 'เลือก') {// เพิ่มโหนดด้วยข้อความคำอธิบายข้อความ var text = document.createTextNode ("รายการนี้จำเป็น"); newarr [j ++] = ข้อความ; // เพิ่มโหนดสำหรับอาร์เรย์ใหม่}} // ล้างเนื้อหาฟอร์มที่มีอยู่ f.innerhtml = ''; // ชุดคำอธิบายสำหรับ (var i = 0; i <newarr.length; i ++) {// เพิ่มองค์ประกอบเก่าและโหนดคำอธิบายลงในฟอร์ม f.appendchild (newarr [i]); }}} </script>ตัวอย่างที่ 9: ใช้ตัวควบคุมที่ซ่อนอยู่เพื่อเพิ่มพารามิเตอร์ลงในแบบฟอร์ม
<script type = "text/javascript"> // ฟังก์ชั่นฟังก์ชั่น showparams () {// ตั้งค่าของตัวแปรที่ซ่อนอยู่ ค่านี้ยังสามารถระบุได้ผ่านค่าของเอกสารค่าของแท็กฟอร์แมต [0] .MyHidden.Value = 'ฉันซ่อนอยู่'; // กำหนดตัวแปรการประกบตัวแปร var str = 'พารามิเตอร์ที่ส่งโดยแบบฟอร์มรวมถึง:'; // พารามิเตอร์แยกปี str + = '/n ปี:' + document.forms [0] .myyear.value; // พารามิเตอร์ชื่อแยก str + = '/n ชื่อ:' + document.forms [0] .myname.value; // แยกพารามิเตอร์ที่ซ่อนอยู่ str + = '/nhide ตัวแปร:' + document.forms [0] .myhidden.value; การแจ้งเตือน (STR); // แสดงค่าของอักขระ} </script> <form> <input type = "hidden" name = "myHidden"/>>> <เลือกชื่อ = "myyear"> <ตัวเลือกค่า = "2012"> 2012 </opotion> <ตัวเลือกค่า = "2013"> 2013 name = "myName"/> <br/> <br/> <อินพุต type = "ปุ่ม" value = "ส่ง" onclick = "showparams ();"/> </form>ตัวอย่างที่ 10: ทำเครื่องหมายในช่องทำเครื่องหมายทั้งหมด
<script type = "text/javascript"> // ตรวจสอบฟังก์ชั่นฟังก์ชั่นทั้งหมด checkall (c) {// รับกล่องกาเครื่องหมายทั้งหมด var arr = document.getElementByName ('myName'); if (c) {// เลือกกล่องกาเครื่องหมายทั้งหมดสำหรับ (var i = 0; i <arr.length; i ++) {arr [i]. ตรวจสอบ = true; // select}} else {// อย่างอื่นอย่าเลือกทั้งหมด//ถ่ายโอนกล่องกาเครื่องหมายทั้งหมด (var i = 0; i <arr.length; i ++) ความสนใจของคุณ: <br> <อินพุต type = "ช่องทำเครื่องหมาย" name = "myall" onclick = "checkall (this.checked)" /> เลือกทั้งหมด <br> <input type = "copbox" name = "myname" /> เลือกทั้งหมด <อินพุตประเภท = "copbox" ชื่อ = "myName" />> เลือกทั้งหมด <อินพุตตัวอย่างที่ 11: ตั้งรูปแบบที่สะดุดตาสำหรับการควบคุมโฟกัสของแบบฟอร์ม
<script type = "text/javascript"> function init () {var f = document.forms [0]; // รับองค์ประกอบ DOM VAR = F.Elements; // รับอาร์เรย์ควบคุมทั้งหมด var str = ''; // แยกสตริง // loop traversal สำหรับ (var i = 0; i <elements.length; i ++) {var e = องค์ประกอบ [i]; // การควบคุมปัจจุบัน E.OnFocus = function () {// กำหนดรูปแบบการเรียกกลับสำหรับโฟกัส // แก้ไขเส้นขอบเป็นสีแดง this.style.border = '1px red red'; } e.onblur = function () {// เรียกโฟกัส this.style.border = ''; // คืนค่าสไตล์เส้นขอบเดิม}}}} </script>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น