CODEWITHSUNDEEP
javascriptphphtmlajaxjson
xplody
xplody

Reputation: 103

put data in textboxes with javascript

I want to show my filtered data in the arrays in the textboxes...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.

I think the problem is the script it doesnt work as expected...I need your help guys.

example expected output:

html code:

<form name="form" method="get"> 
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 code:

<script type="text/javascript">
$(document).ready(function(){
    $('input[name^=search]').click(function(){
            $.ajax({
            url:"search.php",
            type:"GET",
            data: { term : $('#query').val() },
            dataType:JSON,
            success: function(result) {
                $('#id1').val(result.id).show();
                $('#id2').val(result.id).show();
                $('#name1').val(result.name).show();
                $('#name2').val(result.name).show();
                $('#optA1').val(result.score1).show();
                $('#optA2').val(result.score1).show();
                $('#optA1').val(result.score2).show();
                $('#optA2').val(result.score2).show();
                $('#other_qual1').val(result.other_qual).show();
                $('#other_qual2').val(result.other_qual).show();
                $('#interview1').val(result.interview).show();
                $('#interview2').val(result.interview).show();
                $('#total1').val(result.total).show();
                $('#total2').val(result.total).show();
            }
        });
    })
});      
</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%'");

$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);
?>

when I go to search.php page I get this output:

Upvotes: 1

Views: 224

Answers (3)

user1613360
user1613360

Reputation: 1314

Change:

input type="text" id="query" name="search"

to:

"input type="text" id="query" name="term"

The html form name tag should match the php script tag.

Upvotes: 1

Kamehameha
Kamehameha

Reputation: 5488

I tried your code, and everything seems to be fine albeit some small errors.

In the pic where you show the error in line 3 of search.php , I think you ran the url without the GET variable from the browser itself, that's why there it seemed to show that error, although your database queries seemed to be working. Your AJAX code seems to be sending the $_GET['term'] properly through it's data value. But, your AJAX responses had errors.

The only line I had to change was- 

dataType:JSON,

to

dataType:'JSON',   //Note the quotes

and it worked!.

The error it gave was No conversion from text to [object . I found that out by adding a callback function when an error happens in ajax. It is like this(You don't have to add this, but it's a good idea to do so.)

//Immediately after the success callback, separated by comma.
error:  function(jqXHR,textStatus,errorThrown ){
    console.log(JSON.stringify(jqXHR));
    console.log(textStatus);
    console.log(errorThrown);
}

Hopefully, this helped.

PS: In your JavaScript, you seem to have triggered the ajax on the click event. This triggers an ajax call even before the user writes anything, thereby making your GET vars empty. A better option would be something like focusout, which would allow the user to type something before the rest of the fields are populated.

Upvotes: 1

Daniel Gasser
Daniel Gasser

Reputation: 5143

Error in search.php, Line 3: Do you have any value in the GET?

The name of your input field is 'search' but your GET is 'term'

<input type="text" id="query" name="search" />

$q = $_GET['term'];

those must be the same

Upvotes: 1

Related Questions