Twitter

 

แหล่งเรียนรู้ภาษาอังกฤษ

VOA

engVid

Australia Network

BBC Learning English

Bangkok Post

 

Online E-Learning

เขียนโปรแกรม Java เบื้องต้น

Udemy

Visual-paradigm

Udacity

Software Engineering

Microsoft Virtual Academy

Microsoft Azure

d Engli

Statistics Statistics
93273
Online User Online9
Today Today22
Yesterday Yesterday10
ThisMonth This Month51
LastMonth Last Month480
ThisYear This Year3,400
LastYear Last Year7,097

การทำงานฟอร์มร่วมกับ PHP และ Java Script

          ในการทำงานที่เกี่ยวข้องกับการรับข้อมูลจากผู้ใช้ จะต้องมีการสร้างฟอร์มขึ้นมา ซึ่งในภาษา html เวอร์ชัน 5 สามารถที่จะระบุชนิดข้อมูลให้สอดคล้องกับข้อมูลที่รับเข้ามา ซึ่งจะมีการแสดงผลและตรวจสอบข้อมูลก่อนที่จะประมวลผลฟอร์ม

          ตัวอย่าง ชนิดของ input type

          type = text              ข้อมูลที่เป็นข้อความ

          type = password        ข้อมูลที่เป็นรหัสผ่าน จะมีการปกปิดข้อมูลในการแสดงผล

          type = number         ข้อมูลที่เป็นตัวเลข

          type = email            ข้อมูลที่เป็นรูปแบบของอีเมล์ (มี @)

 

formtest.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Form Test</title>

<script type = "text/javascript">

   

       function ShowPassword() {

          var my_pwd = document.getElementById('mypwd');

          var pwd = my_pwd.value;

          alert (pwd);

       }

   

 </script>    

</head>

<body>

    <form action="/test.php" method="get">

    เบอร์โทร :<br>

    <input type="number" name="mobile_number"><br>

    รหัสผ่าน :<br>

    <input type="password" id="mypwd" name="pwd">

    </br></br>

    <input type="submit" value="ส่งข้อมูล" onclick = "ShowPassword();" />

    </form>

</body>

</html>

          การตั้งชื่อตัวแปรเพื่อใช้ในการทำงานกับ PHP ในที่นี้ มีการกำหนดชื่อ mobile_number และ pwd

ในฟอร์มกำหนด action ในการทำงานร่วมกับไฟล์ test.php โดยในที่นี้ กำหนดการส่งข้อมูลเป็นแบบ get 

          method สามารถกำหนดได้ 2 รูปแบบ คือ  POST กับ GET 

          มีการกำหนด id ชื่อ mypwd เพื่อใช้ในการทำงานร่วมกับ java script โดยผ่านเหตุการณ์ onclick โดยมีการเรียกใช้ ฟังก์ชัน ShowPassword()

            การดึงค่าของ Element โดยใช้ document.getElementById และ ระบุถึงค่าโดยพร็อพเพอตี้ value

var my_pwd = document.getElementById('mypwd');

var pwd = my_pwd.value;

alert (pwd);

           

            ทำการแสดงค่า รหัสผ่าน ผ่านทาง alert ของ java script

 

test.php

<?php 

 
    echo $_GET["mobile_number"]; 
    echo "<br/>";
    echo $_GET["pwd"];

 
?>

         

          ในการรับค่าที่ส่งมาจากฟอร์ม เนื่องจากเป็นการส่งแบบ GET จึงใช้รูปแบบ $_GET(“ชื่อตัวแปร”)  กรณีที่เป็นการส่งแบบ POST  จะใช้รูปแบบ $_POST(“ชื่อตัวแปร”)