ตัวอย่างฟอร์มชำระเงิน ถ้าเลือกรูปแบบการชำระเงินเป็นโอนเงิน จะแสดงลิสธนาคารให้เลือก
รูปแบบการทำงานจะใช้ javascript เข้ามาช่วยในการเช็ค event ในตัวอย่างจะใช้ onchange ใน select/option เพื่อตรวจสอบว่า ถ้ามีการเลือกรูปแบบการชำระเงินแบบ “เงินสด” จะแสดงแค่ 2 input คือ เลือกวิธีชำระเงินและจำนวนเงิน และถ้าเลือกวิธีชำระเงินแบบ “โอนเงิน” จะแสดง 3 input ก็คือ วิธีชำระงิน เลือกธนาคารที่โอนเงิน และจำนวนเงิน ดังภาพตัวอย่างครับ
ภาพการทำงาน
การชำระเงินแบบเงินสด
การชำระเงินแบบโอนเงินจะแสดงรายการธนาคารให้เลือก
Full Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-12"> <br><br> <h4>ตัวอย่างฟอร์มชำระเงิน ถ้าเลือกรูปแบบการชำระเงินเป็นโอนเงิน จะแสดงลิสธนาคารให้เลือก</h4> html + javascript : Show input field only if a specific option is selected </div> <div class="col-sm-3"> <form method="get"> <div class="form-group row"> <label for="cashmethod">เลือกวิธีชำระเงิน</label> <select onchange="yesnoCheck(this);" class="form-control" name="cashmethod" required> <option value="">-วิธีชำระเงิน-</option> <option value="เงินสด">เงินสด</option> <option value="โอนเงิน">โอนเงิน</option> </select> </div> <div class="form-group row" id="ifcash" style="display: none;"> <label for="bank">เลือกธนาคารที่โอนเงิน</label> <select name="bank" class="form-control"> <option value="">เลือกธนาคารที่โอนเงิน</option> <option value="1">bank1</option> <option value="2">bank2</option> <option value="3">bank3</option> </select> </div> <div class="form-group row"> <label for="amount">จำนวนเงิน</label> <input type="number" name="amount" required min="0" class="form-control"> </div> <div class="form-group row"> <button type="submit" class="btn btn-primary">SAVE</button> </div> </form> </div> </div> </div> <script type="text/javascript"> function yesnoCheck(that) { if (that.value == "โอนเงิน") { document.getElementById("ifcash").style.display = "block"; } else { document.getElementById("ifcash").style.display = "none"; } } </script> </body> </html> Cr.https://stackoverflow.com/questions/29321494/show-input-field-only-if-a-specific-option-is-selected |
เอาไปประยุกต์ใช้ดูครับ