วันพฤหัสบดีที่ 28 มีนาคม พ.ศ. 2556

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

ไม่มีความคิดเห็น:

แสดงความคิดเห็น