CODEWITHSUNDEEP
phpjqueryajax
Clark Bernales
Clark Bernales

Reputation: 53

Put conditions on the php part of a page and display it using AJAX

I want to put conditions like word counter on the php part of my project and display it using AJAX. This is my code so far:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Working with JavaScript</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
        <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
        <style>
        .quicksand{
            font-family: 'Quicksand', sans-serif;
        }
        .centered {
            margin: 0 auto; width: 40%;
        }
    </style>
    </head>
<body style="background-color: green"><br><br>
    <div class="container">
        <div class="centered">
            <div class="jumbotron" align="center">
        <div class="container">
            <h1><div class="quicksand"> Word Counter</div> </h1><br>    
        <input type="text" name="textInput" id="textInput" class="form-control quicksand" 
               placeholder="Enter Anything!" autocomplete="off" required autofocus style="text-align: center" />

        </div></div>

            <div class="jumbotron" align="center"><div id="content" class="quicksand""></div>
            </div>
        </div></div>
    </body>

    <script type="text/javascript">
        //get the content
        var textInput = document.getElementById("textInput");
        //the function
        textInput.onkeyup = function () {
            //AJAX
            $.ajax({
                //to specify what type of METHOD to REQUEST in the SERVER (GET or POST)
                "method": "POST",
                // where to send the request
                "url": "assignment2.php",
                // where to send the request
                "dataType": "JSON",
                //DATA values that you'll send
                "data": {
                    "text": $("#textInput").val()
                },
                //if no error
                success: function (res) {
                    var string = res.occurencesString;
                    $("#content").html(string);
                }
            });
        }
    </script>    
</html>

and for my php:

<?php

$text = array("occurencesString" => $_POST['text']);
echo json_encode($text);

This is the working code I created for a word counter

<?php

        //this $text is just an example, please put this php in a new php file
        $text = "The quick brown fox";
        $words = explode(' ', $text);
        sort($words);
        $result = array_combine($words, array_fill(0, count($words), 0));
        $len = count($words);

        for ($i = 0; $i < $len; $i++) {
            echo $words[$i] . " ";
        }echo "<br> <br>";

        foreach ($words as $word) {
            $result[$word] ++;
        }

        foreach ($result as $word => $count) {
            echo "$word  $count<br>";
        }

        ?>

My problem is, I do not know how to put that on the php page because as far as I have done, anything that I put on the php page other than those two lines results in not displaying anything anymore. Plz halp and thanks in advance :)

Upvotes: 0

Views: 33

Answers (1)

Jacob Raccuia
Jacob Raccuia

Reputation: 1686

Try using this code in assignment2.php.

I believe the problem is simply because you are echoing the text back to the AJAX as soon as you receive the input. You need to count the words first.

<?php

$text = $_POST['text'];
$words = explode(' ', $text);
$result = array_combine($words, array_fill(0, count($words), 0));

foreach ($words as $word) {
    $result[$word] ++;
}

// sort by most to fewest (optional)
arsort($result);

$response = '';
foreach ($result as $word => $count) {
    $response .= $word . ' - ' . $count . '<br/>';
}


$text = array("occurencesString" => $response);
echo json_encode($text);


?>

Upvotes: 1

Related Questions