put data in textboxes with javascript

Question

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:

@pc-shooter the value that should be put to get is the value in the search textbox but it wont get it...can u help me about this. — xplody
– xplody, Commented Feb 2, 2014 at 11:50
Try to delete the header line in search.php its not neccessary, to define a json header, when coming from an ajac call with jquery, and you already create a json object with json_encode.. And have alok at Yeah's answer — Daniel Gasser
– Daniel Gasser, Commented Feb 2, 2014 at 12:17

Kamehameha · Accepted Answer · 2014-02-02 09:55:24Z

1

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.

edited Feb 2, 2014 at 9:55

answered Feb 2, 2014 at 9:42

Kamehameha

5,4781 gold badge25 silver badges31 bronze badges

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

3 Comments

xplody Over a year ago

did u test the code and work?? i tried ur advise stil wont work..y?

xplody Over a year ago

can u remake my script using focusout function??please mine doesnt work :(

Kamehameha Over a year ago

U just have to write focusout instead of instead of click. And changing 'JSON' did not work?

Daniel Gasser · Accepted Answer · 2014-02-02 08:58:12Z

1

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

answered Feb 2, 2014 at 8:58

Daniel Gasser

5,1738 gold badges48 silver badges64 bronze badges

Comments

display-name-is-missing · Accepted Answer · 2014-02-02 18:34:09Z

1

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.

edited Feb 2, 2014 at 18:34

display-name-is-missing

4,4055 gold badges31 silver badges42 bronze badges

answered Feb 2, 2014 at 8:59

user1613360

1,3143 gold badges17 silver badges45 bronze badges

Collectives™ on Stack Overflow

put data in textboxes with javascript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related