CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
tabia
tabia

Reputation: 635

Send php response to ajax and display result in div

I have made a simple form through which i can search the keywords and find the related output from database dynamically. The code works perfect without AJAX . But now i have applied some AJAX code to get the response on same page within a div named coupon. I am unable to get the response. I don't know where am i doing wrong. Any suggestions please. Here is the complete code.

form

<form action="" id="search_form" method="POST">
<p><input name="query" autocomplete="off" id="list_search" type="search" required class="list_search" /></p>
<p align="center"><input type="submit" id="click" name="click" class="but" value=" search"  /></p>
</form>
<div class="coupons"></div>

AJAX

$("document").ready(function(){
       // $(".but").click(function(event){  // here
        $("#search_form").submit(function (event) {

         {
            event.preventDefault();

           var myData={ query: $( 'input[name="query"]' ).val() };
                $.ajax({
                    url: 'result.php',
                    data: myData,
                    type: 'post',
                    dataType: "html",
                    success: function(result){
                        //console.log(result);
                        $('.coupons').html(result);
                    },
                    error: function() {
                        alert('Not OKay');
                    }
                });
        });
    });

result.php

 $keyword = mysqli_real_escape_string($con,$_REQUEST['query']); // always escape
 $keys = explode(" ", $keyword);
 $sql="SELECT  c.* , sc.* , sm.* ,ca.* from store_category sc INNER JOIN store_manufacture sm ON sm.sm_id=sc.store_id INNER JOIN categories ca ON ca.cat_id=sc.cat_id INNER JOIN coupons c on c.c_sc_id=sc.sc_id WHERE c.c_name LIKE '%$keyword%' OR sm.sm_brand_name LIKE '%$keyword%' OR ca.cat_name LIKE '%$keyword%' OR c.c_description LIKE '%$keyword%'";

foreach ($keys as $k) {

    $sql.="OR c.c_name LIKE '%$k%' OR sm.sm_brand_name LIKE '%$k%' OR ca.cat_name LIKE '%$k%' OR c.c_description LIKE '%$k%'";
}

$result = mysqli_query($con, $sql);
$count=mysqli_num_rows($result);
if($count!=0) {
    while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {

       $res=$row['c_name'].$row['c_description'];
        echo json_encode($res);
    }
}
else
{
    echo "no result";
}

Upvotes: 0

Views: 1238

Answers (2)

mplungjan
mplungjan

Reputation: 177684

Do not use a click event and a button does not have a submit event - use the form's submit event instead

$("#search_form").on("submit",function(e) { 
  e.preventDefault();
  $.post("result.php?query="+encodeURIComponent($("#list_search").val()),function(data) {
    $('.coupons').html(data); // you likely need to render the JSON instead here or send HTML from server
  });  
});

Upvotes: 2

Gerry
Gerry

Reputation: 409

You should try with:

var myData={ query: $( 'input[name="query"]' ).val() };

So you can get back a query field on the server.

The Problem is your ajax request does have your value as key in $_REQUEST. There might be some way to handle this but it is not very intuitive.

And right you should register the submit handler on your form not your button.

$("#search_form").submit(function(event){ ... }

Upvotes: 0

Related Questions