Why Query doesn't work with amp (&) / %26 inside request? - php

OK, code returns results normally when there is no ( amp / & / & ) inside query:
example1 => BRAHAM BALDWIN AGRICULTURAL COLLEGE
is converted and query looks like => BRAHAM+BALDWIN+AGRICULTURAL+COLLEGE
Example 1 => works normally and returns => This school is in Alabama
example2 query => BRYANT & STRATTON BUSINESS INSTITUTE - BUFFALO
is converted and query looks like => BRYANT+%26+STRATTON+BUSINESS+INSTITUTE+-+BUFFALO
Example 2 => doesn't return anything, I'm quite sure that's because of %26 (amp / &)...
Code in funcs.php:
require 'dbconnect.php';
$q = $_GET["q"];
$sql = "SELECT * FROM bl_zrify WHERE Name = '".$q."'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
if ($row['State'] == '') {
$SchoolState = 'Unknown';
}
else if ($row['State'] == 'AL') {
$SchoolState = 'Alabama';
}
else if ($row['State'] == 'AK') {
$SchoolState = 'Alaska';
}
else if ($row['State'] == 'AZ') {
$SchoolState = 'Arizona';
}
else if ($row['State'] == 'AR') {
$SchoolState = 'Arkansas';
}
print 'This school is in';
print $SchoolState;
}
PHP code get executed when we type text into =>
<input name="SchoolName" type="text" maxlength="50" size="30" id="SchoolName" value="" onfocus="showVal(this.value);" />
And javascript which we use to pass the string to PHP funcs.php:
function showVal(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","funcs.php?q="+str.replace("&", "%26").replace(/ /g, "+"),true);
xmlhttp.send();
}

Here is your code with some slight improvements (in comments).
PHP:
require 'dbconnect.php';
// ESCAPE USER INPUT BEFORE PASSING TO SQL!!!
$sql = "SELECT * FROM bl_zrify WHERE Name = '".mysql_real_escape_string($_GET["q"])."'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)) {
// Switch is better for this type of operation
switch ($row['State']) {
case 'AL':
$SchoolState = 'Alabama';
break;
case 'AK':
$SchoolState = 'Alaska';
break;
case 'AR':
$SchoolState = 'Arkansas';
break;
case 'AZ':
$SchoolState = 'Arizona';
break;
default:
$SchoolState = 'Unknown';
}
print "This school is in $SchoolState<br />\n";
}
Javascript
function showVal(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) { // break this into 2 statements so you can handle HTTP errors
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
} else {
document.getElementById("txtHint").innerHTML = "AJAX Error (HTTP "+xmlhttp.status+")";
}
}
}; // functions declared in this way should be followed by a semi colon, since the function declaration is actually a statement.
// encodeURIComponent() does all the escaping work for you - it is roughly analogous to PHP's urlencode()
xmlhttp.open("GET","funcs.php?q="+encodeURIComponent(str),true);
xmlhttp.send();
}
However, I suspect the actual problem here is that you don't actually have an exact match for the entered string in the database. Consider using a LIKE clause in your SQL instead of an exact comparison. Also ensure the collation of the Name field is case-insensitive.

Related

ajax search with input field

I am trying to create a ajax function to just reload a <div> and not the entire page.
What is working:
-during writing in the input field the div is reloaded after every character correctly.
What is not working:
-when the input field is complete empty again, it is not showing the whole entries I have in the database.
this is what I have in the php file where the div is:
function showGames(str) {
if (str == "") {
document.getElementById("searchgame").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","searchgame.php?game="+str,true);
xmlhttp.send();
} }
this is what I have in the search.php
<?php
include 'test/database.php';
$pdo = Database::connect();
if($_GET['game'] == "") {
$sql="SELECT * FROM games WHERE active=1";
echo "<script type='text/javascript'>alert('Should be empty')</script>";
} else {
$q = $_GET['game'];
$sql="SELECT * FROM games WHERE gamenamelong LIKE '%".$q."%'";
}
$stmt = $pdo->prepare($sql);
$stmt->execute();
$gameResults = $stmt->fetchAll(PDO::FETCH_ASSOC);
$rowCount1 = count($gameResults);
Is anybody able to help me?
Thank you!
since we don't know how your form looks like, and what calls the function showGames how, I can only give a vague answer. But your main problem/misstake should be solved with that:
In your function showGames you never hit the ajax if the search string is empty, so you can't get back all results.
So I suggest to change that function like so:
function showGames(str) {
if (str == "") {
document.getElementById("searchgame").innerHTML = "";
//remove that: return;
}
// remove the 'else { '
// now you allways hit the ajax
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","searchgame.php?game="+str,true);
xmlhttp.send();
// remove closing bracket of if-else: '}'
}

Radio button ignoring space between strings

I have a radio button that has an array as value like this,
$sql = "SELECT * FROM os";
$result = mysqli_query($con,$sql);
while ($row = mysqli_fetch_array($result)) {
$row['client'];
//Radio button code
echo "<li><div class = 'list'><a href = 'searchos.php'><div class = 'toggle-btn-grp cssonly'>
<div><form><input type = 'radio' name = 'os' value = " . $row['client'] . " id = 'myRadio1 onchange='showUser(this.value)' >
<label class='toggle-btn'>" . $row['client'] . "</label></form></div></div><div></a></li>";
}
The radio button is working, but for some reason it keeps ignoring the space between the strings in the array. And it only gives me the value of the first string.
When I hard code the a string with space in the value i.e "Production Cost", it gives me the correct output, so the issue must be with the array then, any ideas on how I Could solve this?
Here is the ajax function for getting the value
function showUser(str)
{
var xmlhttp;
if (str == "")
{
document.getElementById("txtHint").innerHTML = "";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "getUser.php?q=" + str, true);
xmlhttp.send();
}

