Disabling/Enabling a button through button click

I am displaying SQL data in rows and each row contains “Add To Zip” Button. The button for each row is enabled. I want to disable the current row’s button on click. I later want to re-enable these disabled buttons through another button in a different php file. How do I achieve this? Also, please do not point to SQL injection, I have used login details to check if the correct credentials are added or not and I will be only posting the code that I think is relevant to this question.

FetchData.php

...
if(mysqli_num_rows($result) > 0)
{
 $output .= '<h4 align = "center">Search Result</h4>';
 $output .= '<div class="table-responsive">
                <table class = "table table bordered">
                   <tr>
                        <th>ID</th>                                 
                    </tr>';
                    
    while($row = mysqli_fetch_array($result))
    {
                
        $output .= '
                <tr>
                    <td>'.$row["ID"].'</td>
                    <td><button type="button" class="btn btn-primary" onclick="addToPdf(''.$row["ID"].'', this)"><i class="fa fa-pdf" aria-hidden="true"> </i>Add to Zip</button></td>
                </tr>
            ';
    }
    echo $output;
    
}
...

AddToZip.php

...
...
$sql = "INSERT INTO Zip (ID)
VALUES ('$id')";

if ($conn->query($sql) === TRUE) {
    echo "New record created successfully";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();

header("Refresh: 0");
...
...

EDIT: I am using AJAX to display the fetched values from FetchData.php

Index.php

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>LiveData</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
 </head>
 <body>
  <div class="container">
   <br />
   <h2 align="center">Live Data Search</h2><br />
   <div class="form-group">
    <div class="input-group">
     <span class="input-group-addon">Search</span>
     <input type="text" name="search_text" id="search_text" placeholder="Search by ID" class="form-control" />
    </div>
    
   </div>

   <br />
   <div id="result"></div>
  </div>
 </body>
</html>


<script>
$(document).ready(function(){
    $('#search_text').keyup(function(){
        var txt = $(this).val();
        if(txt != '')
        {
            $.ajax({
                url:"FetchData.php",
                method: "post",
                data: {search:txt},
                dataType: "text",
                success: function(data)
                {
                    $('#result').html(data);
                }
            });
        }
       });

});

    var addToPdf = function(id, btn) {
    $.get({
        url:"AddToZip.php?id=" + id,
        success: function(data) {
            btn.disabled = true;
            
        }
    });
  };

</script>

...
...

Answer

There are a couple of issues with your HTML markup. I.e. you have a <button> tag inside an anchor <a> tag which is technically incorrect. However, you most likely have some Bootstrap styling on the button tag and are only using the anchor to action the AddToZip.php call right?

If that’s the case, I would rather strip out the <a> tag and use an onclick method on the <button>. An example:

Replace

<td><a href="AddToZip.php?id='.$row["ID"].'" target="target"><button  id="pdf" name="AddToZip" action="" class="btn btn-primary"><i class="fa fa-pdf"" aria-hidden="true"> </i>Add to Zip</button></a></td>
<iframe style="display:none;" name="target"></iframe>

With

<td><button id="pdf" name="AddToZip" type="button" class="btn btn-primary" onclick="document.getElementById('frame-x').src='AddToZip.php?id='.$row["ID"].''; this.disabled = true;"><i class="fa fa-pdf" aria-hidden="true"> </i>Add to Zip</button></td>
<iframe style="display:none;" name="target" id="frame-x"></iframe>

To be clear

This is not an ideal solution, just a quick fix to achieve what the OP asked for help with. To the OP, I highly recommend using an Ajax call of sorts to communicate to the back-end.

I suggest looking into jQuery’s AJAX API

Update after OP updated Question

So now that I see you are using jQuery AJAX calls, add a function to your script section:

<script>

$(document).ready(function(){
    ...
};


var addToPdf = function(id, btn) {
    $.get({
        url:"AddToZip.php?id=" + id,
        success: function(data) {
            btn.disabled = true;
        }
    });
};
</script>

Then change your markup to this (remove the iframe as well):

<td><button type="button" class="btn btn-primary" onclick="addToPdf(''.$row["ID"].'', this)"><i class="fa fa-pdf" aria-hidden="true"> </i>Add to Zip</button></td>

Advertisement

Answer

To be clear

Update after OP updated Question