PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


ผมต้องการที่จะเปิดช่องinputที่ได้มีการระบุreadonlyเพื่อให้ทำการเเก้ไขข้อมูลได้ต้องทำไงครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ผมต้องการที่จะเปิดช่องinputที่ได้มีการระบุreadonlyเพื่อให้ทำการเเก้ไขข้อมูลได้ต้องทำไงครับ

ผมต้องการที่จะเปิดช่องinputที่ได้มีการระบุreadonlyเพื่อให้ทำการเเก้ไขข้อมูลได้ต้องทำไงครับ
คือ ในช่องเเสดงข้อมูลที่เป็น input text ผมได้มีการกำหนด readonly เอาไว้ เเต่ผมก็จะใส่ปุ่ม button เอาไว้เพื่อใช้ในการกดเเก้ไขข้อมูล 
ซึ่งตรงการเเก้ไขข้อมูลนี้ ผมไม่ทราบว่าต้องเขียนอย่างไร รบกวนด้วยครับ

<?php
error_reporting(error_reporting() & ~E_NOTICE);
session_start();
require_once 'connect.php';

$query_buyer = "SELECT * FROM customer WHERE cus_id ";
$result = mysqli_query($con, $query_buyer) or die(mysqli_error());
$row_buyer = mysqli_fetch_array($result);
?>


<p><a href="main1.php">เลือกสินค้าเพิ่ม</a> </p>
<table width="700" border="1" align="center" class="table">
    <tr>
        <td width="1558" colspan="7" align="center">
            <strong>สั่งซื้อสินค้า</strong></td>
    </tr>
    <tr class="success">
        <td align="center">ลำดับ</td>
        <td align="center">ชื่อสินค้า</td>
        <td><center>ขนาด(นิ้ว)</center></td>
<td><center>ความหนา(มม.)</center></td>
<td><center>ความยาว(ม.)</center></td>
<td align="center">จำนวน</td>
<td align="center">รวม/รายการ</td>
</tr>
<form  name="formlogin" action="Saveorder.php" method="POST" id="login" class="form-horizontal">
    <?php
    $order_total = 0;
    $pro_id = isset($_GET['pro_id']);
    $pro_stock = isset($_GET['pro_stock']);
    foreach ($_SESSION['shopping_cart'] as $pro_id => $pro_stock) {
        $sql = "select * from product where pro_id=$pro_id";
        $query = mysqli_query($con, $sql);
        while ($row = mysqli_fetch_array($query)) {
            $sum = $row['pro_price'] * $pro_stock;
            $order_total += $sum;
            $tex = ($order_total * 0.07);
            $payment = ($order_total + $tex );
            ?>
            <tr>
                <td align='center'><?php echo $i += 1; ?> </td>
                <td> <?php echo $row["pro_name"]; ?> </td>
                <td> <?php echo $row["pro_size"]; ?> </td>
                <td> <?php echo $row["pro_thickness"]; ?> </td>
                <td> <?php echo $row["pro_length"]; ?> </td>
             <!--<td align='right'><?php echo number_format($row['pro_price'], 2); ?> </td>-->
                <td align='right'><?php echo $pro_stock; ?></td>
                <td align='right'><?php echo number_format($sum, 2); ?></td> <!-- ราคารวมเเต่ละรายการ -->
            </tr>
            <?php
        }
    }
    ?>
    <tr>
        <td  align='right' colspan='6'><b>รวม</b></td>
        <td align='right'><b><?php echo number_format($payment, 2); ?> </b>  </td>
    </tr>

</table>
<br><br><br>
<div class="container">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-6" style="background-color:#f4f4f4">
            <h3 align="center" style="color:green">
                <span class="glyphicon glyphicon-shopping-cart"> </span>
                ที่อยู่ในการจัดส่งสินค้า  </h3>

            <table align="center" cellpadding="0" cellspacing="1" class="table table-hover">
                <tr> 
                    <td width="200" >คำนำหน้า</td>
                    <td class=""> <input name="cus_perfix" type="text" class="box" id="cus_perfix" readonly="readonly" 
value="<?php echo $row_buyer['cus_perfix']; ?>" size="32" maxlength="32"></td>
                </tr>
                <tr> 
                    <td width="200" >ชื่อ</td>
                    <td class=""> <input name="cus_name" type="text" class="box" id="cus_name" readonly="readonly" 
value="<?php echo $row_buyer['cus_name']; ?>" size="32" maxlength="32"></td>
                </tr>
                <tr> 
                    <td width="200">นามสกุล </td>
                    <td class=""> <input name="cus_surname" type="text" class="box" id="cus_surname" readonly="readonly" 
