การ submit ฟอร์มด้วย AJAX เมื่อมี radio หรือ checkbox

เมื่อต้องการส่งค่าจากฟอร์มด้วย AJAX เราต้องเขียนโค้ดเพื่ออ่านค่าของ Object ต่างๆที่อยู่บนฟอร์มเพื่อส่งให้ AJAX เช่น

<form onsubmit="dosubmit(this)">

<input type="text" name="user" value="demo" />

<input type="password" name="password" value="1234" />

<input type="radio" name="bn" value="1" />

<input type="radio" name="bn" value="2" />

<input type="checkbox" name="checkbox" value="555" />

<input type="submit" name="submit" value="Send" />

</form>

เราสามารถอ่านค่าเพื่อส่งให้กับ AJAX ได้ประมาณนี้

var user = frm.user.value;

var password = frm.password.value;

......

var query = 'user=' + encodeURIComponent( user ) + '&password=' + encodeURIComponent( password) + .......

หากมี หลายๆตัวคงไม่สะะดวกในการเขียนโค้ด หรือหากเป็น Checkbox เราคงต้องมาคอยตรวจสอบทีละตัวเพื่อดูว่าตัวใดถูกเลือกอยู่ ซึ่งคงไม่สะดวกนัก

เราลองมาเขียนฟังก์ชั่นเพื่ออ่านค่าจากฟอร์ม เพื่อส่งให้กับ AJAX กันดู ด้วยฟังก์ชั่น getRequestBody()

<script type="text/javascript">



function dosubmit( frm )

{

  var query = getRequestBody( frm ); //เอาค่านี้ไปใช้งานต่อนะจ๊ะ

  alert( query );

}



function getRequestBody( pForm ) {//รับ formname

  var nParams = new Array();

  for ( var n = 0 ; n < pForm.elements.length ; n++ )

  {

    if ( ( pForm.elements[n].checked == true && pForm.elements[n].type == "radio" ) // ตรวจสอบ element radio ว่า ติ๊กอยู่หรือไม่?

      || ( pForm.elements[n].checked == true && pForm.elements[n].type == "checkbox" ) // ตรวจสอบ element checkbox ว่า ติ๊กอยู่หรือไม่?

      || ( pForm.elements[n].type != "radio" && pForm.elements[n].type != "checkbox" ) ) //element อื่นๆ

    {

      var pParam = encodeURIComponent( pForm.elements[n].name );

      pParam += "=";

      pParam += encodeURIComponent( pForm.elements[n].value );

      nParams.push( pParam ); //นำมาใส่ Array

    }

  }

  return nParams.join( "&" ); //แปลง Array ให้เป็น String

}



</script>