CODEWITHSUNDEEP
javascriptjqueryhtml
mishal
mishal

Reputation: 63

one button get disabled when the other button is clicked

I m totally new to Coding and my friend suggested me to learn php, so he gave me small project which i should try and that is a employee portal. i am stuck with one thing.

i need a accept reject button where when i click approve button the reject button should be disabled and the value in the button should be automatically updated in the database and vice versa. One more thing is that when i click reject button a comment box should pop up and the values entered should be added to database

<!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    <?php
    include'nav.php';

    $servername = "127.0.0.1";
    $username = "root";
    $password = "";
    $dbname = "";

    $conn = new mysqli($servername, $username, $password, $dbname);


    if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
    }


    $sql=mysqli_query($conn, "SELECT user, leavetype, date, date1, numb, comment FROM lms");
    /*$result= $conn->query($sql);*/

    if ($sql) {
    if ($sql->num_rows > 1) {
    echo "<table class='table table-hover'><tr><td>User</td><td>Leave type</td><td>From date</td><td>To date</td><td>Number of days</td><td>Reason for leave</td><td></tr>";      
    while( $row=mysqli_fetch_array($sql)) 
    {
    echo "<tr><td id='rowhead'>$row[0]</td><td>$row[1]</td><td>$row[2]</td><td>$row[3]</td><td>$row[4]</td><td>$row[5]</td><td><button type='button' class='btn btn-success'>Approve</button> | <button type='button' class='btn btn-danger'>Rejected</button></td></tr>";
    }
      echo'</table>';
    }
    else {
    echo "<br> No Record Found to display";
    }
    }
    else {
    echo "<br> Database error.";
    }
    $conn->close();
    ?>

    </body>
    </html>

Upvotes: 0

Views: 2596

Answers (3)

Shakti Phartiyal
Shakti Phartiyal

Reputation: 6254

In your code you can follow the simple approach:

<button type='button' class='btn btn-success' id="accept" onClick="document.getElementById('reject').setAttribute('disabled',true);">Approve</button> | <button type='button' class='btn btn-danger' id="reject" onClick="document.getElementById('accept').setAttribute('disabled',true);">Rejected</button>

What we did here was:

Assign an id to each button called accept and reject.

On click of one button we disabled the other:

the JS code to disable is the following which id called when the button is clicked using onclick handler:

document.getElementById('THE_ID').setAttribute('disabled',true);

Upvotes: 1

Kinjal Akhani
Kinjal Akhani

Reputation: 168

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script>
    function approveData(){
        alert("Popup : Data will be approved");
        $('#reject').attr('disabled','disabled');
    }
    function rejectData(){
        alert("Popup : Data will be reject");
        $('#approve').attr('disabled','disabled');
    }
  </script>
<input type="button" id="approve" value="Approve" onclick="approveData()"/>
<input type="button" id="reject" value="Reject" onclick="rejectData()"/>

Upvotes: 0

Sarika Koli
Sarika Koli

Reputation: 783

$(document).ready(function(){
  $("#comment").hide();
    $("#accept").click(function(){
    $("#reject").attr('disabled','disabled');
     $("#accept").removeAttr('disabled');
    });
    $("#reject").click(function(){
      $("#accept").attr('disabled','disabled')
       $("#reject").removeAttr('disabled');
       $("#comment").show();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="accept" id="accept"/>
<input type="button" value="reject" id="reject"/>

<p><textarea id="comment"></textarea></p>

Upvotes: 0

Related Questions