PHP Javascript Diable/Enable Form การทำให้ textbox disabled หรือ readonly เมื่อกดปุ่มโหลดข้อมูล

โจทย์ปัญหาในบทความนี้ก็คือ จะทำอย่างไรให้ช่องกรอกข้อมูลมีสถานะเป็นอ่านอย่างเดียว Readonly หรือ Disable เพื่อไม่ให้ป้อนข้อมูลได้ จนกว่าจะมีการกดปุ่ม แก้ไข(Edit)

การเขียนโค๊ดเพื่อให้การทำงานของหน้าเว็บตรงตามความต้องการของเรานั้น มีอยู่หลายวิธีด้วยกัน ซึ่งวิธีที่ผมนำมาเป็นตัวอย่างก็คือ การ Disable ช่องกรอกข้อมูลด้วยการเช็คค่าจาก PHP และสร้างตัวแปรแอตทริบิวต์ disabled="disabled" ให้กับช่องกรอกข้อมูลที่ต้องการ

หลังจากนั้นจะเป็นการทำงานในส่วนของ Javascript เมื่อคลิกปุ่ม Edit คือยกเลิกการ disabled ช่องกรอกข้อมูลที่ต้องการให้แก้ไขได้ โดยจะมีการใช้ jQuery Selector เข้ามาช่วยให้เขียน JavaScript ได้ง่ายขึ้นด้วย

ซอร์สโค๊ดตัวอย่าง disable_enable_form.php

<?php
$hostname = "localhost";
$user = "tobedev";
$password = "1234";

$dbname = "helpdesk";

$tblname4 = "tb_m_user";

try {
$db_conn = new PDO("mysql:host=localhost;dbname=$dbname;charset=utf8", $user, $password);
} catch (PDOException $e) {
echo "Could not connect to database";
exit;
}

$ID = isset($_GET['ID']) ? $_GET['ID'] : 0;

$row = array('ID'=>'', 'NAME_SURNAME'=>'');
$diable = '';
if($ID != 0){
    $diable = 'disabled="disabled"';

    $sql = "SELECT *
            FROM $tblname4
            WHERE ID = :recipe_id";
    try {
    $stmt = $db_conn->prepare($sql);

    if($stmt) {
        // perform query
        $stmt->execute(array(
        "recipe_id" => $ID)
        );

        $row = $stmt->fetch();
    }
    } catch (PDOException $e) {
    echo "A database problem has occurred: " . $e->getMessage();
    }
}
?>
<form action="?p=disable_enable_form" Method="Post" name="form1" >
    <Center>

    <Font Size=4><B>ข้อมูลสมาชิก</B></Font>
    </Cener>

    <Font Size=4>
    <Table Border="0" Bgcolor="#Fcf9d8" Face="Ms Sans Serif" >



    <Td>ID :</Td><Td><Input <?php echo $diable;?>    Type=Text Name="ID" id="row_id" value="<?echo $row["ID"];?>" Maxlength="50" /></td>



        <td><td><td><Input Type=Submit   name="mode" value="save" ></td></td></td>
        <td><td><td><td><Input Type="button" name="mode" value="edit" onclick="enable_form()" > </td></td></td></td>
        <td><td><td><td><Input Type=Submit name="mode" value="clear"></td></td></td></td>

        <Tr>

        <Td>Name - Surname :</Td><Td><Input <?php echo $diable;?>    Type=text Name=NAME_SURNAME id="fullname" value="<?echo $row["NAME_SURNAME"];?>" ID="sur" maxlength=50 ></Td></Tr>

        </Tr>


</Form>
    </Table>
    </Font>

<Br>

<br>

<table width="100%" Border="1" Face="Ms Sans Serif">
    <tr>
                <td Bgcolor="#Fcf9d8"><center><strong>Edit</strong></center></td>
                <td Bgcolor="#Fcf9d8"><center><strong>ID</strong></center></td>
                <td Bgcolor="#Fcf9d8"><center><strong>Name_Surname</strong></center></td>
                <td Bgcolor="#Fcf9d8"><center><strong>Delete</strong></center></td>
    </tr>
<?php
$sql = "SELECT * FROM $tblname4";
try {
$stmt = $db_conn->prepare($sql);

if($stmt) {
    // perform query
    $stmt->execute(array(
      "recipe_id" => $ID)
    );

    while ($row = $stmt->fetch())
    {
    ?>
        <tr>
            <td><center><a href="?p=disable_enable_form&ID=<? echo $row["ID"]?>" >select</center></td>
            <td><center><?echo $row['ID'] ?></center></td>
            <td><?echo $row['NAME_SURNAME']?></td>
            <td><center><a href="#">Delete</a></center></td>
        </tr>

    <?php
    }

}
} catch (PDOException $e) {
echo "A database problem has occurred: " . $e->getMessage();
}
?>
</table>
<script>
function enable_form(){
    $('#row_id').attr('disabled', false);
    $('#fullname').attr('disabled', false);
}
</script>

ข้อมูลที่ใช้ทดสอบ

--
-- Database: `helpdesk`
--
CREATE DATABASE IF NOT EXISTS `helpdesk` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
USE `helpdesk`;

-- --------------------------------------------------------

--
-- Table structure for table `tb_m_user`
--

CREATE TABLE IF NOT EXISTS `tb_m_user` (
`ID` int(11) NOT NULL,
`NAME_SURNAME` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Dumping data for table `tb_m_user`
--

INSERT INTO `tb_m_user` (`ID`, `NAME_SURNAME`) VALUES
(1, 'นางสาวจริงใจ รักจริง'),
(2, 'นายแสนดี รักมั่น');

วิดีโอสาธิตการใช้งาน

PHP CI MANIA - PHP Code Generator
โปรแกรมช่วยสร้างโค้ด ลดเวลาการเขียนโปรแกรม

สนใจสั่งซื้อเพียง 4,500 บาท
http://fastcoding.phpcodemania.com/

สนับสนุนค่ากาแฟผู้เขียนได้ที่

PHP สร้างเว็บไซต์ให้เป็นเรื่องง่ายๆ

ค้นหาบล็อกนี้