value="<?php echo $row_buyer['cus_surname']; ?>" size="32" maxlength="32"></td>
                </tr>

               
                <tr> 
                    <td width="150">เบอร์โทรศัพท์ </td>
                    <td> <input name="cus_number" type="tel" class="box" id="cus_number"
 value="<?php echo $row_buyer['cus_number']; ?>" size="32" maxlength="32"></td>
                </tr>
                <tr> 
                    <td width="150">ที่อยู่</td>
                    <td class=""> <input name="cus_address" type="text" class="box" id="cus_address"
 value="<?php echo $row_buyer['cus_address']; ?>" size="32" maxlength="50" ></td>
                </tr>
                <tr> 
                    <td width="150">ตำบล</td>
                    <td class=""> <input name="cus_district" type="text" class="box" id="cus_district"
 value="<?php echo $row_buyer['cus_district']; ?>" size="32" maxlength="32" ></td>
                </tr>
                <tr> 
                    <td width="150">อำเภอ</td>
                    <td class=""> <input name="cus_prefecture" type="text" class="box" id="cus_prefecture" 
value="<?php echo $row_buyer['cus_prefecture']; ?>" size="32" maxlength="32" ></td>
                </tr>
                <tr> 
                    <td width="150">จังหวัด</td>
                    <td class=""> <input name="cus_province" type="text" class="box" id="cus_province"
 value="<?php echo $row_buyer['cus_province']; ?>" size="32" maxlength="32" ></td>
                </tr>
                <tr> 
                    <td width="150">รหัสไปรษณีย์ </td>
                    <td> <input name="cus_zip_code" type="text" class="box" id="cus_zip_code" 
value="<?php echo $row_buyer['cus_zip_code']; ?>" size="32" maxlength="32"></td>
                </tr>
            </table>
            <div class="form-group">
                <div class="col-sm-12" align="center">
                    <input name="cus_id" type="hidden" id="cus_id" value="<?php echo $row_buyer['cus_id']; ?>">
                    <button type="submit" class="btn btn-primary" id="btn">ยืนยันสั่งซื้อ </button>
                    <button type="button" class="btn btn-danger" id="btn2">แก้ไข </button>
                </div>
            </div>

        </div>
    </div>
</div>
<br><br>
</form>


โดย:  New Love IP: 49.49.245.xxx วันที่: 13-02-2019 เวลา: 23:44:11

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 1
ใช้ jQuery ช่วย  หลักๆ การจัดการกับ object จากการกระทำใดๆ จะอยู่ในรูปแบบ
$("selector ที่มีการกระทำเกิดขึ้น").on("event หรือเหตุการณ์ที่ตรวจจับ",ฟังชั่นการทำงาน(){
	///
});
เช่น
 
$("#edit_obj1").on("click",function(){
	alert("Test");
});   
สิ่งที่ต้องศึกษา คือ 
Selectors
https://api.jquery.com/category/selectors/
 
Events
http://api.jquery.com/Types/#Event
 
ส่วนการแก้ไข ปรับปรุง เปลี่ยนแปลง element หรือ object ให้ดูเกี่ยวกับการ Manipulation
http://api.jquery.com/category/manipulation/
 
อย่างกรณีที่ต้องการ เดิมมี element อยู่สองตัว คือ input text และ button สมมติว่ามี id เป็น
obj1 และ edit_obj1 ตามลำดับ
 
สิ่งที่เราต้องการคือ ให้จากเดิม input text ที่มี attribute ว่า readonly อยู่  ให้เอา attribute นี้ออกไป
เพื่อที่จะให้สามารถแก้ไขรายการได้
 
<input type="text" id="obj1" value="test" readonly>
<!--   เดิม-->
 
อยากให้เป็น
 
<input type="text" id="obj1" value="test">
<!--   อยากให้เป็น -->
 
วิธีการ คือทำอย่างไรให้ค่า readonly หายไป หรือมีค่าเป็น false เราก็ไปดูวิธีการจัดการจากคำสั่งใน Manipulation
ซึ่งทำได้หลายวิธี เช่น 
 
$("#obj1").attr("readonly",false);
<!--เปลี่ยนค่าเป็น false-->
 
หรือ
 
$("#obj1").removeAttr("readonly");
<!--เอา attrribute นี้ออกไป-->
 
เมื่อเอาทั้งสองส่วนมารวมกัน ระหว่าง เกิดเหตุการณ์เมื่อคลิกที่ปุ่มแก้ไข ให้ทำการกำหนดให้ input text สามารถแก้ไขได้
ก็จะได้เป็น
 
 <div class="container w-75">
<input type="text" id="obj1" value="test" readonly>
<button type="button" id="edit_obj1">Edit</button>
 </div>
 
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#edit_obj1").on("click",function(){
		$("#obj1").attr("readonly",false);
	});    
});
</script>
 
ลองดูไอเดียคำแนะนำ เป็นแนวทางต่อยอดต่อไป
 


โดย:  Ninenik IP: 14.207.214.xxx วันที่: 14-02-2019
 ความคิดเห็นที่ 2
ขอบคุณครับ


โดย:  New Love IP: 110.164.187.xxx วันที่: 14-02-2019 เวลา: 17:24:44