1. 首页
  2. 问答
  3. 单击后如何禁用按钮

单击后如何禁用按钮

2017-09-28 177 views
-7

如果单击它之后如何禁用我的按钮？当我点击按钮ACCEPT时，它将禁用那个按钮，等等。它是这样的，我点击按钮“接受”后，应该禁用按钮（和“取消”按钮），然后我点击按钮“发送”，那么该按钮也应该被禁用（在这个过程中“交付”按钮仅启用）单击后如何禁用按钮

这是我的代码看起来像。在按钮的所有按钮的代码，我只是包括所有的代码。我希望你们能帮助我。谢谢！

<?php 

include_once 'ordermodal2.php'; 
/** *ordermodal.php **/ 

$id = ""; 
$order_date = ""; 
$order_time = ""; 
$order_id = ""; 
$order_deliverCharge = ""; 
$order_status = ""; 
$order_totalAmount= ""; 
$coordinates = ""; 
$driver_number = ""; 
$address = ""; 

$food_name= ""; 
$specal_request= ""; 
$quantity= ""; 
$amount= ""; 



     ?> 

     <!-- MODALS --> <!-- DETAILS --> 
     <div id="myModal" class="modal fade" role="dialog" style="z-index: 1400;"> 
     <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
     <form action="" method="post" class="form-horizontal"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" ><center>&times;</button> 
    <h4 class="modal-title" id="titleModal">Order Information</h4> 
    </div> 
     <div class="modal-body"> 

    <div class="form-group"> 
<label for="order_id" class="col-sm-2 control-label">Order ID</label> 
<div class="col-lg-3"> 
<input type="text" input style="width:500px" class="form-control" name="ORDER_ID" id="ORDER_ID" placeholder="" value="" required="required" readonly> 
</div> 
</div> 

<div class="form-group"> 
<label for="id" class="col-sm-2 control-label">User ID</label> 
<div class="col-lg-3"> 
<input type="text" input style="width:500px" class="form-control" name="user_id" id="user_id" placeholder="" value="" required="required" readonly> 
</div> 
</div> 

    <div class="form-group"> 
<label for="order_date" class="col-sm-2 control-label">Order Date</label> 
<div class="col-lg-3"> 
<input type="text" input style="width:500px" class="form-control" name="order_date" id="order_date" placeholder="" value="" required="required" readonly> 
</div> 
</div> 

    <div class="form-group"> 
<label for="order_time" class="col-sm-2 control-label">Order Time</label> 
<div class="col-lg-3"> 
<input type="text" input style="width:500px" class="form-control" name="order_time" id="order_time" placeholder="" value="" required="required" readonly> 
</div> 
</div> 

<div class="form-group"> 
<label for="order_deliverCharge" class="col-sm-2 control-label">Delivery Charge</label> 
<div class="col-lg-3"> 
<input type="text" input style="width:500px" class="form-control" name="order_deliveryCharge" id="order_deliveryCharge" placeholder="" value="" required="required" readonly> 
</div> 
</div> 

    <div class="form-group"> 
<label for="order_totalAmount" class="col-sm-2 control-label">Total Amount</label> 
<div class="col-lg-3"> 
<input type="text" input style="width:500px" class="form-control" name="order_totalAmount" id="order_totalAmount" placeholder="" value="" required="required" readonly> 
</div> 
</div> 

<div class="form-group"> 
<label for="address" class="col-sm-2 control-label">Address</label> 
<div class="col-lg-3"> 
<input type="text" input style="width:500px" class="form-control" name="address" id="address" placeholder="" value="" required="required" readonly> 
</div> 
</div> 

<div class="form-group"> 
<label for="coordinates" class="col-sm-2 control-label">Coordinates</label> 
<div class="col-lg-3"> 
<input type="text" input style="width:500px" class="form-control" name="coordinates" id="coordinates" placeholder="" value="" required="required" maxlength="11" readonly> 
</div> 
</div> 

<div class="form-group"> 
<label for="driver_number" class="col-sm-2 control-label">Driver Number</label> 
<div class="col-lg-3"> 
<input type="text" input style="width:500px" class="form-control" name="drivers_number" id="drivers_number" placeholder="" value="" required="required" readonly> 
</div> 
</div> 

