submit – หน้า 3 – PlusMagi's Blog By Pitt Phunsanit

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

องค์ประกอบ

ส่วนประกอบแรกก็คือฟอร์มที่ใช้กรอกข้อมูล
```
<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
ส่วน 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 ที่จะส่งข้อมุลไปหา

ฝั่ง server ที่ทำหน้าที่ประมวลผล

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

ส่วนแสดงผล เพราะว่าการส่งแบบ 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>';

ป้ายกำกับ: submit

jQuery: ส่ง form แบบ ajaxjQuery: ส่ง form แบบ ajax