GORAGOD.com

การ 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>