ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์Programmingอยากให้กดปุ่มแล้วแสดงผลก่อนจะ submit ทำยังไงครับ
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: อยากให้กดปุ่มแล้วแสดงผลก่อนจะ submit ทำยังไงครับ  (อ่าน 419 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
Kizmo
ก๊วนเสียว
*

พลังน้ำใจ: 3
ออฟไลน์ ออฟไลน์

กระทู้: 200



ดูรายละเอียด เว็บไซต์
« เมื่อ: 05 เมษายน 2017, 10:59:24 »

คลิกปุ่มรายการแล้วให้แสดงผลที่ card ก่อนแล้วค่อย submit รายการที่สั่งทั้งหมด พอทำแบบไหนได้บ้างครับ

บันทึกการเข้า

รับถ่ายภาพ http://emofoto.net
Permlogin
ก๊วนเสียว
*

พลังน้ำใจ: 33
ออฟไลน์ ออฟไลน์

กระทู้: 476



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 05 เมษายน 2017, 11:05:32 »

ติดตามด้วยคน  wanwan016
บันทึกการเข้า

choking
Newbie
*

พลังน้ำใจ: 4
ออฟไลน์ ออฟไลน์

กระทู้: 28



ดูรายละเอียด
« ตอบ #2 เมื่อ: 05 เมษายน 2017, 12:51:28 »

ปุ่มสีฟ้า = ปุ่มรายการ
card = checkbox ในกรอบ

ที่ต้องการคือ
ให้กดปุ่มสีฟ้า แล้วแสดงผลที่กรอบ
เมื่อเสร็จแล้วกดปุ่ม submit

ผมเข้าใจถูกต้องหรือเปล่าครับ?


โค๊ด:
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(function(){
$(".list").click(function(){
var val=$(this).val(); //ค่าของปุ่มรายการ
var listVal=$("#list").val(); //ค่าที่เก็บไว้
if(listVal.indexOf(val)==-1){ //เช็คค่าซ้ำ
html='<input type="checkbox" value="' val '"> ' $(this).text(); //สร้าง html tag
$("#card").append(html); //เพิ่ม html tag ลงใน card
$("#list").val(listVal ',' val); //เก็บค่าของรายการที่เพิ่มลงแล้ว
}

});
});
</script>
</head>
<body>
<form>
<button class="list" type="button" value="1">ข้าวผัดหมู</button>
<button class="list" type="button" value="2">ข้าวผัดไก่</button>
<button class="list" type="button" value="3">ข้าวผัดทะเล</button>
<button class="list" type="button" value="4">ข้าวผัดหมูกรอบ</button>

<div id="card"></div>

<input type="hidden" name="list" id="list"> <!-- ใช้สำหรับเก็บค่าของรายการที่เพิ่มลงแล้ว -->
<button type="submit" >submit</button>
</form>
</body>
</html>
บันทึกการเข้า
หน้า: [1]   ขึ้นบน
พิมพ์