Ajax - Getting specific value from data and put to text-box?

Question

I have a working Ajax which retrieves up-to 10 column data. I want to put the first column data to the textbook but not succeded.

I have tried the following line but not displaying the data to text box:

$('#stud_id').val(data.id);

Any help?

The Ajax:

  <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
    <script src="../jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
        var student_id=$("#student_id").val();
        $.ajax({
        type:"post",
        url:"paymentProcess.php",
        data:"student_id="+student_id,
        beforeSend: function(){
        $("#info").html("<h1>Pleas Wait working...</h1>");
},
success:function(data){
    $('#stud_id').val(data.id);
    $("#frmPayment").css("visibility","visible");
$("#info").html(data);

}});
});
});
</script>

The Text Box:

 <input type="text" name="student_id" id="student_id" placeholder="Enter Student ID"/>

The working Query:

<?php
  $expected;
$stud_id=$_POST['student_id'];
$stud_payment="select st.id, st.stud_fname, st.stud_lname, st.stud_middle_name,org.Instname as Institute, dp.dep_name, st.entry_year,sum(sc.total_fee) as 'Expected Fee'
from student st inner join department dp on st.dep_id=dp.id
left join st_costshare sc on sc.stud_id=st.id
inner join college cl on cl.id=dp.college_id
inner join organization org on org.id=cl.inst_id
where st.id='{$stud_id}'
group by sc.stud_id limit 1
";

Answer 1

What is your php generating for js?

You're trying to access "data.id" which will be the problem, if you don't retrieve json through your ajax call.

If you send something like this: {'id':'your id'}

or

[ {'id':'your id'} , {'id':'your second id'} ]

and change your js to:

$.ajax({
        type:"post",
        dataType:"json"
});

You will have an object and not a string.

Please do exactly what the guys in the comments were recommending

//in your success callback  
console.log(data)

If you don't know how to retrieve these log data, use this:

https://developer.chrome.com/devtools

Answer 2

The line $('#stud_id').val(data.id); is saying: find an input element with id="stud_id" and set its value to data.id .

Is there an element with id="stud_id" , and is it an <input.../> or something else? If it is (for example) a <div.../> then you would need .text() rather than .val() .

Replace $('#stud_id').val(data.id); with $('#stud_id').val('Test'); . If the word Test appears in your text box then the issue is with data.id . Put a breakpoint at the start of the success handler and see what data and data.id actually are.

Also it looks like you may have a SQL injection vulnerability on the PHP side of things. You should read up on this. As things stand there's a good chance someone can delete all your student records just by entering ';delete from students;-- as their ID.