ในบทความก่อนหน้านี้ฉันแนะนำความรู้ที่เกี่ยวข้องเกี่ยวกับตัวอย่างคำอธิบายของแบบฟอร์มการดำเนินงาน JS (ตอนที่ 2) บทความนี้จะแนะนำคุณเกี่ยวกับตัวอย่างคำอธิบายของแบบฟอร์มการดำเนินการ JavaScript (ตอนที่ 2) รายละเอียดเฉพาะมีดังนี้:
1. ฟิลด์ข้อความ
<input type = "text" />
-
ใช้งานค่าของฟิลด์ข้อความ
ชุดคุณสมบัติมูลค่าหรือรับค่า
-
2. ปุ่มวิทยุและหลายตัวเลือก
<input type = "Radio" /> <input type = "ช่องทำเครื่องหมาย" />>
-
ตรวจสอบผลตอบแทนหรือตั้งค่าสถานะที่เลือกของตัวเลือกเดียว
ไม่ได้เลือกเท็จที่แท้จริงไม่ได้เลือก
แอตทริบิวต์ค่าได้รับค่าที่เลือกและต้องกำหนดสถานะที่เลือกก่อน
-
ตัวอย่าง: เลือกทั้งหมด/ไม่เลือกทั้งหมด/reverse
1.png
1. โครงสร้างความดี
<body> <form name = "myform" action = "#" method = "post" id = "form1"> <script type = "text /javascript"> สำหรับ (var i = 0; i <20; i ++) {document.write ("อินพุตประเภท = ทั้งหมด "); document.write (" <อินพุต type = 'Radio' name = 'Radios'> เลือกทั้งหมด "); document.write (" <อินพุต type = 'Radio' name = 'Radios'> เลือกทั้งหมด "); document.write (" input type = 'Radio' name = 'Radios'> เลือกทั้งหมด "); document.write (" name = 'radios'> anti-select "); </script> </form> </body>2. สคริปต์สคริปต์
2.1 การใช้วิธีการเรียกใช้ฟังก์ชัน
<script type = "text/javascript"> window.onload = function () {var nums = document.getElementsByName ("nums"); var radios = document.getElementsByName ("radios"); fun (nums, i, radios); ฟังก์ชั่น fun (a, b, c) {c [b] i = 0; i <a.length; i ++) {a [i] .Checked = true;}} อื่นถ้า (b == 1) {สำหรับ (var i = 0; i <a.length; i ++) {a [i] i = 0; i <a.length; i ++) {ถ้า (a [i]. ตรวจสอบ) {a [i] .Checked = false;} lele {a [i] .Checked = true;}}}}} </Script>2.2 การใช้วิธีการสร้างฟังก์ชั่นที่ไม่ระบุชื่อในการปิด
<script type = "text/javascript"> window.onload = function () {var nums = document.getElementSbyName ("nums"); var radios = document.getElementsByName ("radios"); สำหรับ (var i = 0; i <radios.length; i ++) i = 0; i <nums.length; i ++) {nums [i]. ตรวจสอบ = true;}} อื่นถ้า (a == 1) {สำหรับ (var i = 0; i <nums.length; i ++) {nums [i] i = 0; i <nums.length; i ++) {ถ้า (nums [i]. ตรวจสอบ) {nums [i] .Checked = false;} อื่น {nums [i]. checked = true;}}}}}) (i);}} </script>3. ดึงกล่องลง
<form name = "myform"> <select name = "sels"> <pontion> มหาวิทยาลัย Peking </petion> <petion> Chang'an University </petion> <pontion> มหาวิทยาลัยหนานจิง </petion> </select> </form>
-
ชุดที่เลือกหรือกลับไปที่สถานะที่เลือกของกล่องดรอปดาวน์
ไม่ได้เลือกเท็จที่แท้จริงไม่ได้เลือก
SelectedIndex Set หรือส่งคืนหมายเลขดัชนีที่เลือกในกล่องดรอปดาวน์
-
ตัวอย่างที่ 1: เลือกมหาวิทยาลัย Chang'an
<script> var sels = document.myform.sels; // var sels = document.myform.sels.options; // (เป็นไปได้เช่นกัน) sels [1]. selected = true; </script>
หรือ
<script> var sels = document.myform.sels; // var sels = document.myform.sels.options; // (เป็นไปได้เช่นกัน) sels.selectedIndex = 1; </script>
ตัวอย่าง 2: ราคาต่อหน่วย * ปริมาณ = ราคารวม
1.png
1. โครงสร้างความดี
<body> <form name = "myform" action = "#" method = "post" id = "form1"> ราคาหน่วย: <อินพุต type = "text" name = "price" value = "200"> <select name = "count"> quantity <petion> 1 </optup>
2. สคริปต์สคริปต์
<script type = "text/javascript"> window.onload = function () {var price = document.myform.price; var count = document.myform.count; var total = document.myform.total; count.onchange = ฟังก์ชั่น () {total.value = parseInt (ราคา) }} </script>4. พื้นที่ข้อความ
<textarea name = "info" rows = "7" cols = "60"> </textarea>
-
ค่าส่งคืนหรือตั้งค่าของพื้นที่ข้อความ
-
ตัวอย่าง: ตรวจจับความยาวของอักขระที่ป้อนในพื้นที่ข้อความแบบไดนามิกแบบไดนามิก
1.png
1. โครงสร้างความดี:
<body> <div id = "เนื้อหา"> สามารถป้อนอักขระทั้งหมดได้ทั้งหมด 20 ตัวได้รับการป้อน 0 และสามารถป้อนได้ 20 ตัว </div> <ชื่อฟอร์ม = "myform" การกระทำ = "#" วิธี = "โพสต์" id = "form1"> <textarea name = "info" cols = "60"
2. สคริปต์สคริปต์:
<script type = "text/javascript"> window.onload = function () {var content = document.getElementById ("เนื้อหา"); var info = document.myform.info; info.onkeyup = info.onkeydown = function () {var str = info.value; สามารถป้อนอักขระ "+strs+" และสามารถป้อน "+length+" และสามารถป้อนและ "+(strs-ength)+" s "; i = 0; i <str.length; i ++) {ถ้า (str.charcodeat (i)> = 0 && str.charcodeat (i) <= 255) {// ภาษาอังกฤษ num ++;} {// num num+= 2;}} return num;5. การตรวจสอบแบบฟอร์ม
เหตุการณ์ onsubmit ถูกไล่ออกเมื่อส่งแบบฟอร์ม
-
<form name = "myform" action = "www.baidu.com" method = "post" onsubmit = "ส่งคืนเช็ค (นี่)"> </form> ส่งคืนเท็จ; // บล็อกพฤติกรรมเริ่มต้นของฟอร์ม
-
6. วิธีการส่ง
วิธีนี้ใช้เพื่อใช้การส่งอัตโนมัติ
เหตุการณ์ onsubmit สามารถใช้ในการส่งด้วยตนเองเท่านั้น
ข้างต้นเป็นตัวอย่างคำอธิบายของแบบฟอร์มการดำเนินการ JavaScript ที่แนะนำโดยตัวแก้ไข (ตอนที่ 2) ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!