I have a search PHP page that has a search form on it as follows (I have removed the Bootstrap classes)
<form id="searchform" name="search" role="form" action="/Search" method="post">
<input type="text" class="form-control" name="keywords" placeholder="keywords e.g. some words here"/>
<input type="hidden" id="location" value="" class="county" name="location[]" />
<button class="btn btn-primary btn-lg" type="submit" name="search_button" id="searchbutton">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
SEARCH
</button>
</form>
On this search page I have the same search form on top and results are displayed in a right column and on the left are a list of check boxes and selects that called AJAX and refines the search. Findings are loaded in the div called displaylisting.
$(document).ready(function() {
$('# list here comma separated').on('change',function(){
$.ajax({
type: "POST",
url: "ajaxlistings.php",
contentType: 'application/x-www-form-urlencoded',
data: $("#formID").serialize(),
cache: false,
dataType: 'html',
success: function(data){
console.log(data);
$('#displaylisting').html(data);
},
error: function (xhr, status, error) {
alert("Sorry, there was a problem!: " + error);
console.log(xhr.status);
console.log(xhr.responseText);
console.log(error);
},
complete: function (xhr, status) {
//$('#showresults').slideDown('slow')
}
});
return false;
});
/* Search button clicked */
$("#searchbutton").click(function() {
$.ajax({
type: "POST",
url: "ajaxlistings.php",
contentType: 'application/x-www-form-urlencoded',
data: $("#formID").serialize(),
cache: false,
dataType: 'html',
success: function(data){
console.log(data);
$('#displaylisting').html(data);
},
error: function (xhr, status, error) {
alert("Sorry, there was a problem!: " + error);
console.log(xhr.status);
console.log(xhr.responseText);
console.log(error);
},
complete: function (xhr, status) {
//$('#showresults').slideDown('slow')
}
});
return false;
});
All this is working fine when tested on the search.php page.
Here is my issue:
Logically, to get to this search page, on my index.php I also have the same search form.
What I want is that when a user clicks the search form on my index.php page they are brought to the search.php page (which it is doing at present in the action) but I want to invoke the AJAX call here to display the listings.
Is this possible? As a work around I created a hidden variable on my homepage and set to 1 and when submitted to the search PHP page it calls the same PHP code that is in the ajaxlisting.php when this value is 1. But seems counter productive especially when the ajaxlisting.php would do the job for me.
I have search the forums but cannot find an answer to my question.
To do this you could place your searched value in your keywords input and then trigger an onchange event
HTML (please note you will need to sanitize your echo here to prevent XSS)
<input type="text" class="form-control" name="keywords" placeholder="keywords e.g. some words here" value="<?php echo $_POST['keywords']; ?>"/>
JS
$("[name='keywords']").trigger('change');
So far based on the comments in the link (How to submit form on one page to a different page using ajax call in jquery) I have this on my search PHP page to catch the POST from the index PHP page:
$method = $_SERVER['REQUEST_METHOD'];
if($method == 'POST')
{
echo $method . " - Send to AJAX
";
$fromhome = 1;
}
else
exit;
and then in the header in SCRIPT tags I have:
var fromhome = <?php echo $fromhome; ?>;
if(fromhome == 1)
CallAjax();
function CallAjax(){
console.log('From home' + fromhome);
$.ajax({
type: "POST",
url: "ajaxlistings.php",
contentType: 'application/x-www-form-urlencoded',
data: $("#formID").serialize(),
cache: false,
dataType: 'html',
success: function(data){
console.log(data);
$('#displaylisting').html(data);
},
error: function (xhr, status, error) {
alert("Sorry, there was a problem!: " + error);
console.log(xhr.status);
console.log(xhr.responseText);
console.log(error);
},
complete: function (xhr, status) {
//$('#showresults').slideDown('slow')
}
});
return false;
}
}
But firebug is an error:
ReferenceError: $ is not defined
$.ajax({
I got it sorted.
Here is what I did. On my search PHP page I have:
$method = $_SERVER['REQUEST_METHOD'];
if($method == 'POST')
$fromhome = 1;
else
exit;
and in the header this:
<script> var fromhome = <?php echo $fromhome; ?>; </script>
I have all my JQUERY and script in a footer PHP page so in here I have:
$(document).ready(function() {
if(fromhome == 1)
{
console.log('From home: ' + fromhome);
CallAjaxFunction();
}
function CallAjaxFunction(){
alert("here");
$.ajax({
type: "POST",
url: "ajaxlistings.php",
contentType: 'application/x-www-form-urlencoded',
data: $("#formID").serialize(),
cache: false,
dataType: 'html',
success: function(data){
console.log(data);
$('#displaylisting').html(data);
},
error: function (xhr, status, error) {
alert("Sorry, there was a problem!: " + error);
console.log(xhr.status);
console.log(xhr.responseText);
console.log(error);
},
complete: function (xhr, status) {
//$('#showresults').slideDown('slow')
}
});
return false;
} ...
So now it works fine, the AJAX function is being called when a search is performed from the index PHP page through the post and from then on in th search PHP AJAX calls do the rest.