How to load data from Database with jquery?

Question

I have one Sales Form,

<div class="form-group">
  <input type="text" class="form-control" id="id_barang"  placeholder="Barcode" required>
</div>
<div class="form-group">
  <input type="text" class="form-control" id="nama"  placeholder="Product Name" readonly >
</div>
<div class="form-group">
  <input type="text" class="form-control" id="harga"  placeholder="Price" readonly >
</div>
<div class="form-group">
  <input type="text" size="2" class="form-control" id="stok"  placeholder="Qty" readonly>
</div>
<div class="form-group">
  <input  type="text" size="2" class="form-control" id="jumlah"  placeholder="Total" required>
</div>   

<button type="submit" class="btn btn-primary">Add</button>
<button type="submit" class="btn btn-warning">Cancel</button>
</div>

i don't know what have to do, i have tried "Google" about tutorial of my problem, if we input "barcode" or "ID", then automatically "product name, price, Qty" will show up in their field.

you can do it with ajax request of Jquery or `$.get` or `$.post` all will perform this task for you. — Naveed Yousaf, Mar 07 '14 at 06:47
there is one `` to much (at the end) - might be a copy/paste mistake — Mr. iC, Mar 07 '14 at 07:11

score 2 · Accepted Answer · answered Mar 07 '14 at 06:49

Like @Arun P Johny mentioned, ajax is what you would be using with jQuery...

However, you need to understand the way that your backend code is accessing information from the database, (which would require communicating with your backend coders on how to access the information... i.e. constructing a sensible API).

If you look at how social media platforms release documentation on their API, you'll notice how they have certain patterns on retrieving data from their sources, and likewise, you should consider adopting similar practices.

Note

Apologies for not being able to answer fully without code, but without any context of how your backend is accessible, I severely doubt the SO community can assist further

score 0 · Answer 2 · answered Mar 07 '14 at 06:49

0

By using jQuery.ajax() you can simply load the datas

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

answered Mar 07 '14 at 06:49

Sarath

608
4
12

score 0 · Answer 3 · answered Mar 07 '14 at 06:55

you can make via ajax calls using jquery, see the sample below.

$.ajax({
            type: "POST",
            url: 'xxxx.aspx/methodname',
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                for (var i = 0; i < data.d.length; i++) {
                    $("#tbl").append("<tr><td>" + data.d[i].PONumber + "</td></tr>");
                }
            }
        });

You can make this call on document.ready() method or via function call on button click event

You can find more info on making ajax calls using jquery

score 0 · Answer 4 · answered Mar 07 '14 at 07:00

In HTML, add another input box for the barcode of the product:

<input type="text" id="barcode"  placeholder="Barcode">

And, on the javascript, add an event handler for the barcode input:

$('#barcode').on('change', function(){
    var barcode = $(this).val();
    $.ajax({
        // Do the AJAX call here to retrieve the product information based on the barcode
        // , then update those 4 input elements accordingly
    });
});

score 0 · Answer 5 · edited May 23 '17 at 12:02

0

if you want to access data from back-end by jquery you have to use ajax ,in html when clicked on button send an id it should be exist in database then you have write code for fetching data,then you have to display . $.jquery ajax returned data (json) displays as 'undefined'

edited May 23 '17 at 12:02

Community

1
1

answered Mar 07 '14 at 07:16

krishna_coolsofty

21
3

How to load data from Database with jquery?

5 Answers5