การ submit ฟอร์มด้วย AJAX เมื่อมี radio หรือ checkbox
เมื่อต้องการส่งค่าจากฟอร์มด้วย AJAX เราต้องเขียนโค้ดเพื่ออ่านค่าของ Object ต่างๆที่อยู่บนฟอร์มเพื่อส่งให้ AJAX เช่น
เราสามารถอ่านค่าเพื่อส่งให้กับ AJAX ได้ประมาณนี้
หากมี หลายๆตัวคงไม่สะะดวกในการเขียนโค้ด หรือหากเป็น Checkbox เราคงต้องมาคอยตรวจสอบทีละตัวเพื่อดูว่าตัวใดถูกเลือกอยู่ ซึ่งคงไม่สะดวกนัก
เราลองมาเขียนฟังก์ชั่นเพื่ออ่านค่าจากฟอร์ม เพื่อส่งให้กับ AJAX กันดู ด้วยฟังก์ชั่น getRequestBody()
<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>