I can't pass a php $_POST variable in my jquery .html() function with ajax

Question

I'm currently trying to work on a search field that change the html of the page with ajax to display the results of the user's search.

So more what I'm currently trying to do is :

• Get the value of the text field (works perfectly)
• Pass that value in a $_POST variable (also works)
• Use this post variable in a PHP function called in the .html function from jQuery to display the results from the search (doesn't work)

You'll find below the code that I have at the moment.

$(".searchProducts").keydown(function(e)
 {
    if(e.keyCode == 13)
    {
        var searchTerms = $(this).val();
        $.ajax
        ({
            url: "#",
            type: "POST",
            dataType: "html",
            data: "searchTerms=" + searchTerms,
            success : function()
            {
                alert(searchTerms);
                <?php
                    $t = fopen("test.txt", "w+");
                    fwrite($t, $_POST['searchTerms']);
                    fclose($t);
                ?>
                $.ajax
                ({
                    url: "#",
                    type: "GET",
                    dataType: "html",
                    success : function()
                    {
                        $("#supplierContainer").html("<?php searchResults($_POST['searchTerms']); ?>");
                    }

                })
            }
        });
    }
 });

And for the php function

function searchResults($test)
{
    echo "<div class='test'>";
        echo "<h1>";
            echo $test;
        echo "</h1>";
    echo "</div>";
} 

In my first ajax call, the alert works and display the value in my search bar and the fopen function correctly create a .txt file in my folder with the correct value in it. But I really don't have any idea why I can't use my post variable in my function call.

edit : My php function is just for test for the time being, it will eventually be a function using the $_POST variable in a MySQL query to get and display the results.

Answer 1

You're messing client-side and server-side programming.

You need two files: searchResults.php

function searchResults($test)
{
    echo "<div class='test'>";
        echo "<h1>";
            echo $test;
        echo "</h1>";
    echo "</div>";
} 
echo(searchResults($_POST['searchTerms']));

and search.js

$(".searchProducts").keydown(function(e)
 {
    if(e.keyCode == 13)
    {
        var searchTerms = $(this).val();
        $.ajax
        ({
            url: "searchResults.php",
            type: "POST",
            dataType: "html",
            data: "searchTerms=" + searchTerms,
            success : function(data)
            {
                alert(searchTerms);
                console.log(data)
                $("#supplierContainer").html(data.response);
            }
        });
    }
 });

Answer 2

From the success part of your ajax code
            success : function(message) //(message) is the search response from the function in php
            {
                alert(searchTerms);
                <?php
                    $t = fopen("test.txt", "w+");
                    fwrite($t, $_POST['searchTerms']);
                    fclose($t);
                ?>
                $.ajax
                ({
                    url: "#",
                    type: "GET",
                    dataType: "html",
                    success : function()
                    {
                        $("#supplierContainer").html(message); //this will prevent you from mixing php and jquery
                    }

                })
            }