Load JSON data through jQuery and PHP - php

Question

I am trying to send a textbox value (invoice number) to a PHP file through jQuery and AJAX. From the PHP file, I am returning the JSON encoded data. I want to display the values fetched from the database in the following textboxes (Total Amount, Balance Amount) and select boxes (Payment mode, Payment status).
I am not getting the output I wish. Where am I going wrong?
HTML:
<form name="inv_payment" method="post" action="" style="margin:0px;width:400px;">
<fieldset>
<legend>Payment details</legend>
<label for=inv_num>Invoice Number</label>
<input id=inv_num name=inv_num type=number placeholder="12345" required autofocus >
<input type=button name="get_details" id="get_details" value="Get Details" >
<label for=tot_amt>Total Amount</label>
<input id=tot_amt name=tot_amt type=text placeholder="12345" disabled > <br/>
<label for=pay_up>Pay Up </label>
<input id=pay_up name=pay_up type=text placeholder="12345" required ><br/>
<label for=bal_amt>Balance Amount </label>
<input id=bal_amt name=bal_amt type=text placeholder="12345" disabled > <br/>
<label id="paymt_mode"><strong>Payment Mode</strong></label>
<select name="pay_mode" style="width: 130px">
<option selected="selected">Cash</option>
<option>Cheque</option>
</select><br/>
<label id="paymt_status"><strong>Payment Status</strong> </label>
<select name="pay_status" style="width: 130px">
<option selected="selected">Pending</option>
<option>Completed</option>
</select><br/>
<input type="submit" value="Payment" name="pay_btn">
</fieldset>
</form>
jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#get_details').click(function() {
//To pass the invoice number and fetch related details
$.getJSON("get_invpay_details.php", {id: $('#inv_num').val()}, function(data){
$('#tot_amt').val(data['Total_Amount']);
$('#bal_amt').val(data['Balance_Amount']);
$('#pay_mode').val(data['Payment_Type']);
$('#pay_status').val(data['Payment_Status']);
});
});
</script>
PHP:
<?php
include('includes/dbfunctions.php');
include('includes/db.php');
if(isset($_GET['id']))
{
$tmp = $_GET['id'];
$sql = mysql_query("select Total_Amount,Balance_Amount,Payment_Type,Payment_Status from invoice where InvoiceNum='$tmp'");
if(mysql_num_rows($sql))
{
$data = mysql_fetch_array($sql);
echo json_encode($data);
}
}
?>

Answer 1

Your json response value populate with object.data like this.
$('#tot_amt').val(data.Total_Amount);
$('#bal_amt').val(data.Balance_Amount);
$('#pay_mode').val(data.Payment_Type);
$('#pay_status').val(data.Payment_Status);
Here data is an object not a array.

Answer 2

I have checked my query.It gave me the correct output in mysql editor.
what i could see is.. you have a typo in your question...
missing }); for document.ready..which might be breaking your script..(this should have error in your console though..)..anyways something to check about..
$(document).ready(function() {
$('#get_details').click(function() {
//To pass the invoice number and fetch related details
$.getJSON("get_invpay_details.php", {id: $('#inv_num').val()}, function(data){
$('#tot_amt').val(data['Total_Amount']);
$('#bal_amt').val(data['Balance_Amount']);
$('#pay_mode').val(data['Payment_Type']);
$('#pay_status').val(data['Payment_Status']);
});
});
});
//^^--here