Ajax Form Submit แบบง่ายๆ

พูดถึง Ajax หลายคนคงคุ้นชื่อหน้าตากันบ้างแล้ว คงไม่ต้องพูดอะไรมากแล้ว วันนี้เอา Script สำหรับ Submit Form มาฝากอย่างๆง่ายๆ สะดวกดีครับ เริ่มต้นกันเลยแล้วกัน

[ ajaxsbmt.js /3.51 Kb - Download Script ]

1. แปะ Script นี้ในส่วนหัว
<script src="js/ajaxsbmt.js" type="text/javascript"></script>

2. ส่วนของ Form ที่เราจะ Submit ก็ให้ปะตามนี้
<form name="MyForm" action="response_normal.php" method="post" onsubmit="xmlhttpPost('response_ajax.php, 'MyForm', 'MyResult', '<img src=\'pleasewait.gif\'>'); return false;">
3. จากนั้นก็ใส่ครอบ Form ทั้งหมด เท่านี้ค่าทั้งหมดก็จะถูก Submit ไปกับปุ่มแล้ว ...
<script src="js/ajaxsbmt.js" type="text/javascript"></script>

<form name="MyForm" action="response_normal.php" method="post" onsubmit="xmlhttpPost('response_ajax.php', 'MyForm', 'MyResult', '<img src=\'pleasewait.gif\'>'); return false;">
  <input name="sample_text" type="text" value="Test Text" />
  <br />
  <label>
  <textarea name="textarea" id="textarea" cols="45" rows="5">Test Textarea</textarea>
  </label>

    <label> <br />
    <input name="checkbox" type="checkbox" id="checkbox" value="True" />
    </label>
    <br />
    <input type="radio" name="radio" value="radio1" />
    <input type="radio" name="radio" value="radio2" />
    <input type="radio" name="radio" value="radio3" />
    <br />

    <select name="List">
      <option value="a">a</option>
      <option value="b">b</option>
      <option value="c">c</option>
    </select>

  <br />
  <input name="send_button" type="submit" value="Send" />
</form>
<div id="MyResult"></div>

ปล. ผลของการ Return จะถูกพ่นใน tag MyResult ลองเอาไปปรับใช้กันดูนะครับ ^ ^

Refer : http://www.simonerodriguez.com/ajax-form-submit-example/