โดยภาษาคอมพิวเตอร์ที่จะใช้งานในการพัฒนาเว็บไซต์ นั้นมีอยูู่มากมาย แต่ที่นิยมกันมาเลยก็จะมีอยู่นั้นก็คือ อย่างเช่น ถ้าหากต้องการจะทำให้มีการแสดงผลให้ผู้ใช้งานได้เห็นจะใช ภาษา 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>
บทความที่เกี่ยวข้อง
การใช้ .attr() jquery เพื่อดึงค่าจาก attribute ของ element หรือกำหนดค่าให้กับ attribute
วิธีการการใช้งาน jquery เพื่อปรับเปลี่ยนค่า css ให้กับปุ่มเมื่อมีการคลิก
วิธีการสร้าง form เมื่อกดปุ่ม โดยใช้ javascript
วิธีการทำเมนู dropdows แบบไม่มีพื้นหลัง