Ajax display results in already created div

Question

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?

possible duplicate of [jquery submit form and then show results in an existing div](http://stackoverflow.com/questions/1218245/jquery-submit-form-and-then-show-results-in-an-existing-div) — Bryan Downing, Oct 07 '12 at 19:03
Search is related to server-side, how can html solve the issue? — Ram, Oct 07 '12 at 19:03
i have index.php and in index.php i have
where i have some images loaded from databse.In index.php i include sidebar.php and also i have php code that display results(i dont know where to put it)In sidebar.php i have this form for search,and when i click on submit that is in sidebar.php i want to change
in index.php with results from search. — svenson, Oct 07 '12 at 19:21

score 1 · Answer 1 · answered Oct 07 '12 at 20:27

1

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>

answered Oct 07 '12 at 20:27

gzfrancisco

812
10
14

score 0 · Accepted Answer · edited Jul 15 '16 at 18:29

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.
?>

`id`s are still duplicates. You should use an increment like ` ` — Gilles Quénot, Oct 07 '12 at 20:07

Ajax display results in already created div

2 Answers2