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.

A print_r($_POST); in your PHP code and a console.log(data); in your AJAX success function would show you exactly what is getting sent to PHP — scrowler
– scrowler, Commented Jan 23, 2014 at 20:44
Why is your form nested inside another form? Your first javascript snippet is correct (though i'm not sure what that return false; is there for) — user400654
– user400654, Commented Jan 23, 2014 at 20:44
You should be looking for data in $_POST['shop'] not $_POST['form_data'] — Mike Brant
– Mike Brant, Commented Jan 23, 2014 at 20:46
@KevinB nice spot - HTML spec doesn't allow nested forms, so this could be a reason you're having trouble too — scrowler
– scrowler, Commented Jan 23, 2014 at 20:49
@susheel - post it as an answer, don't go modifying code in peoples questions... — scrowler
– scrowler, Commented Jan 23, 2014 at 20:50

Hogan · Accepted Answer · 2014-01-23 20:48:39Z

2

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">

answered Jan 23, 2014 at 20:48

Hogan

70.7k10 gold badges83 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Susheel Singh Over a year ago

remove method="get" by default its get as you know...by the way he is posting data from ajax.

Hogan Over a year ago

@susheel - I think having two form tags was the real problem

behzad babaei · Accepted Answer · 2015-03-04 18:55:52Z

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>

Collectives™ on Stack Overflow

Using AJAX to post form data to PHP page

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related