Keep button disabled till the current page reloads (using Jquery)

I have a search bar in index.php and when I type an ID, the SQL data is fetched from fetch.php. The fetch.php contains “AddToZip” button for each row of SQL data. When I click on a selected button, the selected button is disabled (going properly till here). But when I clear the search bar to write a different ID or perhaps same ID, all the disabled buttons of “AddToZip” are reactivated/enabled. How do I keep them disabled when the user uses the search bar multiple times and they anyhow get enabled only when the user refreshes the page.

index.php

<php code>

<?php
session_start();
...
...
...
?>

<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>
   <p>
        <a href="logout.php" class="btn btn-danger">Sign Out of Your Account</a>
        
    </p>
    
   <br />
   <div id="result"></div>
  </div>
</html>



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

</script>

<script>

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

JavaScript
​x
 
<php code>​<?phpsession_start();.........?>​<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>   <p>        <a href="logout.php" class="btn btn-danger">Sign Out of Your Account</a>            </p>       <br />   <div id="result"></div>  </div></html>​​​<script>$(document).ready(function(){    $('#search_text').keyup(function(){        var txt = $(this).val();        if(txt != '')        {            $.ajax({                url:"fetch.php",                method: "post",                data: {search:txt},                dataType: "text",                success: function(data)                {                    $('#result').html(data);                }            });        }        else            if(txt == '')        {            $.ajax({                url:"null.php",                method: "post",                data: {search:txt},                dataType: "text",                success: function(data)                {                    $('#result').html(data);                }            });        }                        });});​</script>​<script>​    var addToZip = function(id, btn) {        $.ajax({                url:"AddToZip.php?id=" + id,        success: function(data) {            btn.disabled = true;        }    });};</script>​​

fetch.php

<?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="addToZip(''.$row["ID"].'', this)"><i class="fa fa-pdf" aria-hidden="true"> </i>Add to Zip</button></td>
                </tr>
            ';
    }
    echo $output;
    
}
...

?>

JavaScript
 
<?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="addToZip(''.$row["ID"].'', this)"><i class="fa fa-pdf" aria-hidden="true"> </i>Add to Zip</button></td>                </tr>            ';    }    echo $output;    }...​?>​

Answer

Can you add the code of AddToZip.php ?

You could store all ids into a session value, and check if the id is containt inside this array on your fetch.php.

AddToZip.php :

session_start();
if (!isset($_SESSION['added_to_zip_ids']))
    $_SESSION['added_to_zip_ids'] = [];
if (array_search($_GET['id'], $_SESSION['added_to_zip_ids']) === false)
    $_SESSION['added_to_zip_ids'][] = $_GET['id'];

JavaScript
 
session_start();if (!isset($_SESSION['added_to_zip_ids']))    $_SESSION['added_to_zip_ids'] = [];if (array_search($_GET['id'], $_SESSION['added_to_zip_ids']) === false)    $_SESSION['added_to_zip_ids'][] = $_GET['id'];​

fetch.php :

<?php
...

session_start();
if (!isset($_SESSION['added_to_zip_ids']))
    $_SESSION['added_to_zip_ids'] = [];

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 '.(array_search($row["ID"], $_SESSION['added_to_zip_ids']) === false ? '' : 'disabled').' type="button" class="btn btn-primary" onclick="addToZip(''.$row["ID"].'', this)"><i class="fa fa-pdf" aria-hidden="true"> </i>Add to Zip</button></td>
                </tr>
            ';
    }
    echo $output;
    
}
...

?>

JavaScript
 
<?php...​session_start();if (!isset($_SESSION['added_to_zip_ids']))    $_SESSION['added_to_zip_ids'] = [];​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 '.(array_search($row["ID"], $_SESSION['added_to_zip_ids']) === false ? '' : 'disabled').' type="button" class="btn btn-primary" onclick="addToZip(''.$row["ID"].'', this)"><i class="fa fa-pdf" aria-hidden="true"> </i>Add to Zip</button></td>                </tr>            ';    }    echo $output;    }...​?>​

And to clear the stored values, you have two solutions :

Keep other session datas

session_start();
if (isset($_SESSION[‘added_to_zip_ids’]))
unset($_SESSION[‘added_to_zip_ids’]);
Clear everything

session_start();
session_unset();

These line can be anywhere on the server.

Advertisement

Answer