วิธีการเพิ่ม - ลบ ช่องกรอกข้อมูล โดยใช้ jquery เพื่อปรับเพิ่มลดช่องกรอกข้อมูลได้ตามต้องการ

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Ittichai_chupol
PHP VIP Members
PHP VIP Members
โพสต์: 5410
ลงทะเบียนเมื่อ: 19/09/2018 10:33 am

วิธีการเพิ่ม - ลบ ช่องกรอกข้อมูล โดยใช้ jquery เพื่อปรับเพิ่มลดช่องกรอกข้อมูลได้ตามต้องการ

โพสต์ที่ยังไม่ได้อ่าน โดย Ittichai_chupol »

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

โดยภาษาคอมพิวเตอร์ที่จะใช้งานในการพัฒนาเว็บไซต์ นั้นมีอยูู่มากมาย แต่ที่นิยมกันมาเลยก็จะมีอยู่นั้นก็คือ อย่างเช่น ถ้าหากต้องการจะทำให้มีการแสดงผลให้ผู้ใช้งานได้เห็นจะใช ภาษา html หรือถ้าหากต้องการจะปรับรูปแบบเพิ่มทสีสัน หรือตกแต่งสิ่งต่างๆบนหน้าเว็บไซต์มีความสวยงาม ดูดี ร่วมทั้งสามารถทีจะนำไปเเสดงยั่งอุปกรณ์ต่างๆ ที่มีจอแสดงต่างขนาดก็จะใช ภาษา css ช่วย และหากเป็นการจัดการข้อมูลนั้นหรือระบบการงานเบื่องหลังนันก็จะมีภาษาคอมพิวให้เลือกมากมาย ทั้ง php python และอีกหลายๆ และถ้าหากต้องการที่จะสร้างลูกเล่น เพื่อเพิ่มความสนใจและอำนวยความความสะดวกกับผู้ใช้งานนั้น นั้นก็จะใช้ javascript jquery มาใช้ในการพัฒนา

-- โดยทั้งนี้ jquery ถือว่าเป็นภาษา คอมพิวเตอร์ที่นิยมนำมาใช้สำหรับเพิ่มความน่าใช้งานให้กับเว็บไซต์ เพราะสามารถที่จะเพิ่มความสะดวกให้กับผู้ใช้งาน แล้วยังที่จะช่วยอำนวยความสะดวกต่อผู้พัฒนาเว็บไซต์ในส่วนที่อาจจะมีการกรอกข้อมูลที่ไม่ชัดเจน เช่นการกรอกจำนวนพี่น้อง หรือรางวัลที่ได้ โดยจะมีวิธีการเขียนโคดดังนี้

1.ฟังชั่น jquery ที่จะใช้สำหรับการเพิ่มช่องกรอก ก็คือ after()
2.ฟังชั่น jquery จะใช้สำหรับการลบช่องกรอก ก็คือ remove()
3.ตัวอย่างโคดที่ใช้งาน

3.1 ตัวอย่าง html

โค้ด: เลือกทั้งหมด


<body>
<div>
  <form action="/action_page.php">
    <label for="fname">ชื่อ - นามสกุล พี่</label>
    <input type="text" id="fname" class="fname" name="firstname" placeholder="Your name..">

    <input type="submit" value="Submit">
  </form>
</div>
<center>
<button id="btn1" class="input_del">ลบ</button>
<button id="btn2" class="input_add">เพิ่ม</button>
</center>
</body>
</html>



3.2 ตัวอย่าง css

โค้ด: เลือกทั้งหมด

<style>
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.input_add {
  width: 100px;
  background-color: blue;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.input_del {
  width: 100px;
  background-color: red;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>


3.1 ตัวอย่าง jquery

โค้ด: เลือกทั้งหมด

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  // เรียกใช้งาน library ของ js 
<script>
$(document).ready(function(){
  $("#btn1").click(function(){ //ตรวจสอบการคลิกปุ่ม
  var len = $(".fname").length 
  if(len !=1 ){
    $(".fname:last").remove();  //ลบคลาส fname อันสุดท้าย
    }
  });
  

  $("#btn2").click(function(){
    $(".fname:last").after('<input type="text" id="fname" class="fname" name="firstname" placeholder="Your name..">'); //เพิมช่องกรอก หลังจาก คลาส fname อันสุดท้าย
  });
});
</script>

ผลลัพธ์
ezgif.com-video-to-gif (10).gif
ezgif.com-video-to-gif (10).gif (48.98 KiB) Viewed 2452 times
บทความที่เกี่ยวข้อง

การใช้ .attr() jquery เพื่อดึงค่าจาก attribute ของ element หรือกำหนดค่าให้กับ attribute
วิธีการการใช้งาน jquery เพื่อปรับเปลี่ยนค่า css ให้กับปุ่มเมื่อมีการคลิก
วิธีการสร้าง form เมื่อกดปุ่ม โดยใช้ javascript
วิธีการทำเมนู dropdows แบบไม่มีพื้นหลัง
ขอให้วันนี้เป็นวันที่ดี
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 77