multiple-submit-action-form

Multiple submit action in one form with javascript

Multiple submit คือการส่งค่า ที่อยู่ใน form ออกไปยัง ระบบเพื่อ ให้ทำการประมวลผล ในครั้งนี้เราจะทำการส่งค่า จากรูปแบบของ form เพียง 1 form ไปยังหน้าที่แตกต่างกัน เพื่อนำข้อมูลชุดเดียวกัน ไปคำนวณหรือใช้ ในรูปแบบที่ต่างกัน มาดูวิธีการ ส่งค่าจาก 1 form ไปยังหน้าที่แตกต่างกันดีกว่าครับ

Multiple Submit ส่งค่าจากฟอร์มเดียวกันไปยัง action ที่ต่างกัน

เรื่องนี้อันที่จริง เป็นส่วนของภาษา HTML แต่ที่ขอเอาไปมา Tag ไว้ในส่วนของ Javascript นั้นก็เพราะว่า มีการนำ js เข้ามาช่วย ในการย้ายค่าของ action ให้แตกต่างกัน ด้วยความสามารถของ js นั้นเอง

ทีนี้ เพราะอะไรเราถึงต้องทำการ ส่งค่าจาก form เดียวกัน ไปยังหน้าที่แตกต่างกัน เพราะปรกติแล้ว ข้อมูลในหนึ่งหน้า มักจะสร้างขึ้นมา สำหรับทำ 1 ภาระกิจ สำหรับ 1 เหตุผลล้วนๆอยู่แล้ว แต่มันมีบาง form หรือข้อมูลบางชุดครับ ที่เราสามารถที่จะ จัดเก็บครั้งเดียว แต่ให้ผู้ใช้งานเลือกได้ ว่าจะนำข้อมูลชุดนี้ไปทำอะไร เช่น Poll สำรวจ หรือการคำนวณทางสิติ หรือง่ายๆก็เช่น การสร้างปุ่ม Check All เอาไว้หน้า Data Table แล้วให้เลือกว่าจะ เอาไป Print หรือเอาไป Export หรือเอาไป Delete ทิ้งอะไรทำนองนั้น

จริงอยู่ที่ วิธีเหล่านี้ สามารถส่งค่าจาก HTML เข้าไปใน Javascript แล้วทำการ สร้างชุดข้อมูล ส่งออกมาเป็น JSON ไปยังฝั่งประมวลผลได้อย่างง่ายดาย แต่การเขียนค่อนข้างหลายบรรทัด การส่งค่าจากใน form เดียวกันไปเลย จึงนับว่าเป็น อีกหนึ่งทางเลือกที่น่าสนใจไม่น้อย

ก่อนอื่นเราต้องสร้าง Form สำหรับส่งค่าข้อมูลออกไปกันก่อนครับ

index.php


<h1>Multiple action in one form</h1>
<form id="form1" name="form1" method="post">
<label for="a1">A1</label>
<input type="text" name="a1"><br><br>
<label for="a2">A2</label>
<input type="text" name="a2"><br><br>
<input type="submit" value="Send plus">
<input type="submit" value="Send minus">
</form>

รูปภาพแสดงฟอร์มสำหรับส่งข้อมูลหลายหน้า multiple form

รูปภาพแสดงฟอร์มสำหรับส่งข้อมูลหลายหน้า

จากใน Code ชุดนี้จะเห็นว่า ผมทำการใส่ ปุ่มสำหรับ submit เอาไว้ 2 ปุ่ม โดยที่ใช้การแสดง ข้อความ ที่แตกต่างกันคือ Send Plus หนึ่งปุ่ม และอีกปุ่มเป็น Send Minus หรือการบอกว่า นำข้อมูลไปบวก  กับนำข้อมูลไปลบนั้นเอง ทีนี้จุดสังเกตุอีกอย่าง คือที่ tag form ผมไม่ได้ทำการใส่ action ไว้ตามรูปแบบทั่วไป ของการสร้าง form สำหรับส่งข้อมูล…. แล้วแบบนี้มันจะส่งข้อมูลไปได้ยังไงละ

นั้นแหละครับ สิ่งที่เราจะต้องทำ ต่อจากนี้ก็คือ การกำหนด Action ให้กับ Form ผ่านทางการ กดปุ่ม Submit ต่างๆที่เรามีนั้นเอง ทีนี้เราสามารถทำำแบบนั้นได้ ด้วยการทำงานที่ไม่ยากเย็นนัก แบบนี้


<script type="text/javascript">
function submitForm(action)
{
document.getElementById('form1').action = action;
}
</script>

การทำงานของ javascript ตรงนี้ ไม่ได้ซับซ้อนอะไรมากนัก มันเป็นเพียงแค่ การสร้าง Function สำหรับรับค่า โดยใช้งานจาก ID ของ Form มาเป็นตัวแยกนั้นเอง แล้วเราก็จะทำการ สั่งให้ form นี้ action ตามที่เรากำหนดไว้กับ ตัวแปร action ที่เราต้องไปสร้างเอาไว้ที่ปุ่มอีกที แบบนี้


<input type="submit" onclick="submitForm('post1.php')" value="Send plus">
<input type="submit" onclick="submitForm('post2.php')" value="Send minus">

ตรงส่วนนี้ เป็นการเรียก function ที่ชื่อ submitForm ที่เราสร้างไว้ เมื่อกี้ขึ้นมานั้นเอง ใน function จะเห็นว่า เราทำการรับชื่อตัวแปร ที่ชื่อ action เข้าไปใน function เพื่อให้ form นั้นทำการ submit ไปที่นั้น ดังนั้น เราจึงใช้ onclick เพื่อเรียกแล้วใส่หน้าที่ต้องการ ลงไปในปุ่มต่างๆที่เราต้องการนั้นเอง เท่านี้ก็จบ การส่งค่า

ทีนี้ลองมาเช็คดูข้อมูลกันหน่อยครับ ว่าออกมาตรงตามที่เราต้องการไหม โดยผมจะส่งไป 2 หน้าคือ post1.php กับ post2.php นั้นเอง

Post1.php


<h1>This is Post1</h1>
<?php
echo "<pre>";
var_dump($_POST);
echo "</pre>";
die();
?>

Post2.php


<h1>This is Post2</h1>
<?php
echo "<pre>";
var_dump($_POST);
echo "</pre>";
die();
?>

ส่วนของการแสดงผลก็เป็นดังนี้

multiple-submit-action-form

multiple-submit-action-form

สามารถใช้งานกับ รูปแบบของ การส่งได้หลายค่าแล้วแต่ ตามต้องการ เรื่องนี้เป็นอีกเรื่อง ที่มีน้องๆถามกันเข้ามาเยอะมาก ถ้าสังเกตุดูดีๆ จะเห็นว่า วิธีการแก้ปัญหานี้ ทำได้ด้วยพื้นฐานของ javascript ธรรมดาๆ ที่ไม่ได้ซับซ้อนอะไรเลย ดังนั้นแนะนำว่า พยายามทำความเข้าใจ กับเรื่องพื้นฐานต่างๆให้ดี ก็จะสามารถทำงานได้ แก้ไขปัญหาต่างๆได้ครับ

Link: www.w3schools.com/js