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.