Tag Archive form

Byphunsanit

jQuery: ส่ง form แบบ ajax

พื้นฐานการส่งข้อมูลจากแบบฟอร์มไปประมวลผลโดย jQuery Ajax ทำได้ง่ายๆ

องค์ประกอบ

  1. ส่วนประกอบแรกก็คือฟอร์มที่ใช้กรอกข้อมูล
    <form action="values.php" id="formA" method="post">
    ...
    <input name="socialid" type="text">
    ...
    <button type="submit" class="btn btn-success">ส่งข้อมูล</button>
    ...</form>

    ส่วนสำคัญคือ id (id=”formA”) ของฟอร์มที่จะใช้อ้างถึงใน JavaScript

  2. ส่วน JavaScript ที่จะรวบรวมข้อมูลส่งออกไปหาเซิร์ฟเวอร์
    $(function() {
       var formA = $('#formA');
    
       formA.submit(function(event) {
           event.preventDefault();
    
           $.ajax({
               "data": formA.serialize(),
               "method": "POST",
               "success": function(data, textStatus, jqXHR) {
                   $('#resultA').html(data);
               },
               "url": "values.php",
           });
       });
    });
    data
    ข้อมูลที่จะส่งออกไป ตัวอย่างนี้ข้อมูลในแบบฟอร์มจะถูกรวบรวมโดย function .serialize()

    method
    คือจะส่งข้อมูลไปหา server แบบ get หรือ post
    success
    code ในส่วนนี้จะทำงานเมื่อทำงานสำเร็จเท่านั้น
    url
    เป็น url ที่จะส่งข้อมุลไปหา
  3. ฝั่ง server ที่ทำหน้าที่ประมวลผล
    <?php
    echo 'GET<pre>', print_r($_GET, true), '</pre>';
    echo 'POST<pre>', print_r($_POST, true), '</pre>';
  4. ส่วนแสดงผล เพราะว่าการส่งแบบ ajax จะส่งไปเป็นแบบ background จึงควรมีการแสดงให้เห็นว่ามีการทำงานเกิดขึ้น ใน code ชุดนี้คือแสดงผลในพื้นที่
    <div class="col-sm-12" id="resultA"></div>

ตัวอย่าง code ที่เขียนเสร็จแล้ว

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>jQuery: Form Send</title>
    <link href="../vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>

<body>
    <h1>พร้อมเพย์ (PromptPay)</h1>
    <form action="values.php" class="form-horizontal" id="formA" method="post">
        <div class="form-group">
            <label class="col-sm-2 control-label">โอนเงินด้วย</label>
            <div class="col-sm-10">
                <div class="radio">
                    <label>
                        <input checked name="way" type="radio" value="socialid"> หมายเลขบัตรประชาชน
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input name="way" type="radio" value="phone"> หมายเลขโทรศัพท์
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="socialidI">หมายเลขบัตรประชาชน</label>
            <div class="col-sm-10">
                <input class="form-control" id="socialidI" maxlength="13" name="socialid" placeholder="หมายเลขบัตรประชาชน" type="number">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="phoneI">หมายเลขโทรศัพท์</label>
            <div class="col-sm-10">
                <input class="form-control" id="phoneI" maxlength="11" name="phone" placeholder="หมายเลขโทรศัพท์" type="tel">
            </div>
        </div>
        <div class="form-group">
            <label for="amount" class="col-sm-2 control-label">จำนวนเงิน</label>
            <div class="col-sm-10">
                <div class="input-group">
                    <input class="form-control" id="amount" max="5000" min="0" name="amount" placeholder="จำนวนเงิน" type="number">
                    <div class="input-group-addon">&#3647;</div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-10 text-right">
                <button type="submit" class="btn btn-success">โอนเงิน</button>
            </div>
        </div>
    </form>
    <div class="col-sm-12" id="resultA"></div>
    <script src="../vendor/components/jquery/jquery.min.js"></script>
    <script>
        $(function () {
            var formA = $('#formA');

            formA.submit(function (event) {
                event.preventDefault();

                $.ajax({
                    "data": formA.serialize(),
                    "method": "POST",
                    "success": function (data, textStatus, jqXHR) {
                        $('#resultA').html(data);
                    },
                    "url": "values.php",
                });
            });
        });
    </script>
</body>

</html>

และ code ที่ประมวลผลข้อมูล

<?php
echo 'GET<pre>', print_r($_GET, true), '</pre>';
echo 'POST<pre>', print_r($_POST, true), '</pre>';