การใช้ javascript สร้างฟอร์มอัตโนมัติ แล้วส่งค่าไปยัง PHP

ถ้าต้องการคลิกปุ่ม แล้วให้เกิดฟอร์มรับค่าโดยอัตโนมัติ (on the fly) เพื่อส่งค่าไปยัง PHP จะทำอย่างไร

หลักการ
ใช้สร้างปุ่มที่มีลักษณะเป็น Button และเมื่อคลิกปุ่ม ให้ไปเรียกใช้งานฟังก์ชันที่ใช้ javascript สร้างแบบฟอร์ม และส่งข้อมูลไปยังไฟล์ PHP

วิธีการ

สร้างไฟล์ html ดังนี้

(ไฟล์ jsFormDemo.html)

<HTML>
 <HEAD>
 <meta http-equiv="Content-Type" content="text/html; charset=tis-620">
<script language="javascript" type="text/javascript">
function displayForm(){
 var d=document;
 var test_div = document.getElementById('pwdForm');
 document.getElementById('pwdForm').innerHTML="รหัสเข้าใช้งาน";
 var f = test_div.appendChild(d.createElement('form'));
 var i=d.createElement('input');
 var i2=i.cloneNode(false);
 var br=d.createElement('br');
 f.action='adminPage.php';
 f.method='POST';
 f.name='f';
 i.type='text';
 i.name='myText';
 i.value='';
 i2.type='submit';
 i2.value=' ส่ง ';
 f.appendChild(i);
 f.appendChild(br);
 f.appendChild(i2);
 document.getElementsByName("adminBtn")[0].disabled = true;
}
</script>
 </HEAD>
 <BODY>
 กดปุ่มเพื่อเข้าใช้งาน<br>
  <input type=button name="adminBtn" value="Admin" onclick="displayForm()">
 <div id="pwdForm"></div>
 </BODY>
</HTML>

โค้ดข้างบน มีการกำหนดตำแหน่งให้แสดงฟอร์ม ต่อจากปุ่มที่คลิก และเมื่อคลิกปุ่มแล้ว ให้ปุ่มไม่สามารถกดอีกได้ เพื่อไม่ให้กดปุ่มซ้ำ

ไฟล์ adminPage.php

<?php
$thisPwd = $_POST["myText"];
echo "รหัสที่ท่านพิมพ์คือ : $thisPwd <br>";
?>


การแสดงผล
  1. เมื่อเรียกไฟล์ jsFormDemo.html จะแสดงผล ดังนี้
    
  2. เมื่อกดปุ่ม จะเกิดฟอร์มให้เติมรหัส
  3. กรอกรหัส
  4. เมื่อกดปุ่ม "ส่ง"   ไฟล์ adminPage.php จะนำค่ามาแสดง ดังนี้


ที่มา:
http://bytes.com/topic/javascript/answers/147290-can-i-create-form-fly

ความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

อุปมา อุปไมย สำนวนการเปรียบเทียบ ของไทย

แนวข้อสอบ เงื่อนไขสัญลักษณ์

ความสามารถทั่วไปด้านเหตุผล การหาความสัมพันธ์จาก ภาพ สัญลักษณ์