<div class="form-group"> 
<label for="order_status" class="col-sm-2 control-label">Order Status</label> 
<div class="col-lg-3"> 
<input type="text" input style="width:500px" class="form-control" name="order_status" id="order_status" placeholder="" value="" required="required" readonly> 
</div> 
</div> 

    <?php 
    if(isset($_POST['ORDER_ID'])){ 
$order_id = trim(addslashes($_POST['ORDER_ID'])); 
$sql = "SELECT food_name, special_request, quantity, amount 
FROM cart_tbl 
WHERE order_id=$order_id"; 
$result = mysqli_query(connection2(), $sql);} 
?> 
<table class="table table-hover table-bordered"> 
<thead> 
<tr> 
<th>Food</th> 
<th>Special Request</th> 
<th>Quantity</th> 
<th>Amount</th> 
</tr> 
</thead> 
<?php 
if(mysqli_num_rows($result)>0) 
{ 
    while($row = mysqli_fetch_array($result)) 
    { 
?> 
<tr> 
<td><?php echo $row["food_name"];?></td> 
<td><?php echo $row["special_request"];?></td> 
<td><?php echo $row["quantity"];?></td> 
<td><?php echo $row["amount"];?></td> 
</tr> 
<?php 
    } 
} 
?> 

</table> 
</div> 
<div class="modal-footer"> 
<button type="submit" input style="background-color:##FF0000;color:white;float:left" name="showFood" id="showFood" class="btn btn-primary " onclick="if(!confirm('Are you sure you want to see food order?')){return false;}" > Show Food</button> 
<button type="submit" input style="background-color:#4CAF50;color:white" name="submitDelivered" id="submitDelivered" class="btn btn-primary " onclick="if(!confirm('Are you sure you want to deliver order?')){return false;}" > Delivered </button> 
<button type="submit" input style="background-color:#0000FF;color:white" name="submitAccept" id="submitAccept" class="btn btn-primary" onclick="if(!confirm('Are you sure you want to accept order?')){return false;}" > Accept </button> 
<button type="button" style="background-color:#FFFF00;color:black" class="btn btn-success" data-toggle="modal" data-target="#myDropdown"> Send </button> 
<button type="submit" input style="background-color:#f44336;color:white" name="submitCancel" class="btn btn-danger" onclick="if(!confirm('Are you sure you want to cancel order?')){return false;}">Cancel</button> 
    <?php 
if(isset($_POST['submitDelivered'])){ 
    $order_id = trim(addslashes($_POST['ORDER_ID'])); 
    $driver_number= trim(addslashes($_POST['drivers_number'])); 
    $query = "UPDATE order_tbl SET `order_status`='Delivered' WHERE `order_id` = $order_id"; 
    if (mysqli_query(connection2(), $query)) { 
     mysqli_query(connection2(), "COMMIT"); 
     $_SESSION['message'] = "Order Delivered"; } 
     else { 
     $_SESSION['message'] = mysqli_error(connection2()); 
     mysqli_query(connection2(), "ROLLBACK"); 
     } 

    if($_POST['drivers_number']!=0){  
    $query2 = "UPDATE driver_tbl SET `order_id`='' WHERE `driver_number` = $driver_number"; 
    if (mysqli_query(connection2(), $query2)) { 
     mysqli_query(connection2(), "COMMIT"); 
     } 
    } 
    } 

    if(isset($_POST['submitAccept'])){ 
    $order_id = trim(addslashes($_POST['ORDER_ID'])); 
    $driver_number= trim(addslashes($_POST['drivers_number'])); 
    $query = "UPDATE order_tbl SET `order_status`='Accepted' WHERE `order_id` = $order_id"; 
    if (mysqli_query(connection2(), $query)) { 
     mysqli_query(connection2(), "COMMIT"); 
     $_SESSION['message'] = "Order Accepted"; } 
     else { 
     $_SESSION['message'] = mysqli_error(connection2()); 
     mysqli_query(connection2(), "ROLLBACK"); 
     } 

    if($_POST['drivers_number']!=0){  
    $query2 = "UPDATE driver_tbl SET `order_id`='' WHERE `driver_number` = $driver_number"; 
    if (mysqli_query(connection2(), $query2)) { 
     mysqli_query(connection2(), "COMMIT"); 
     } 
    } 
    } 


    if(isset($_POST['submitCancel'])){ 
    $order_id = trim(addslashes($_POST['ORDER_ID'])); 
    $driver_number= trim(addslashes($_POST['drivers_number'])); 
    $query = "UPDATE order_tbl SET `order_status`='Cancelled' WHERE `order_id` = $order_id"; 
    if (mysqli_query(connection2(), $query)) { 
     mysqli_query(connection2(), "COMMIT"); 
     $_SESSION['message'] = "Order Cancelled"; } 
     else { 
     $_SESSION['message'] = mysqli_error(connection2()); 
     mysqli_query(connection2(), "ROLLBACK"); 
     } 

    if($_POST['drivers_number']!=0){  
    $query2 = "UPDATE driver_tbl SET `order_id`='' WHERE `driver_number` = $driver_number"; 
    if (mysqli_query(connection2(), $query2)) { 
     mysqli_query(connection2(), "COMMIT"); 
     } 

    } 
    } 

    ?> 
