CODEWITHSUNDEEP
phpajax
Yakubu Ope'Damilola
Yakubu Ope'Damilola

Reputation: 1

I want to select multiple data using AJAX

I have a search box using AJAX and PHP, it is working, but I want to do more than a single search so that when I search again, it will add the result to the previous search on a table instead of replacing the result of the previous search.

In the below code, when I run it, it searches the database and returns the result on the table on my index.php page, but when I search using another barcode, it will bring the result but replace the previous result, I want to add the new result on the previous result brought.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="pt" dir="ltr">

<head>

  <title>Search And Show Without Refresh</title>

  <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
  <meta http-equiv="Content-Style-Type" content="text/css">

  <!-- JQUERY FROM GOOGLE API -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

  <script type="text/javascript">
    $(function() {
      $("#lets_search").bind('submit', function() {
        var value = $('#str').val();
        $.post('process.php', {
          value: value
        }, function(data) {
          $("#search_results").html(data);
        });
        return false;
      });
    });
  </script>

</head>

<body>

  <div>
    HEADER
  </div>
  <div>
    <form id="lets_search" action="">
      Search:<input type="text" name="str" id="str">
      <input type="submit" value="send" name="send" id="send">
    </form>
    <div id="search_results"></div>
  </div>
  <div>
    FOOTER
  </div>

</body>

</html>

This is the process.php codethis is the result am getting This php code is only returning a single result as usual and its replacing the already generated result

<?php

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

    ############## Make the mysql connection ###########

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

    #$db = mysql_select_db(DB) or die(DB_MSG_ERROR);

    $sel = ("
      SELECT *
      FROM total_items
      WHERE bar_code='" . $_POST['value'] . "'
    ");

    $res = $conn->query($sel);

    echo '<table>';

    while ($data = $res->fetch_array()) {

        echo '
      <tr style="background-color:pink;">
        <td style="font-size:18px;">' . $data[1] . '</td>
        <td style="font-size:18px;">' . $data[2] . '</td>
      </tr>';

    }

    echo '</table>';

?>

it is bringing only a single result and when I search again, it will replace the result generated before. I want it to add the new result to the previous result instead of replacing

Upvotes: 0

Views: 77

Answers (1)

Sanjit Bhardwaj
Sanjit Bhardwaj

Reputation: 893

In place of 

$("#search_results").html(data); // it replaces the data

write 

$("#search_results").append(data); // it appends the data with previous data there

Upvotes: 2

Related Questions