get mysql data to new table row with jquery

Question

I'm very green when using jquery and AJAX. Not sure if AJAX would help in this situation. I've looked at this question its the closest to what i'm looking for.

Add new row to table using jQuery on enter key button

var inp = $("#txt");
// where #txt is the id of the textbox

$(".table-cell-text").keyup(function (event) {
if (event.keyCode == 13) {
    if (inp.val().length > 0) {
      $('#myTable tr:last').replaceWith('<tr class="table-row"><td class="table-cell">' + inp.val() + '</td>' +
        '<td class="table-cell">' +
        '<td></td>' +
        '</td>' +
        '<td class="table-cell">' +
        '</td></tr>');
    }
}

}); 

FIDDLE

I have a MySQL DB that I would like data retrieved from based off of the sku # entered into their respective rows. I have this working with a submit button using PHP, but this is for a project I have that uses a Barcode scanner.

There is a second part to this question but i'll try to figure that out on my own first before asking.

Answer 1

I did some more diggin around and I was able to resolve some of the issues I was having. However, I still can't get data from the DB when a new row is added.

Below is my code:

<div class="row">
    <div class="col-md-1"></div>
    <div class="col-xs-3">
        <h3 class="h4 text-center"><input type="text" name="barcode"  id="txt" size="90" class="col-md-9" value="" placeholder="Barcode / Product Name"></h3>

</div>
</div>
<br />
<div class="row">
    <div class="col-md-1"><p class=""></p></div>
    <div class="col-md-6">
        <table id="report" class="table table-bordered table-hover">
            <thead>
                <tr>
                    <td>SKU</td>
                    <td>Model</td>
                    <td>Item Description</td>
                    <td>Qty</td>
                </tr>
            </thead>
            <tbody>
                <tr class='table-row'>


                </tr>
            </tbody>
        </table>
   </div>
  </div>


<script>
var inp = $("#txt");
// where #txt is the id of the textbox

$("#txt").keyup(function (event) {
if (event.keyCode == 13)
{
    if (inp.val().length > 0)
    {
        $.ajax({
            url: "index.php",
            type: "POST", //send it through POST method
            data: {id: inp.val()},
            success: function(response)
            {
                values = response.split(' - ');
                $('#report tr:last').after(
                    "<tr class='table-row'><td class=''>" + inp.val() + " </td>" +
                    "<td class=''>" + values[1] + "</td>" +
                    "<td class=''>" + values[2] + "</td>" +
                    "<td class=''>" + values[3] + "</td></tr>");
            }});
    }
    $('input[name=barcode]').val('');
}

});
</script>

Answer 2

I had limited success with the edited code. When I try to enter a different item # into the input field only the first value updates. Also, I'm trying to add a new row and retain the last row after entering a new value in the input field.

Here is the latest version of the script:

<script>
    var inp = $("#txt");
    // where #txt is the id of the textbox

    $("#txt").keyup(function (event) {
if (event.keyCode == 13)
{
    if (inp.val().length > 0)
    {
        $.ajax({
            url: "index.php",
            type: "POST", //send it through POST method
            data: {id: inp.val()},
            success: function(response)
            {
                values = response.split(' - ');
                $('#report tr:last').replaceWith(
                    "<tr class='table-row'><td class=''>" + inp.val() + "</td>" +
                    "<td class=''>" + values[1] + "</td>" +
                    "<td class=''>" + values[2] + "</td>" +
                    "<td class=''>" + values[3] + "</td></tr>");
            }});
    }
}

}});
</script>

Answer 3

<?

if (!empty($_POST))
{
    $db = new mysqli('localhost', 'root', 'password', 'table');
    $result = $db->query('SELECT * FROM `users` ');
    $result = $result->fetch_array();

    print($result['id'].' - '.$result['username'] .' - '.$result['password']);
    die();
}
?>

<!DOCTYPE html>
<html>
<head>
    <!-- head here -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div><input id="txt" placeholder="Enter barcode" type="text"></div>
<table id="myTable">
    <tr class="table-header">
        <td class="table-cell">SKU</td>
        <td class="table-cell">MODEL </td>
        <td class="table-cell">DESCRIPTION</td>
        <td class="table-cell">QTY</td>
    </tr>

    <tr class="table-row">

    </tr>
</table>

<script>
var inp = $("#txt");
// where #txt is the id of the textbox

$("#txt").keyup(function (event) {
    if (event.keyCode == 13)
    {
        if (inp.val().length > 0)
        {
            $.ajax({
                url: "test.php",
                type: "post", //send it through POST method
                data: {id: inp.val()},
                success: function(response)
                {
                    values = response.split(' - ');
                    $('#myTable tr:last').replaceWith('<tr class="table-row"><td class="table-cell">' + inp.val() + '</td>' +
                        '<td class="table-cell">' + values[0] +
                        '<td> ' + values[1] + '</td>' +
                        '</td>' +
                        '<td class="table-cell">' + values[2] +
                        '</td></tr>');
                }});
        }
    }

});
</script>


</body>

</body>
</html>

I tried with my dummy database with users and I get:

SKU MODEL DESCRIPTION QTY

40 1 Username 9z600248b669b62d75b300a07b89060n