<script type="text/javascript"> 
var x = document.getElementsByName("order_status").value; 

if(x== "Accepted"){ 
    document.getElementsByName("submitAccept").disabled = true; 
    document.getElementsByName("submitCancel").disabled = true; 
} 
    if(x== "Dispatched"){ 
    document.getElementsByName("submitAccept").disabled = true; 
    document.getElementsByName("submitCancel").disabled = true; 
    document.getElementsByName("send").disabled = true; 
} 
    if(x== "Delivered"){ 
    document.getElementsByName("submitDelivered").disabled = true; 
} 

</script> 
</div> 
</form> 
</div> 
</div> 
</div>

来源

2017-09-28 One Punch

+0

get'Elements'ByName返回一个数组，因此您需要从该数组中选择元素，然后将其禁用 – alen

+0

@ Don'tPanic这不是无关的伙计，因为我需要将我的order_status等于按钮的值。 （点击后）如果order_status被接受，那么该按钮应该被禁用。 –

+0

@ Don'tPanic它是同一个兄弟，因为如果我不点击按钮，我不会得到order_status的值。 –

回答

0

你一定想在JavaScript中做到这一点，你也可以使用这段代码在其他任何一个按钮上做同样的事情。

当JavaScript在#submitAccept元素上点击时，它将禁用该按钮。另外，请确保包含jQuery以使用此代码。

$("#submitAccept").click(function() { 
 
    $(this).attr('disabled','disabled'); 
 
});
<button type="submit" input style="background-color:#0000FF;color:white" name="submitAccept" id="submitAccept" class="btn btn-primary" onclick="if(!confirm('Are you sure you want to accept order?')){return false;}" > Accept </button> 
 

 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

还是一个普通的JavaScript版本，你的网线保持的onclick功能，用途：this.disabled=true;

<button type="submit" input style="background-color:#0000FF;color:white" name="submitAccept" id="submitAccept" class="btn btn-primary" onclick="if(!confirm('Are you sure you want to accept order?')){return false;} this.disabled=true;" > Accept </button>

来源

2017-09-28 13:07:50

+0

Nah bro，它仅在点击它后禁用按钮。所以我可以发送订单，即使我不接受它？该按钮仅在禁用order_status的情况下被接受且按钮被submitAccept –

1

一种方式做这将是有一个变量，如var isClicked = false。您希望在按钮运行之前进行检查，例如if(isClicked = true)。点击按钮后，将isClicked设置为false。

来源

2017-09-28 13:15:30 ovieh

+0

var isClicked = false; if（isClicked = true）{ \t document.getElementsByName（“submitAccept”）。disabled = true; \t document.getElementsByName（“submitCancel”）。disabled = true; }这是正确的吗？ –

相关问题

 相关问题