AJAX POST Request is sending JS code, not an action

Question

i recently started with JS (JavaScript) and i try to make a live search on my platform.

Input:

<div class="row">
        <div class="col-lg-12">

            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">MarketPlace</h6>
                </div>
                <div class="card-body">
                            <div class="input-group mb-4 p-2">
                                <input type="text" placeholder="Search something..." id="search-box" name="manage_search" aria-describedby="button-addon3" class="form-control border-0" id="search-box">
                            </div>
                </div>
            </div>
        </div>
    </div>

Ajax POST Request (at the down of input HTML code):

<script type="text/javascript">
// AJAX call for autocomplete 
$(document).ready(function(){
    $("#search-box").keyup(function(){
        $.ajax({
        type: "POST",
        url: "process.php",
        data:'keyword='+$(this).val(),
        success: function(data){
            $("#suggesstion-box").show();
            $("#suggesstion-box").html(data);
            $("#search-box").css("background","#FFF");
            console.log(data);
        }
        });
    });
});
</script>

And process.php:

if(!empty($_POST["keyword"])) 
{
    global $db;
    $query ="SELECT * FROM thbs_marketplace WHERE m_title like '" . $_POST["keyword"] . "%' ORDER BY m_title LIMIT 3";
    $result = mysqli_query($db, $query)
    or die ("SQL error(addon (marketplace)):" .mysqli_error($db));
    if(@mysqli_num_rows($result) > 0) 
    {
        foreach($result as $name) 
        {
            ?>
            <script type="text/javascript">
                document.getElementById('suggestions').innerHTML = `<div class="card-container">
                <div class="card">

                <h2><b><?php echo $name['m_title']; ?></b><span class="badge badge-success"><?php echo $name['m_price']. " ". getWebVar('currency'); ?></span></h2>
                Type: <?php echo $name['m_type']; ?><br>
                Description: <?php echo $name['m_description']; ?><br>
                <img src="<?php echo $name['m_image'];?>" height="200px" width="400px" style="left: 5px;"alt="<?php echo $m_title;?>">
                <br>
                <a class="btn btn-primary" href="client_area?addon_use=MarketPlace&add_cart=<?php echo $name['m_id'];?>">Add to cart</a>
                </div>

                </div>`;

                </script> <?php
         }
    } 
} 
else 
    { 
        ?> <script> document.getElementById('suggestions').innerHTML = ``; </script> 
    <? 
    }
?>

I know, i know, not to use global $db , but anyway, searched on internet but found nothing, can anyone help me please?

browser console:

<script type="text/javascript">
                document.getElementById('suggestions').innerHTML = `<div class="card-container">
                <div class="card">

                <h2><b>FPings Hosting Theme</b><span class="badge badge-success">0.00 EUR</span></h2>
                Type: Theme<br>
                Description: A simple theme designed for THBS hosting providers.<br>
                <img src="https://bruh-i-do-not-make-advertising.com/content/addons/MarketPlace/market_content/images/1.png" height="200px" width="400px" style="left: 5px;"alt="">
                <br>
                <a class="btn btn-primary" href="client_area?addon_use=MarketPlace&add_cart=1">Add to cart</a>
                </div>

                </div>`;

                </script>

Thanks Everybody! ^-^

change the line of data in ajax call to this, data : { 'keyword': $(this).val() }, — jishnu_vp_1998, Jan 22 '20 at 13:04
You need to echo the js. See this: [https://stackoverflow.com/questions/20070177/how-to-write-javascript-code-within-php](https://stackoverflow.com/questions/20070177/how-to-write-javascript-code-within-php) — Rob Moll, Jan 22 '20 at 13:06
i don't want to echo it, i want to modify div with id suggestions to result of query — Thos-Host, Jan 22 '20 at 13:10

score -1 · Answer 1 · edited Jan 22 '20 at 13:14

-1

Change data:'keyword='+$(this).val(), to data:{keyword: $(this).val()} Because you start with POST and not with GET

edited Jan 22 '20 at 13:14

Dharman

30,962
25
85
135

answered Jan 22 '20 at 13:05

Simone Rossaini

8,115
1
13
34

`data:$(this).val()` , with this you don't send any data to process.php – Thos-Host Jan 22 '20 at 13:09
wait to check, changed to: data:{keyword: document.getElementById('search-box').val()} Because i don't use $(this) here. – Thos-Host Jan 22 '20 at 13:46
Nothing in console this time – Thos-Host Jan 22 '20 at 14:02
Or can you try to use your method and change all value with $_GET method – Simone Rossaini Jan 25 '20 at 10:19

AJAX POST Request is sending JS code, not an action

1 Answers1