I have index.php like main page and I have sidebar.php included in index.php. In index.php I have div id=content
with some content already loaded.. and in sidebar.php a I have
<form id="search" method="post" action="" >
<input type="search" name="search" id="search">
<input type="submit" name="search" id="search" class="btnButton" value="Search"/>
</form>
so how can I display my search result in div id=content
when I click on submit?
Call the search.php from main page using Jquery ajax. make sure u reference the jQuery library.
//Main Page
<form id="search" method="post" action="" >
<input type="text" name="search" id="search">
<input type="submit" name="search1" id="search1" class="btnButton" value="Search"/>
</form>
<div id="content"></div>
<script>
$(document).ready(function(){
//jquery click event
$("#search").live("click", function(e){
//disable default form submit postpage
e.preventDefault();
//make ajax call to the search.php parsing the search textbox value as query string
$.get("search.php?s="+$("#search").val(), function(result){
//Result will be dumped in the div
$("#content").html(result);
});
});
});
</script>
//Search PHP Script search.php
<?php
//Get the search String
$string = $_GET["s"];
//DO search query and echo it on this page.
?>
You only have to select from jquery the element and then execute the method .ajax{}
For example
$('#contentElementId').ajax({options...})
the result loads on the
<div id="contentElementId"></div>