'disable two buttons after clicking another button

so i need to be able to disable two buttons (approve and return button) once i successfully click the close button. can anyone help me? the first part of the code are the buttons i need to disable.

<div class="text-center ">
    <button class="btn m-1 align-items-center btn-success text-center " type="submit" id="approve_button" data-toggle="modal" data-target="#approveModal">Approve</button>   
    <button class="btn btn-secondary m-1 align-items-center text-center" type="submit" id="return_button" data-toggle="modal" data-target="#returnModal">Return</button>       
    </div>


<div>
<button class="btn btn-danger m-5 align-items-center text-center"  id="reject_button" name="reject_button" data-toggle="modal"data-target="#rejectModal" >Close Task</button>
</div>
<?php 
if (isset($_POST["reject-btn"])){ 
    
    $rejectt = mysqli_real_escape_string($con, $_POST["rejectt"]);
    $sql = "UPDATE task SET task_status='closed'  WHERE id_task='$rejectt' ";
    $result_rej = mysqli_query($con, $sql);
    if ($result_rej) {
        $_SESSION['success'] = "Task closed";
        $_SESSION['text'] = "Task has been closed successfully";
        $_SESSION['icon'] = "success";
   
    } else {
        $_SESSION['success'] = "Error";
        $_SESSION['text'] = "Unknown error, please try again";
        $_SESSION['icon'] = "error";
    }

 }
?>
   <?php
    if (isset($_SESSION['success']) && $_SESSION['success'] != '') {
    ?>
        <script>
            swal({
                title: "<?php echo $_SESSION['success']; ?>",
                text: "<?php echo $_SESSION['text']; ?>",
                icon: "<?php echo $_SESSION['icon']; ?>",
                button: "OK";
                
            });
        </script>
    <?php
        unset($_SESSION['success']);
    }
    ?>
phphtmlbuttondisable


Solution 1:[1]

You can add disabled attribute to buttons when clicked #reject_button by using jQuery

$(document).ready(function(){
  $("#reject_button").click(function(){
     $("#approve_button, #return_button").attr("disabled","true");
  });
});

Solution 2:[2]

You can add a disabled attribute to buttons when clicked #reject_button by using normal javascript

document.querySelector(document).ready(function(){
  document.querySelector("#reject_button").click(function(){
     document.querySelector("#approve_button, #return_button").attr("disabled","true");
  });
});

Solution 3:[3]

You can do this using a simple JS event handler. The provided example is one way. If you need to enable them again in the future, you'll need a separate event handler to remove the disabled attribute.

<script>
//you can replace querySelector with getElementById, but I prefer the flexibility of query selector
  document.querySelector('#reject_button').addEventListener('onclick', () => {
    document.querySelector('#approve_button').setAttribute('disabled',"");
    document.querySelector('#return_button').setAttribute('disabled',"");
  });
</script>

Solution 4:[4]

If you need them disabled even after page refresh then you can use this. But most convenient way is you should try to save the button status in database.

<div class="text-center ">

    <?php if(isset($_SESSION['disable-buttons']) ){
                if($_SESSION['disable-buttons'] == true){

                    $disabled = "disabled";

                }else{

                $disabled = "";
                
                } 
        }

     ?>

    <button class="btn m-1 align-items-center btn-success text-center " type="submit" id="approve_button" data-toggle="modal" data-target="#approveModal" <?php echo $disabled ?> >Approve</button>   
    <button class="btn btn-secondary m-1 align-items-center text-center" type="submit" id="return_button" data-toggle="modal" data-target="#returnModal" <?php echo $disabled ?> >Return</button>       
    </div>


<div>
<button class="btn btn-danger m-5 align-items-center text-center"  id="reject_button" name="reject_button" data-toggle="modal"data-target="#rejectModal" >Close Task</button>
</div>
<?php 
if (isset($_POST["reject_button"])){ 

    $_SESSION['disable-buttons'] = true; 
    
    $rejectt = mysqli_real_escape_string($con, $_POST["rejectt"]);
    $sql = "UPDATE task SET task_status='closed'  WHERE id_task='$rejectt' ";
    $result_rej = mysqli_query($con, $sql);
    if ($result_rej) {
        $_SESSION['success'] = "Task closed";
        $_SESSION['text'] = "Task has been closed successfully";
        $_SESSION['icon'] = "success";
   
    } else {
        $_SESSION['success'] = "Error";
        $_SESSION['text'] = "Unknown error, please try again";
        $_SESSION['icon'] = "error";
    }

 }
?>
   <?php
    if (isset($_SESSION['success']) && $_SESSION['success'] != '') {
    ?>
        <script>
            swal({
                title: "<?php echo $_SESSION['success']; ?>",
                text: "<?php echo $_SESSION['text']; ?>",
                icon: "<?php echo $_SESSION['icon']; ?>",
                button: "OK";
                
            });
        </script>
    <?php
        unset($_SESSION['success']);
    }
    ?>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Satish Thakur
Solution 2 Dean Van Greunen
Solution 3 pdmoerman
Solution 4 Satish Thakur

Related Questions