Home/ Questions/Q 744893
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T09:01:52+00:00

I’ve a search form wherein the database query has been coded in php and

  • 0

I’ve a search form wherein the database query has been coded in php and the html file calls this php file via ajax to display the results in the search form. The problem is, I would like the result to be displayed in the same form as search.html; yet while the ajax works, it goes to search.php to display the results.

search.html:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="scripts/search_ajax.js" type="text/javascript"></script> 
</head>

<body>
<form id="submitForm" method="post">
<div class="wrapper">
<div class="field">
<input name="search" id="search" />
</div><br />
<input id="button1" type="submit" value="Submit" class="submit" onclick="run_query();" /><br />
</div>
<div id="searchContainer">
</div>
</form>
</body>
</html>

If I add action=”search.php” to the form tag, it displays the result but on search.php. I’d like it to display on the same form [i.e search.html, and not search.php] if I just add the javascript function [as done above], it displays nothing on search.html.

search_ajax.js:

var xmlHttp


function run_query() {
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null) {
alert ("This browser does not support HTTP Request");
return;
} // end if
var url="search.php";
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} //end function

function stateChanged(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("searchContainer").innerHTML=xmlHttp.responseText;
} //end if
} //end function

function GetXmlHttpObject() {
var xmlHttp=null;
try {
// For these browsers: Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
//For Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
} //end function

search.php:

<?php
include 'config.php';

$search_result = "";

$search_result = $_POST['search'];

$result = mysql_query("SELECT cQuotes, vAuthor, cArabic, vReference FROM thquotes WHERE cQuotes LIKE '%$search_result%' ORDER BY idQuotes DESC", $conn)
  or die ('Error: '.mysql_error());
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    onclick="run_query();"

    You don’t seem to block the form’s default action. Add a return false; to the end of onclick:

    onclick="run_query(); return false;"

    Or if run_query() actually returns false, then rewrite the onclick as follows:

    onclick="return run_query();"

    Update: you indeed didn’t pass the request parameter to PHP code. Replace

    var url = "search.php";

    by

    var url = "search.php?search=" + searchvalue;

    And use $_GET in PHP. If you actually want to use POST, then do

    var url = "search.php";
xmlHttp.open("POST",url,true);
xmlHttp.send("search=" + searchvalue);

    (the searchvalue is obviously the user-entered value. I assume that you can figure how to grab it from the HTML DOM using JS.

    That said and unrelated to the actual problem, instead of all that opaque and boilerplate Ajax code I suggest you to use jQuery for this. It greatly eases doing ajaxical stuff. You could for example use jQuery.post() instead of this all. The link points to several examples.

    • 0