1

How to disable a button if certain condition happened. Example my order_status is 'Accepted' then the button for 'Accept' will be disabled. How can I disabled it using javascript?

Below is my code, but it didn't quiet working and I dont know why.

    <div class="form-group">
     <label for="order_status" class="col-sm-2 control-label" style="width:20%;">Order Status</label> 
     <input type="text"  class="form-control" name="order_status" id="t_order_status" style="width:80%;" placeholder="" value="" required="required" readonly>
     </div>
    
    <button type="button" input style="background-color:#4CAF50;color:white;border-color:#000000;" name="submitDelivered" id="submitDelivered" class="btn btn-success" data-toggle="modal" data-target="#myDeliverModal" onclick="deliver('<?= $_POST['order_id'] ?>')" > Delivered </button>
    <button type="button" input style="background-color:#0000FF;color:white;border-color:#000000;" name="submitAccept" id="submitAccept" class="btn btn-success" data-toggle="modal" data-target="#myAcceptModal" onclick="accept('<?= $_POST['order_id'] ?>')"  > Accept </button>
     <button type="button" style="background-color:#FFFF00;color:black;border-color:#000000;" class="btn btn-success" data-toggle="modal" data-target="#myDropdown" onclick="send('<?= $_POST['order_id'] ?>')"> Send </button> 
    <button type="button" input style="background-color:#f44336;color:white;border-color:#000000;" name="submitCancel" id="submitCancel" class="btn btn-success" data-toggle="modal" data-target="#myCancelModal" onclick="cancel('<?= $_POST['order_id'] ?>')">Cancel</button> 
    
    <script>
     function viewOrder(order_id, order_id, user_id, order_date, order_time, order_deliveryCharge, order_totalAmount, address, coordinates, driver_number, order_status) {
     document.getElementById("t_order_id").setAttribute("value", order_id); 
     document.getElementsByName("ORDER_ID_MODAL_2")[0].setAttribute("value", order_id);
     document.getElementById("t_user_id").setAttribute("value", user_id);
     document.getElementById("t_order_date").setAttribute("value", order_date); 
     document.getElementById("t_order_time").setAttribute("value", order_time); 
     document.getElementById("t_order_deliveryCharge").setAttribute("value", order_deliveryCharge); 
     document.getElementById("t_order_totalAmount").setAttribute("value", order_totalAmount); 
     document.getElementById("t_address").setAttribute("value", address);
     document.getElementById("t_coordinates").setAttribute("value", coordinates); 
     document.getElementById("t_drivers_number").setAttribute("value", driver_number); 
     document.getElementById("t_order_status").setAttribute("value", order_status);
     document.getElementById("ORDER_MODAL_ACCEPT").setAttribute("value", order_id);
     document.getElementById("ORDER_MODAL_DELIVER").setAttribute("value", order_id);
     document.getElementById("ORDER_MODAL_CANCEL").setAttribute("value", order_id); 
     }
    function accept() { 
    
        var x = document.getElementById("t_order_status").value;
    
     if(x == "Accepted"){
         document.getElementById("submitAccept").disabled = true;
     }
    }
    </script>

Please help me guys with my problem. If you have other suggestion/idea how can I solve this problem feel free to comment guys. I really appreciate it a lot guys, Thanks!

Dragon12
  • 7
  • 2
  • You really should be setting the value property directly not setting it as an attribute. – epascarello Oct 06 '17 at 18:05
  • https://stackoverflow.com/questions/13831601/disabling-and-enabling-a-html-input-button – epascarello Oct 06 '17 at 18:07
  • @epascarello Like this, var x = document.getElementById("t_order_status").setAttribute("value"); ? – Dragon12 Oct 06 '17 at 18:09
  • no `document.getElementById("ORDER_MODAL_CANCEL").setAttribute("value", order_id);` should be `document.getElementById("ORDER_MODAL_CANCEL").value =order_id;` – epascarello Oct 06 '17 at 18:10
  • @epascarello thats alright man. I tried using this var btn = document.getElementById("submitAccept"); btn.disabled = false; But it didn't disable the Accept button, my mind is blank right now please help me man :( – Dragon12 Oct 06 '17 at 18:22
  • Why are you disabling it on click of that button? Is that when you want it to happen? – epascarello Oct 06 '17 at 19:59
  • @epascarello yeah bro, When I click Accept button It will disabled. and it disabled if the order_status is Accepted – Dragon12 Oct 07 '17 at 03:53

0 Answers0