Question posted in
You can find the official documentation here.

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

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>

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;
    
}
...

?>
Tags:

2

Answers


  1. 0

    I would recommend to use the event handler ‘keyup’ (as you already do) and / or the ‘change’ handler to activate a function (e.g. check_disable_status)

    $('#search_text').keyup(check_disable_status)
$('#search_text').change(check_disable_status)

    and you should start this function also on "ready" state of the DOM.

    In this function you just check the current "STATE" of your field, or maybe other dependencies for your business logic and set the field always in ENABLED or DISABLED state.

    Login or Signup to reply.
  2. 0

    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'];

    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;
    
}
...

?>

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

    1. Keep other session datas

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

    2. Clear everything

      session_start();
      session_unset();

    These line can be anywhere on the server.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search