Using AJAX to post form data to PHP page

Question

I am simply trying to use the data submitted in a search form to query the database and bring back results similar to the search. My form looks like this:

 <div id="searchform">
    <form method="get">
    <form id="submitsearch">  
    <input id="shop" name="shop" type="text" placeholder="Find a shop" />
    <input id="submitbutton" type="submit" value="Go"/>   
    </form>
    </form>
    <div id="searchresults">
    </div>
 </div>

the Javascript I've got is:

$("#submitsearch").submit(function(event) {
            event.preventDefault();
                $("#searchresults").html('');
                var values = $(this).serialize();
                    $.ajax({
                    url: "external-data/search.php",
                    type: "post",
                    data: values,
                    success: function (data) {
                    $("#searchresults").html(data);
                    }
                    });
                });
    return false;

I have also tried...

   $("#submitbutton").click(function(){
            var form_data = $("#submitsearch").serialize();
            $.ajax({
            url: "external-data/search.php",
            type: 'POST',
            data: form_data,
            success: function (data) {
              $("#searchresults").html(data);
            }
    });
    return false;
  });

And this seems to work slightly as it shows results, the first doesn't do anything. It's not sending the data to the PHP page but the PHP I've got is:

<?php 
    $str_shops = '';
    $shop = $_POST['form_data'];
    mysqli_select_db($db_server, $db_database);
    $query = "SELECT * FROM shops WHERE name LIKE '%$shop%'"; 
    $result = mysqli_query($db_server, $query); 
        if (!$result) die("Database access failed: " . mysqli_error($db_server)); 
        while($row = mysqli_fetch_array($result)){ 
    $str_shops .= "<strong>" . $row['name']  . "</strong><br>" .
    $row['address'] . "<br><br>"; 
 } 

mysqli_free_result($result); 
echo $str_shops; 
mysqli_close($db_server); 
?> 

Any help would be greatly appreciated! Thanks in advance.

Answer 1

You have two form tags. This won't work. You want one form tag with two attributes

<form method="get">
<form id="submitsearch">  

to

<form method="get" id="submitsearch">  

Answer 2

you can do it without using html form. first you call the php page and then display a data within html. this is what I do?!

<div> 
 <input id="shop" type="text" placeholder="Find a shop" />
    <input id="submitbutton" type="button" value="Go"/>   
</div>
 <div id="searchresults">
 </div>

<script type="text/javascript">
$(function() {
$("#submitbutton").click(function(){
try
  {
    $.post("root/example.php",
      {
         'shop':$("#shop").val().trim()

     }, function(data){
           data=data.trim();
      $("#searchresults").html(data);
// this  data is data that the server sends back in case of ajax call you 
//can send any type of data whether json or json array or any other type 
//of data

         });
    }
    catch(ex)
    {
        alert(ex);
    }
  });


});
</script>