show filtered data in the already made textboxes

[eloginko]

As you can see my current code doesnt work and i need your help guys...i want to filter in my search(textbox) and show the data filtered in there corresponding textboxes...can anyone help make my code work?? i've been looking in google for days already for the same idea of my program that works but i cant find any help me please.

example expected output:

http://s38.photobucket.com/user/eloginko/media/cc_zpsf7cfc40f.png.html

html code:

<form method="post"> 
Search batchcode: <input type="text" id="query" name="search" /><br /> 
<table> 
<tr> 
<td> 
ID: <br /> 
<input id="id1" type="text" name="id1" /> <br /> 
<input id="id2" type="text" name="id2" /> <br /> 
</td> 
<td> 
Name: <br /> 
<input id="name1" type="text" name="name1" /> <br /> 
<input id="name2" type="text" name="name2" /> <br /> 
</td> 
<td> 
Score 1: <br /> 
<input id="optA1" type="text" name="optA1" /> <br /> 
<input id="optA2" type="text" name="optA2" /> <br /> 
</td> 
<td> 
Score 2: <br /> 
<input id="optB1" type="text" name="optB1" /> <br /> 
<input id="optB2" type="text" name="optB2" /> <br /> 
</td> 
<td> 
Other Qualification: <br /> 
<input id="other_qual1" type="text" name="other_qual1" /> <br /> 
<input id="other_qual2" type="text" name="other_qual2" /> <br /> 
</td> 
<td> 
Interview: <br /> 
<input id="interview1" type="text" name="interview1" /> <br /> 
<input id="interview2" type="text" name="interview2" /> <br /> 
</td> 
<td> 
Total: <br /> 
<input id="total1" type="text" name="total1" /> <br /> 
<input id="total2" type="text" name="total2" /> <br /> 
</td> 
</tr> 
</table> 
</form>

script function:

<script type="text/javascript">
$(document).ready(function(){
$('input[name^=search]').click(function(e){
e.preventDefault(); 
$.ajax({
url:"search.php",
type:"GET",
data : { term : $('#query').val() },
dataType:json,
success : function(result) {

$("#id1").html(result.id);
$("#id2").html(result.id);
$("#name1").html(result.name);
$("#name2").html(result.name);
$("#optA1").html(result.score1);
$("#optA2").html(result.score1);
$("#optA1").html(result.score2);
$("#optA2").html(result.score2);
$("#other_qual1").html(result.other_qual);
$("#other_qual2").html(result.other_qual);
$("#interview1").html(result.interview);
$("#interview2").html(result.interview);
$("#total1").html(result.total);
$("#total2").html(result.total);
            }
        });
    })
});      
</script>

search.php page:

<?php

$q = $_GET['term'];

mysql_connect("localhost","root","");
mysql_select_db("test");
header('Content-type: application/json');
$query = mysql_query("SELECT * FROM score WHERE batchcode LIKE '%$q%'");

while($row = mysql_fetch_array($query)){
$data=array('value'=>$row['batchcode'], 
'id' => $row['id'], 
'name' => $row['name'], 
'score1' => $row['score1'], 
'score2' => $row['score2'], 
'other_qual' => $row['other_qual'], 
'interview' => $row['interview'], 
'total' => $row['total']
);
}
echo json_encode($data);
?>

[JorgeM]

Here is something to check on..

First, if you visit the search page with a browser, search.php?term=x are you seeing the correct json output on the screen?

Next, I noticed in your script your are using .html(), but for input elements, that isn't going to work. You should try with .val() instead.

 $("#id1").val(result.id);

Try using your browsers javacript console (f12) to help you with debugging client side issues.

[eloginko]

@JorgeM yes i visited the search.php page and i see the correct arrays on the screen...i change the html to val now but it still wont display the arrays on the textboxes can you help me with this?

[eloginko]

@JorgeM btw i change the search.php code to this...

<?php

$q = $_GET['term'];

mysql_connect("localhost","root","");
mysql_select_db("test");
header('Content-type: application/json');
$query = mysql_query("SELECT * FROM score WHERE batchcode LIKE '%$q%'");

$data = array();
while($row = mysql_fetch_array($query)){
$data[] = array('value'=>$row['batchcode'], 
'id' => $row['id'], 
'name' => $row['name'], 
'score1' => $row['score1'], 
'score2' => $row['score2'], 
'other_qual' => $row['other_qual'], 
'interview' => $row['interview'], 
'total' => $row['total']
);
}
echo json_encode($data);
?>