เรื่องเก็บข้อมูลด้วย checkbox โดยที่ไม่ต้องกดปุ่ม submit ครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา เรื่องเก็บข้อมูลด้วย checkbox โดยที่ไม่ต้องกดปุ่ม submit ครับ

เรื่องเก็บข้อมูลด้วย checkbox โดยที่ไม่ต้องกดปุ่ม submit ครับ

สอบถามหน่อยครับ
พอจะมีแนวทางของโค๊ด ajax ไหมครับ
ผมดูแล้วยังมึนๆนิดหน้อยครับผม
ผมจะติ๊กถูกที่ checkbox แล้วเก็บค่าของ textbox ลงฐานข้อมูลครับ
เหมือนกับการเก็บข้อมูลแบบกดปุ่ม submit ครับ

แบบนี้ครับพอกด checkbox แล้ว
ให้ข้อมูลที่อยู่ในช่อง textbox ตามในรูปเก็บลงฐานข้อมูลครับ
แนะนำด้วยนะครับ
ขอบคุณครับ

Maxtri 15-10-2016 14:54:24

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ลองดูโค้ดนี้เป็นแวทาง

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<div  style="margin:auto;width:700px;">
 <form id="form02" name="form02" method="post" action="" >

    <input name="h_type[k1]" type="checkbox" value="1" />
    Data 1 |  More:<input  type="text" name="more[k1]" > <br />
    <input name="h_type[k2]" type="checkbox"  value="2" />
    Data 2 |  More: <input  type="text" name="more[k2]" >  <br />
    <input name="h_type[k3]" type="checkbox"  value="3" />
    Data 3 |  More: <input  type="text" name="more[k3]" >  <br />    
 
    
</form>   
</div>
<div id="place_show_log"  style="margin:auto;width:700px;">

</div>
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    
<script type="text/javascript">
$(function(){
	
	// ถ้า checkbox ที่มีชื่อขึ้นต้นด้วย h_type ถูกคลิก
	$(":checkbox[name^='h_type']").on("click",function(){
		
			// จัดรูปแบบข้อมูลในที่มี id เท่ากับ form2 ไว้ใน dataSend สำหรับส่งข้อมูลผ่าน ajax
			var dataSend = $("#form02").serialize();
			
			// ส่งข้อมูลทั้งหมดใน form ส่งไปที่ไฟล์ show_data_submit.php แล้วคืนค่าตัวแปร data กลับมา
			$.post("show_data_submit.php",dataSend,function(data){
					// ทดสอบแสดงค่าที่คืนกลับมาใน div ไอดี place_show_log
					$("#place_show_log").html(data);
			});
		
	});

});   
</script>
</body>
</html>

กรณีต้องการส่งค่าเพิ่มเติมเข้าไป ก่อน submit form ผ่าน ajax
สามารถใช้แบบนี้แทนได้

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    
<script type="text/javascript">
$(function(){
	
	// ถ้า checkbox ที่มีชื่อขึ้นต้นด้วย h_type ถูกคลิก
	$(":checkbox[name^='h_type']").on("click",function(){
			// สร้างตัวแปรเก็บค่าว่า checkbox นั้นถูกติ้กเลือกหรือ ต้ิกออก ถ้าต้้กออกค่าเป็น false
			var iCheck = $(this).prop("checked");
			
			// สร้างตัวแปรเก็บค่าของ checkbox  สำหรับนำไปใช้งาน
			var valCheck = $(this).val();
			
			// จัดรูปแบบข้อมูลในที่มี id เท่ากับ form2 ไว้ใน dataSend สำหรับส่งข้อมูลผ่าน ajax
			// ใช้ serializeArray แทน serialize เมื่อต้องการเพิ่มตัวแปรกำหนดเองเข้าไป
			var dataSend = $("#form02").serializeArray();
			
			// มีการเพิ่มตัวแปรกำหนดเองเข้าไปใน form ก่อนส่งข้อมูล
			dataSend.push({
				name:'valCheck',
				value:valCheck
			});
			
			// ส่งข้อมูลทั้งหมดใน form ส่งไปที่ไฟล์ show_data_submit.php แล้วคืนค่าตัวแปร data กลับมา
			$.post("show_data_submit.php",dataSend,function(data){
					// ทดสอบแสดงค่าที่คืนกลับมาใน div ไอดี place_show_log
					$("#place_show_log").html(data);
			});
		
	});

});   
</script>

>>> อัพเดท >>> 15-10-2016
------------------------------------------

ตัวอย่างไฟล์ show_data_submit.php

<?php 
//session_start();  // ถ้ามีใช้งาน session
header("Content-type:text/html; charset=UTF-8");                
header("Cache-Control: no-store, no-cache, must-revalidate");               
header("Cache-Control: post-check=0, pre-check=0", false);     
// require("dbconnect.php");  // ถ้ามีเชื่อมต่อ db

//เช็คถ้ามีการส่งค่าแบบ POST มา
if(count($_POST)>0){
	
	// โค้ดแสดงโครงสร้างตัวแปรที่ส่งค่ามรแบบ POST
	echo "<pre>";
	print_r($_POST);  
	echo "</pre>";
	  
	// การใช้ตัวแปรของ checkbox แบบ array มาใช้งาน
	$data_h_type=(isset($_POST['h_type']))?$_POST['h_type']:NULL;  
	$data_more=(isset($_POST['more']))?$_POST['more']:NULL;  
	if(count($data_h_type)>0){  // ตรวจสอบ checkbox ว่ามีการเลือกมาอย่างน้อย 1 รายการหรือไม่  
		foreach($data_h_type as $key=>$value){  
			// แสดงชุดข้อมูล ที่สอดคล้องกันของ checkbox   กับ textbox
			// สามารถประยุกต็เอาค่าไปวนลูปบันทึกข้อมูลได้
			echo $key." --- ".$data_more[$key]."<br>";  
		}     
	}  
  // ค่าที่ถูก echo ในไฟล์นี้จะถูกส่งกลับไปใช้งานหรือแสดง ถ้าเรียกใช้ผ่าน ajax
}
?>

ninenik 15-10-2016

ความคิดเห็นที่ 2

ขอบคุณครับ พี่นิก ได้แล้วครับ
เขียนประยุกต์ปรับแต่งนิดหน่อยครับผม

maxtri 17-10-2016 09:28

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน