ปัจจุบัน แบบฟอร์มเป็นหนึ่งในเครื่องมือที่สำคัญที่สุดสำหรับการโต้ตอบของผู้ใช้กับเว็บแอปพลิเคชัน แบบฟอร์มช่วยให้คุณสามารถจัดระเบียบได้ การจัดการที่มีประสิทธิภาพข้อมูลบนเว็บไซต์ สถานะของเว็บไซต์ ให้บริการแก่ลูกค้า ถ่ายโอนข้อมูลไปยังผู้ใช้รายอื่น ให้การเข้าถึงส่วนที่ปิด และอื่นๆ อีกมากมาย... ดังนั้นจึงมีความปรารถนาตามธรรมชาติอย่างยิ่งที่จะสร้างแบบฟอร์มให้มากขึ้น สะดวกและปรับให้เข้ากับความแตกต่างเฉพาะของงาน

หนึ่งในพื้นที่สำหรับการปรับปรุงดังกล่าวอาจเป็นการนำความสามารถในการโต้ตอบโดยไม่ต้องโหลดหน้าซ้ำ ควบคุมจำนวนฟิลด์สำหรับการป้อนข้อมูลทั้งที่เพิ่มขึ้นและลดลง วิธีนี้จะสะดวกมากหากคุณต้องการเพิ่มไม่ใช่หนึ่งรายการ แต่หลายระเบียนลงในฐานข้อมูลแอปพลิเคชันในคราวเดียว หรือหากไม่ทราบจำนวนข้อมูลที่คล้ายคลึงกันล่วงหน้า ซึ่งแต่ละข้อมูลต้องใช้ช่องป้อนข้อมูลแยกกัน (เช่น หมายเลขโทรศัพท์หลายหมายเลข หรือ บัตรเครดิตผู้ใช้) ในบทความนี้เราจะดูหนึ่งในนั้น การใช้งานที่เรียบง่ายโอกาสนี้ผ่านการใช้งาน ไลบรารีจาวาสคริปต์ jQuery.

ที่ด้านล่างสุด คุณสามารถดาวน์โหลดไฟล์เก็บถาวรพร้อมตัวอย่างที่กล่าวถึงในบทความนี้

การเพิ่มฟิลด์ใหม่ให้กับแบบฟอร์ม

เราจะสร้างฟิลด์แบบฟอร์มใหม่โดยใช้ .append() วิธีการ:

$("ตัวเลือก").ผนวก("string");

ซึ่งเพิ่ม "สตริง" ที่ด้านในขององค์ประกอบด้วย "ตัวเลือก" ที่ระบุ โดยมีสตริงที่เพิ่มตามเนื้อหาที่มีอยู่

ถ้าเราพิจารณา ตัวอย่างที่เป็นรูปธรรมจากนั้นอาจเป็นดังนี้:

ฟิลด์ #1 "/>เพิ่มฟิลด์ใหม่

ฟังก์ชัน addField() สามารถนำมาใช้ได้ดังนี้:

