Post multiple value using ajax - php

Question

How I can post all the information in database to it's designated textboxes. I need to post the value on textboxes for example, Pr # data into pr_num textboxes and so on. The problem is my ajax function is only for one textboxes. How I can post it in every textboxes? Any Help will appreciate.
Table Structure
Pr # | Supplier | Receipt # | Receiver |
--------------------------------------------
321-B | Villman | 312312331 | John |
556-B | Dockers | 903232317 | William |
Ajax.php
<?php
if(isset($_POST['pr_code'])) {
$pr_code= $_POST['pr_code'];
$sql = $mysqli->query("SELECT * FROM pr_table WHERE pr='$pr_code'");
while($row = $sql->fetch_assoc())
{
$pr= $row['pr'];
$supplier = $row['supplier'];
$receipt_num= $row['receipt_num'];
$receiver= $row['receiver'];
}
echo $pr;
echo $supplier;
echo $receipt_num;
echo $receiver;
}
?>
index.php
<select id="pr">
<?php ... ?>
</select>
<input id="pr_num">
<input id="supplier">
<input id="receipt">
<input id="receiver">
<script type="text/javascript">
$(document).ready(function()
{
$('input[id="pr"]').change(function()
{
var prjt_code = $("#pr").val();
$.ajax({
type: "POST",
url: "ajax.php",
data :"pr_code="+pr_code,
dataType:'html',
type:'POST',
success:function(data){
$('#pr_num').val(data);
}
});
return false;
});
});
</script>

Answer 1

get the other textbox values also and post like below
var pr_num= $("#pr_num").val();
var supplier= $("#supplier").val();
var receipt= $("#receipt").val();
var receiver= $("#receiver").val();
and in ajax
data :{"pr_code":pr_code,"supplier":supplier,"receipt":receipt_num,"receiver":receiver}
UPdate
in php do like this
echo json_encode(array("pr" => $pr, "supplier" => $supplier,"receipt_num"=>$receipt_num,"receiver"=>$receiver));
in ajax
get values like
var pr=data.pr;
var supplier=data.supplier;
var receipt_num=receipt_num;
var receiver=receiver;
UPDATE2
you have to add another option value,so that the onchange event will fired. If you have only one value then the change event will not be called.So add another option.
and why are you printing echo $option; outside option tag??
<select id="tag">
<option value="">wala</option><?php echo $option; ?>//what are you trying to do here
</select>

Answer 2

Encode the mysql query results into a json array, then in your javascript function, parse the data with JSON.parse, then loop over it and create the elements using the pr id and set the values or dynamically create the form elements from here
<?php
if(isset($_POST['pr_code']))
{
$pr_code= $_POST['pr_code'];
$sql = $mysqli->query("SELECT * FROM pr_table WHERE pr='$pr_code'");
while($row = $sql->fetch_assoc())
{
$results[$i++] = $row;
}
json_encode($results);
}
?>
<input id="pr_num">
<input id="supplier">
<input id="receipt">
<input id="receiver">
<script type="text/javascript">
$(document).ready(function()
{
$('input[id="pr"]').change(function()
{
var prjt_code = $("#pr").val();
$.ajax({
type: "POST",
url: "ajax.php",
data :"pr_code="+pr_code,
dataType:'html',
type:'POST',
success:function(data)
{
var json = JSON.parse(data);
$.each(json, function(item)
{
//assuming the field names are "pr", "supplier", "receipt", "receiver"
var pr_code = json[item].pr;
var supplier = json[item].supplier;
var receipt = jsonitem].receipt;
var receiver = json[item].receivor;
//TODO: display results here
});
$('#pr_num').val(data);
}
});
return false;
});
});
</script>