disable two buttons after clicking another button-CodePudding

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 >
    <button  type="submit" id="approve_button" data-toggle="modal" data-target="#approveModal">Approve</button>   
    <button  type="submit" id="return_button" data-toggle="modal" data-target="#returnModal">Return</button>       
    </div>


<div>
<button   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']);
    }
    ?>

CodePudding user response：

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");
  });
});

CodePudding user response：

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");
  });
});

CodePudding user response：

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>