ส่งค่าตัวแปรในเช็กบ็อกซ์โดย jQuery

phunsanit

12 ปี ago

เขียนระบบ update ข้อมูลโดยใช้ ajax แต่ปัญหาคือ ใน form นี้มันมี input อยู่หลายตัว และเพราะว่าต้องการแค่ input ที่ชื่อ items[] ตัวเดียวเท่านั้น ถ้าส่ง data ไปโดยใช้ jQuery โดยปกติจะส่งค่าไปโดยใช้ .serialize () หรือ .serializeArray () ก็จะส่งตัวแปรอื่น ๆ ที่ไม่จำเป็นติดไปด้วย จนทำให้ url ยาวจนเกิน limit ทำให้ต้องหาวิธีส่งไปเฉพาะตัวที่ใช้จริง ๆ เท่านั้น

ตัวอย่างการส่งค่าไปในแบบ array
checkbox_to_array.html

<!doctype html>
<html>
 
<head>
 <meta charset="utf-8">
 <title>checkbox to array</title>
</head>
 
<body>
 <ul>
 <li>
 <input name="items[]" type="checkbox" value="c1">
 </li>
 <li>
 <input name="items[]" type="checkbox" value="c2">
 </li>
 <li>
 <input name="items[]" type="checkbox" value="c3">
 </li>
 <li>
 <input name="items[]" type="checkbox" value="c4">
 </li>
 <li>
 <input name="items[]" type="checkbox" value="c5">
 </li>
 <li>
 <input name="items[]" type="checkbox" value="c6">
 </li>
 <li>
 <input name="items[]" type="checkbox" value="c7">
 </li>
 <li>
 <input name="items[]" type="checkbox" value="c8">
 </li>
 <li>
 <input name="items[]" type="checkbox" value="c9">
 </li>
 <li>
 <input name="items[]" type="checkbox" value="c10">
 </li>
 </ul>
 <div id="result"></div>
 <button id="sendBtn" type="submit">Send</button>
 <script src="jquery-3.1.1.min.js"></script>
 <script>
 $ (function () {
 
 $ ('#sendBtn') .click (function () {
 var checkboxs = $ ('input[name="items\\[\\]"]:checked') ;
 
 alert ('checked ' + checkboxs.length + ' items') ;
 
 var values = checkboxs.map (function () {
 return $ (this) .val () ;
 }) .get () ;
 
 var params = {
 "id": 24,
 "items": values,
 };
 $.ajax ({
 "data": params,
 "success": function (data) {
 $ ('#result') .html (data) ;
 },
 "type": "GET",
 "url": "processing.php",
 }) ;
 
 }) ;
 
 }) ;
 </script>
</body>
 
</html>

ตัวอย่างการส่งค่าไปในแบบ string
checkbox_to_string.html

<!doctype html>
<html>
 
<head>
 <meta charset="utf-8">
 <title>checkbox to string</title>
</head>
 
<body>
 <ul>
 <li>
 <input name="items[]" type="checkbox" value="c1">
 </li>
 <li>
 <input name="items[]" type="checkbox" value="c2">
 </li>
 <li>
 <input name="items[]" type="checkbox" value="c3">
 </li>
 <li>
 <input name="items[]" type="checkbox" value="c4">
 </li>
 <li>
 <input name="items[]" type="checkbox" value="c5">
 </li>
 <li>
 <input name="items[]" type="checkbox" value="c6">
 </li>
 <li>
 <input name="items[]" type="checkbox" value="c7">
 </li>
 <li>
 <input name="items[]" type="checkbox" value="c8">
 </li>
 <li>
 <input name="items[]" type="checkbox" value="c9">
 </li>
 <li>
 <input name="items[]" type="checkbox" value="c10">
 </li>
 </ul>
 <div id="result"></div>
 <button id="sendBtn" type="submit">Send</button>
 <script src="jquery-3.1.1.min.js"></script>
 <script>
 $ (function () {
 
 $ ('#sendBtn') .click (function () {
 var checkboxs = $ ('input[name="items\\[\\]"]:checked') ;
 
 alert ('checked ' + checkboxs.length + ' items') ;
 
 var values = checkboxs.map (function () {
 return $ (this) .val () ;
 }) .get () .join () ;
 
 alert ('values = ' + values) ;
 
 var encoded = encodeURIComponent (values) ;
 
 alert ('URL encoded = ' + encoded) ;
 
 var decoded = decodeURIComponent (encoded) ;
 
 alert ('URL decoded = ' + decoded) ;
 
 $.ajax ({
 "data": 'id=24&items=' + encoded,
 "success": function (data) {
 $ ('#result') .html (data) ;
 },
 "type": "GET",
 "url": "processing.php",
 }) ;
 
 }) ;
 
 }) ;
 </script>
</body>
 
</html>

ตัวอย่างการนำค่าไปเขียนเป็น sql query
processing.php

<dl>
 <dt>method="GET"</dt>
 <dd><?=print_r ($_GET, true) ;?></dd>
 <dt>method="POST"</dt>
 <dd><?=print_r ($_POST, true) ;?></dd>
</dl>
<?php
if (is_array ($_REQUEST['items'])) {
 echo '<br>send items by array';
 $where = "WHERE id IN ('" . implode ("', '", $_REQUEST['items']) . "') ";
} else {
 echo '<br>send items by string';
 $where = "WHERE id IN ('" . str_replace (',', "', '", $_REQUEST['items']) . "') ";
}
 
$query = "SELECT *
FROM table_name
$where;";
 
echo '<br>example query = ' . $query;

เลือกใช้การส่งแบบสตริงหรืออาร์เรย์ ก็แล้วแต่ความสะดวก ที่ต้องนำไป loop อีกหรือแค่ใช้ในการสร้างเอสคิวเอลคิวรีอย่างเดียว