เจเควียรี – หน้า 2 – PlusMagi's Blog By Pitt Phunsanit

เขียนระบบ 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 อีกหรือแค่ใช้ในการสร้างเอสคิวเอลคิวรีอย่างเดียว

Tag Archive เจเควียรี

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

Recent Posts