Member Avatar for newmaster

I need autofill script but i dont know where to begin
I have mysql databese table like this (records aprox. 400):

id | product name | barcode | quantity | price
-------------------------------------------------------------
1 | procuct 1 | 0000001 | 21 | 12
2 | procuct 2 | 0000002 | 23 | 5
3 | procuct 3 | 0000003 | 87 | 54
4 | procuct 4 | 0000004 | 98 | 23

and i have form:

<html>
<head>
<title>Untitled Document</title>
</head>

<body>
<form id="sell">
Product name:     <input name="txt_product_name" type="text" value="" />
Product barcode:       <input name="txt_product_barcode" type="text" value="" />
Product quantity: <input name="txt_product_quantity" type="text" value="" />
Product price:     <input name="txt_product_price" type="text" value="" />
<br>
<input name="Send" type="button" value="Send">
</form>
</body>
</html>

What i want is when user type barcode it must fill out other (product name, quantity, price) fills and must send the form.
I am new in JSON, AJAX, JQUERY. so i can not choose which one to use. which one works faster with many records. I wrote some scripts but all is not working :(

  • 2 Contributors
  • 3 Replies
  • 138 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

nM,

This is a choice you don't have to make, reason being that AJAX, JSON and jQuery are not mutually exclusive.

jQuery - A general purpose javascript lib.
AJAX - a portmanteau term for the use of javascript to make an HTTP request from a web page and to handle the response, without refreshing the whole page.
JSON - a notation for encoding objects/arrays as strings for transmission - eg. as an AJAX response.

Since jQuery supports both AJAX and JSON, it is not at all unusual to employ all three elements to perform a round trip to the server and handle the response to make something happen on a web page.

Typically, you will develop your javascript alongside a server-side script (eg. php), which will respond to the AJAX request (eg. query a database and return a json-encoded response).

Airshow

Member Avatar for newmaster

Thanks Airshow. Your advice puts me on way
I have made php file

<?php 
$host="localhost";
$username="root";
$password="";
$database="proshop";

$con=mysql_connect($host,$username,$password) or die(mysql_error());
mysql_select_db($database,$con) or die(mysql_error());

$arr=array();
$result=mysql_query("SELECT * FROM product_table WHERE product name ORDER BY product name",$con) or die(mysql_error());
if(mysql_num_rows($result)>0){
    while($data=mysql_fetch_row($result)){
        // Store data in array
        $arr[]=array("product" => $data[1], "barcode" => $data[2], "quantity" => $data[3], "price" => $data[4]);
    }
}

mysql_close($con);

// Encode it with JSON format
echo json_encode($arr);
?>

What is the next? :)

Member Avatar for Airshow

nM,

Now you need to write a .html page with the following features:

  • A <script src="..."></script> tag to install jQuery in the page.
  • A standard <script></script> tag containing a structure of the form given below.
  • An HTML element (eg a BUTTON) to cause an event which will stimulate an AJAX request.
  • One or more HTML containers (eg DIVs) in which the AJAX response will be displayed.
$(document).ready(function(){
  $("#myButton").click(function(){
    $.ajax({
      url: 'xxxxxx.php',
      type: "GET",
      dataType: "JSON",
      success: function(response){
        //At this point, response is a javascript array, which mirrors the php array $arr.
        //Here write standard javascript (DHTML) or jquery to loop through response and put the processed response into your container(s).
        //clue: use jQuery's $.each(...) to loop, $.("<DIV>") to create nested containers, $.html(...) to put content into the nested containers, and $.append() to put the created containers into a container on the page. 
      },
      error: function(){
        alert('AJAX error');
      }
    });
  });
});

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.