Can we use xmlhttp.open(); in same file

I try to use these code from w3school but I have some problems.
My first file:
<script>
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getresult.php?q="+str,true);
xmlhttp.send();
}
</script>
<?php
echo "First name: <input type=\"text\" id=\"txt1\" onkeyup=\"showHint(this.value)\" />";
echo "<p>Suggestions: <span id=\"txtHint\"></span></p>";
?>
My second file [getresult.php]:
<?php
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
// get the q parameter from URL
$q=$_REQUEST["q"]; $hint="";
// lookup all hints from array if $q is different from ""
if ($q !== "")
{
foreach($a as $key=>$name)
{
if ($q==$key)
{
if ($hint==="")
{
$hint=$name;
}
else
{
$hint .= ", $name";
}
}
}
}
// Output "no suggestion" if no hint were found
// or output the correct values
echo $hint==="" ? "no suggestion" : $hint;
?>
if i want to have 1 file how should i do with
xmlhttp.open("GET","getresult.php?q="+str,true);
because I upload both file on my server it not work but i works when i run on my computer(localhost)
thanks.
You can use this
if (isset($_GET['q'])) {
//getresult.php contents
}
else {
//first file contents
}

Auto-suggestion list box

Hi i have the following auto-suggestion box set up and i want to select the outputs with keyboard and mouse. how can i do that?
Javascript code:
function showResult(string) {
if (string.lenght==0) {
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
//code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
}
document.getElementById("livesearch").innerHTML = xmlhttp.responseText;
document.getElementById("livesearch").style.border = "1px solid #A5ACB2";
}
xmlhttp.open("GET","test.php?q=" + string,true);
xmlhttp.send();
}
PHP code:
$xmlDoc=new DOMDocument();
//$xmlDoc->load("test.xml");
$xml = simplexml_load_file("test.xml");
//$x=$xmlDoc->getElementsByTagName('datas');
//get the q parameter from URL
$q = $_GET["q"];
if (strlen($q) > 0) {
foreach ($xml->datas as $a) {
$var = $a->attributes();
$domain = stristr($var,$q);
echo $domain."\n";
echo "<br/>";
}
if (strlen($domain) == 0) {
echo "no results";
}
Everything works fine at this point. But I don't know how to interact with the list.
It would be better to user some proper autocomplete jQuery. You can search by "autocomplete jquery" and find out a jQuery which fits your requirements. If you want to write your own code then you can make functions which work for mouse and keyboard events:
txtSearchBox.keyup(function (e) {
// get keyCode (window.event is for IE)
var keyCode = e.keyCode || window.event.keyCode;
var lastSearch = txtSearchBox.val();
// check for an ENTER
if (keyCode == 13) {
OnEnterClick();
return;
}
// check an treat up and down arrows
if (OnUpDownClick(keyCode)) {
return;
}
// check for an ESC
if (keyCode == 27) {
clearResults();
return;
}
});
And then in "OnEnterClick()", "OnUpDownClick()" and "OnUpDownClick()" you can display what you want like:
function OnUpDownClick(keyCode) {
if(keyCode == 40 || keyCode == 38){
if(keyCode == 38){ // keyUp
// Do something keyUp event
} else { // keyDown
// Do something for keyDown event
}
return true;
} else {
// reset
return false;
}
}

Simple PHP, AJAX request

Right now I'm struggling to get this simple PHP AJAX request to work.
<html>
<head>
<script type="text/javascript">
function getSuggestions(type){
if(type == "")
{
document.getElementById("entries").innerHTML="test"
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
document.getElementById("entries").innerHTML=xmlHttp.response;
}
}
xmlHttp.open("GET","getData.php?status="+type,true);
xmlHttp.send();
}
</script>
</head>
<body>
<div id="A" onclick='getSuggestions("A")'>Click for A</div>
<div id="P" onclick='getSuggestions("P")'>Click for P</div>
<div id="R" onclick='getSuggestions("R")'>Click for R</div>
<div id="entries"></div>
</body>
</html>
Below is getData.php
<?php
$status = $_GET["status"];
echo $status;
?>
Everytime I click on any of the tags I get "undefined" in the "entries" tag. Could anybody explain why it's undefined?
use xmlHttp.responseText
This is how I handle AJAX. Essentially an example of akellehe's answer
function getSuggestions(type){
if(type == "") {
document.getElementById("entries").innerHTML="test"
return;
}
var r = getXmlObject();
var url= "getData.php?status="+type;
if (r.readyState == 4 || r.readyState == 0) {
r.open("POST", url, true);
r.onreadystatechange = function (){
if (r.readyState == 4) {
document.getElementById("entries").innerHTML= r.responseText;
}
};
r.send(null);
}
}
////////////////////////////////////
function getXmlObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert('Status: Cound not create XmlHttpRequest Object. Consider upgrading your browser.');
}
}

Categories