Post multiple value using ajax

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>