วิธีการสร้าง listbox ที่เมือมีการเลือกรหัสแล้วจะแสดงข้อมูลที่มีรหัสเดียวกับที่เลือก

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
Ittichai_chupol
PHP VIP Members
PHP VIP Members
Posts: 5410
Joined: 19/09/2018 10:33 am

วิธีการสร้าง listbox ที่เมือมีการเลือกรหัสแล้วจะแสดงข้อมูลที่มีรหัสเดียวกับที่เลือก

Post by Ittichai_chupol »

การอำนวยความสะดวกต่อผู้ใช้งาน ถือเป็นสิ่งที่สำคัญสำหรับเจ้าของเว็บไซต์ หรือระบบนั้นๆ เพื่อที่จะเป็นสิ่งที่ดึงดูดความสนใจให้กับที่เข้ามาใช้งานบริการเว็บไซต์นั้นๆได้อย่างดี โดยเฉพาะผู้ที่พึงเข้ามาใช้งานเป็นครั่งเเรกนั้นจะถือว่าเป็นความประทับใจแรกที่จะสามารถทำให้ผู้ช้งานคนนั้นกลับมาใช้งานบริการเว็ไซต์นี้ต่อๆในครั้งถัดไป ยิ่งเฉพาะกรณีที่มีการกรอกข้อมูลจำนวนมากๆเเล้ว นั้นถ้าหากผุ้ใช้งานต่อมากรอกข้อมูลในทุกช่อง โดยไม่มีความสามารถของเว็บไซต์ใดมาช่วยจะทำให้ผู้ใช้งานั้น รู้สึกเบื่อได้จนไม่อยากที่จะเข้าใช้งานอีกได้ และตัวย่างจากนี้นั้นก็เป็นวิธีการที่จะอำนวยความสะดวกต่อผู้ที่เข้มาใช้งานเว็บไซต์ได้ โดยเป็นการที่พัฒนาร่วมกันระหว่าง php html jQuery และ Ajex ที่จะมาทำานเพื่อใช้สำหับดึงข้อมูลราคาจากการเลือกรายการนั้นๆ ซึ่งจะมีขั้นตอดังนี้


1.สร้างหน้า html สำหรับการแสดงผลให้ผุ้ใช้งานได้เห็น

Code: Select all

   <form id="test" method="post" action="{T_ACTION}">
            <fieldset>
                <dl>
                    <dt><label for="timezone">{L_SELECT_PACK_MEM}</label></dt>
                    <dd>
                        {PACKAGE_NAME}
                    </dd>
                </dl>
                <!--<p id="demo"></p>-->
                <dl>
                    <dt><label for="timezone">{L_PRICE}</label></dt>
                    <dd>
                    <input type="text"  class="inputbox autowidth" name="package_price" id="txtHint"size="20" maxlength="255" value=""   
                                                disabled="disabled">
                    </dd>
                </dl>
            </fieldset>
        </form>     
2.สร้างหน้า JQuery สำหรับเป็ยส่วนเชื่อมต่อสำหรับ รับ ส่งข้อมูล

Code: Select all

jQuery(function ($) {

//    alert("hello");
    $(document).on('change', '.select', function () {
        console.log(this.value);

        str = this.value;
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").value = this.responseText;
            }
        };
        xhttp.open("GET", "./ext/mindphp/m_member_packages/ucp/package_price.php?q=" + str, true);
        xhttp.send();

    });

});
3.สร้าง php รับค่ามาค้นหาข้อมูล ส่งส่งค่ากลับไปใน JQuery

Code: Select all

<?php

header('Content-Type: application/json');  // เพื่อจะส่งค่าผลลัพธ์ที่ได้ กลับมาเป็น รูปแบบไฟล์ json
// เป็นส่วนสำหรับเชื่อมฐานข้มมูล
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "php5"; //ชื่อฐานข้อมูล
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$name = $_REQUEST['q']; //รับค่า ชื่อ มาจาก Ajax

$sql = "SELECT * FROM phpbb_m_package_data  WHERE package_id = '" . $name . "'";  // SQL สำหรับค้นหา ชื่อ จากตาราง  tools_exchange_rate
$query = mysqli_query($conn, $sql);
//echo $sql;
$result = mysqli_fetch_row($query);

print_r($result['3']);
$conn->close();
?>
ตัวอย่างผลลัพธ์
ezgif.com-video-to-gif (10).gif
ezgif.com-video-to-gif (10).gif (79.7 KiB) Viewed 1596 times

บทความที่เกี่ยวข้อง
การใส่ค่าในช่อง input ด้วย javascript เพื่อจะได้มีค่าอยู่ใน textbox
ทำเอฟเฟค ตอนกดปุ่ม
คำสั่งจัดการฐานข้อมูล MySQL
ขอให้วันนี้เป็นวันที่ดี

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 2 guests