Fetch value from database into dynamically added row

Question

I am new in PHP programming, Now I am creating program for billing system. I have created a table and adding row into table dynamically, this works fine. Now i want to add values from database to that dynamically added row, please tell me how to add values. Here is my code of form

      <form style="margin-left: 200px; padding: 10px; background: yellow;     width:         500px;" action="bill.php" method="post" name="transaction" id="transaction">
        <span style="color: black">Receipt      No:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="rcptNo" id="rcptNo" /></br></br>

        <label for="student name"><span style="color: black">Customer Name:</span></label>
        <select name="st_name" id="st_name">
            <option value="">Select..</option>  
        </select></br></br>
        <label for="academic year"><span style="color: black">Academic Year:</span>&nbsp;&nbsp;</label>
        <select name="acad_year" id="acad_year">
            <option value="">Select..</option> 
        </select></br></br>
        <label for="item name"><span style="color: black">Item Name:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</label>
        <select name="item_name" id="item_name">
            <option value="">Select..</option>    
        </select>

        <input type="button" name="addItem" id="addItem" value="ADD ITEM"  /></br></br>
        <!--<div id="items1"><b></b></div>-->

        <table id="items" border="2" width="400px" cellpadding="4" cellspacing="1">

            <tr>
                <!--<th>Sr.No</th>-->
                <th>Item Name</th>
                <th>Unit Cost</th>
                <th>Quantity</th>
                <th>Total</th>
            </tr>

            <tbody>

            </tbody>
        </table>
    </form>

And here is JQUERY code

var cnt = 2;
$("#addItem").click(function() {       
        $('#items tr').last().after('<tr><td>' + cnt + '</td><td>' + cnt + '</td><td><input type="text" name="txtbx' + cnt + '" value="' + cnt + '"></td></tr>');
        cnt++;
});

So please tell me, how can i add the item name and unit price from database to that dynamically added row?

Thanks in advance.

Answer 1

I'm assuming you have a SQL database. What flavor of SQL is it?

One way you could do it is to use an Ajax call to grab the database info, and then use that in your dynamically created table.

Your ajax could look something like:

$.ajax({
  url: "http://locationofyourdbhook",
})
  .done(function( data ) {
    if ( console && console.log ) {
      $('#items tr').last().after('<tr><td>' + data.cnt + '</td><td>' + data.cnt +        '</td><td><input type="text" name="txtbx' + data.cnt + '" value="' + data.cnt + '"></td>  </tr>');
    cnt++;
    }
  });

Answer 2

You should create a PHP page to retreive your database data. For example database.php . Then send an ajax request to that page as shown below. From the ajax response you can add details to row.

var cnt = 2;
$("#addItem").click(function() {
    $.ajax({
        url: "database.php",
    }).done(function(data){
        if (data) {
            $('#items tr').last().after('<tr><td>' + data.cnt + '</td><td>' + data.cnt + '</td><td><input type="text" name="txtbx' + data.cnt + '" value="' + data.cnt + '"></td>  </tr>');
            cnt++;
        }
    });
});

NOTE : For ajax reference:

https://api.jquery.com/jQuery.ajax/

http://www.w3schools.com/jquery/ajax_ajax.asp