การใช้ 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>";
?>

การแสดงผล