I have this ajax request where i try to find some tags and add it to search results
The problems comes when i try with my php script to find something then it doesn't find anything
<div>
<form action="search()" method="post">
<label for="tagsearch">Search tags: </label>
<input type="text" id="tagSearch" name="tagsearch"/>
<input type="button" id="tagenter" value="Add tag"/>
</div>
<div id="tagHolder">
<!--Tags here-->
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
function search(){
var tag=$("tagSearch").val();
if(tag!=""){
$("#tagHolder").html();
$.ajax({
type:"post",
url:"gettag.php",
data:"tag="+encodeURIComponent(tag),
success:function(data){
$("#tagHolder").html(data);
$("#tagSearch").val("");
}
});
}
}
$("#tagenter").click(function(){
search();
});
$('#tagSearch').keyup(function(e){
if(e.keyCode == 13){
search();
}
});
});
</script>
The above code is the ajax request.
This is the php script
//Connect to database
$con = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
//Check if connection is up
if(mysqli_connect_errno()){
echo "Couldn't connect". mysqli_connect_error($con);
}
$tag = $_POST["tag"];
$result=mysqli_query($con, "SELECT * FROM tags WHERE tag = '".$tag."'");
$found=mysqli_num_rows($result);
if($found>0){
while($row=mysqli_fetch_array($result)){
echo "<div>". $row['tag'] . "</div>";
}
}else{
echo "<div>No suggestions</div>";
}
mysqli_close($con);
Im getting the "No suggestions" as search result. My guess is that the SQL query is wrong or the $found variable is wrong.
There are several significant problems here.
As Jeff cryptically points out, you're not getting your value from tagSearch
correctly, because $("tagSearch")
looks for an element with the tag name tagSearch
, not the id
tagSearch
. To use the id
, add the #
to your selector: var tag=$("#tagSearch").val();
This is the primary cause of the problem you've described, but keep reading, there's a lot more to do.
You're wide open to SQL injection attacks. Humorous example:
Read more about them here, and about how to defend against them here.
In your ajax
call, data:"tag="+tag
is wrong. It should be data:{tag:tag}
(preferred) or data:"tag="+encodeURIComponent(tag)
. With your original code, if tag
contains any character that isn't directly valid in URI-encoding (loosely, in a URL), your PHP page won't quite receive what you're sending. When use use an object (my first example), jQuery will handle encoding it for you; otherwise, do the encoding yourself with encodeURIComponent
.
As Fred -ii- helpfully points out, Your form action is wrong, and some browsers will try to use it when the user presses the Enter key in your text field. It should be action="javascript:search()"
, not just action="search()"
. The latter will be treated as a URL.
Also as Fred -ii- points out, You probably wanted to close your form
element with a </form>
above the </div>
.
Error checking
You're also not checking for any errors in your code, such as error reporting and mysqli_error()
.
Those are important tools you should use during development.
var tag=$("tagSearch").val();
try var tag=$("#tagSearch").val();
if you want to select which id is "tagSearch", use $("#tagSearch") There is more about selector in jquery http://www.w3schools.com/jquery/jquery_selectors.asp