< script type= "text/javascript" >ฟังก์ชัน addField () ( var telnum = parseInt($("#add_field_area" ) .find ("div.add:last" ) .attr ("id" ) .slice (3 ) ) 1 ; $("div#add_field_area" ) .append ( "หมายเลขฟิลด์ "telnum "" ) ;

อันดับแรก ตามปกติ เราจะรวมไลบรารี jQuery แล้วจึงประกาศฟังก์ชัน addField() ขั้นแรกฟังก์ชันจะคำนวณตัวเลขที่ต้องแทรกลงในองค์ประกอบที่จะเพิ่ม - โดยใช้ตัวเลขนี้ เราจะลบฟิลด์ที่ไม่จำเป็นออกในภายหลัง จากนั้น addField() จะเพิ่มโค้ดของบล็อก div#add№ ให้กับ div#add_field_area โดยมีฟิลด์แบบฟอร์มอยู่ข้างใน ซึ่งเป็นโค้ดที่คล้ายกับโค้ด "ฟิลด์หมายเลข 1" ที่ระบุไว้ด้านบนโดยสิ้นเชิง ตอนนี้เมื่อเราคลิกที่ปุ่ม "เพิ่ม" เราจะเห็นว่าฟิลด์ใหม่ปรากฏขึ้นอย่างไรในทันที

การลบฟิลด์แบบฟอร์มเฉพาะ

หากต้องการลบองค์ประกอบต้นไม้ DOM คุณสามารถใช้ Remove() วิธีการ:

$("ตัวเลือก").remove();

ซึ่งใช้กับองค์ประกอบที่มี "ตัวเลือก" ที่ระบุ เราจะถือว่าตามค่าเริ่มต้นควรเหลือช่องหนึ่งไว้เสมอ ส่วนช่องเพิ่มเติมทั้งหมดสามารถลบได้ ในการดำเนินการนี้ ในฟังก์ชัน addField() ในบรรทัดพารามิเตอร์ของเมธอด .append() เราจะเพิ่มโค้ดสำหรับปุ่มลบฟิลด์ เมื่อคลิกแล้ว ฟังก์ชัน DeleteField (id) จะถูกเรียก และหมายเลข ของฟิลด์ที่ต้องการลบจะถูกส่งผ่านไปยังฟังก์ชัน

ฟังก์ชัน addField () ( var telnum = parseInt($("#add_field_area" ) .find ("div.add:last" ) .attr ("id" ) .slice (3 ) ) 1 ; $("div#add_field_area" ) .append ( "หมายเลขสนาม " telnum " " ) ;

ฟังก์ชัน DeleteField() นั้นง่ายมาก:

ฟังก์ชั่น DeleteField (id) ( $("div#add" id).remove () ; )

นั่นคือทั้งหมดที่ ตอนนี้เมื่อคุณคลิกที่ปุ่ม (กากบาทสีแดง) ตรงข้ามกับฟิลด์ที่เลือก มันจะหายไปพร้อมกับข้อมูลที่บันทึกไว้

การประมวลผลข้อมูลบนเซิร์ฟเวอร์ (php)

เมื่อแบบฟอร์มประกอบด้วยหลายฟิลด์ที่มีข้อมูลประเภทเดียวกัน คำถามเกี่ยวกับการประมวลผลข้อมูลจะเกิดขึ้นตามธรรมชาติ เช่น ก่อนที่จะส่งไปยังฐานข้อมูล ในตัวอย่างข้างต้น ปัญหานี้ได้รับการแก้ไขโดยการระบุแอตทริบิวต์ชื่อสำหรับฟิลด์แบบฟอร์มด้วยพารามิเตอร์ val ซึ่งหมายความว่าหลังจากส่งข้อมูลแบบฟอร์มนี้แล้ว วิธีการโพสต์ค่าของฟิลด์เหล่านี้จะถูกวางไว้ในอาร์เรย์ $_POST['val'] ซึ่งองค์ประกอบสามารถวนซ้ำได้ วง foreach(...) (...), ตัวอย่างเช่น:

foreach ($_POST [ "val" ] เป็น $value ) ( // รหัสของคุณ.... )

หรือหากจำเป็น ให้ "ติด" ข้อมูลทั้งหมดจากช่องประเภทเดียวกันเหล่านี้ลงในบรรทัดเดียวโดยใช้ฟังก์ชัน implode()

$str = ระเบิด ("|" , $_POST [ "val" ] ) ;

จากนั้นค่าฟิลด์ทั้งหมดที่มี name=”val” จะถูกรวมเข้ากับสตริงที่มีตัวคั่น “แถบแนวตั้ง”

แต่นี่คือการประมวลผลฝั่งเซิร์ฟเวอร์ซึ่งเป็นที่นิยมมากกว่าด้วยเหตุผลด้านความปลอดภัย แต่สถานการณ์อาจเกิดขึ้นซึ่งบังคับให้คุณประมวลผลฟิลด์ดังกล่าวในฝั่งไคลเอ็นต์: ตัวอย่างเช่น คุณไม่มีสิทธิ์เข้าถึงสคริปต์เซิร์ฟเวอร์ (คุณกำลังใช้ตัวจัดการแบบฟอร์มระยะไกลบางประเภท) หรือด้วยเหตุผลบางอย่างที่คุณไม่สามารถเปลี่ยนการดำเนินการของ ตัวจัดการแบบฟอร์มบนเซิร์ฟเวอร์ของคุณ ในกรณีนี้คุณสามารถใช้วิธีการได้เช่นกัน ภาษาจาวาสคริปต์และเนื่องจากเรากำลังทำงานกับไลบรารี jQuery อยู่แล้ว เราจึงจะทำงานต่อไป

การประมวลผลข้อมูลทางฝั่งไคลเอ็นต์

สมมติว่างานของเราคือการรวมข้อมูลทั้งหมดของหลายฟิลด์นี้ให้เป็นบรรทัดเดียวโดยคั่นด้วยแถบแนวตั้ง “|” อันที่จริงสิ่งนี้มีการใช้งานค่อนข้างง่าย

ขั้นแรก เราต้องแก้ไขแบบฟอร์มเล็กน้อย กล่าวคือ เพิ่มฟิลด์ที่ซ่อนอยู่หนึ่งฟิลด์: