PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

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



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

โดย:  Maxtri IP: 1.2.171.xxx วันที่: 15-10-2016 เวลา: 14:54:24

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 2
ขอบคุณครับ พี่นิก ได้แล้วครับ
เขียนประยุกต์ปรับแต่งนิดหน่อยครับผม


โดย:  Maxtri IP: 182.52.162.xxx วันที่: 17-10-2016 เวลา: 09:28:13
 ความคิดเห็นที่ 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 IP: 1.47.203.xxx วันที่: 15-10-2016