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>

ɹɐqʞɐ zoɹǝɟ · Accepted Answer · 2014-05-20 04:39:14Z

2

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>

edited May 20, 2014 at 4:39

answered May 19, 2014 at 2:07

ɹɐqʞɐ zoɹǝɟ

4,3703 gold badges25 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

user3631428 Over a year ago

The value of selectbox is the one who use to get information in database. What I need is to post the other information to it's designated textboxes based on value of selectbox.

user3631428 Over a year ago

Where should I place this in ajax? Pardon me not that good in jquery/ajax.

user3631428 Over a year ago

I'll make just a try, sorry now I understand :)

user3631428 Over a year ago

my problem is how I can post the value in right fields. pr value should post only in pr_num field.

ɹɐqʞɐ zoɹǝɟ Over a year ago

simple $("#pr_num").val()=pr; the value in pr will be added to pr_num textbox. FIRST you check whether you are getting the values or not,just try alert(pr);

|

Dean · Accepted Answer · 2014-05-19 02:37:30Z

0

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>

edited May 19, 2014 at 2:37

answered May 19, 2014 at 2:21

Dean

5176 gold badges13 silver badges35 bronze badges

4 Comments

user3631428 Over a year ago

Pardon me, but I don't know how to use JSON. Can give me a sample?

Dean Over a year ago

Added an example, Something similar to this should do the trick!

user3631428 Over a year ago

how to send the output to it's own textboxes? I should create another like this $('#supplier').val(data); ?

Dean Over a year ago

Yeah i think so, I would just create them and set the values

Collectives™ on Stack Overflow

Post multiple value using ajax

2 Answers 2

13 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related