javascript - AJAX update every input on textfield word counter -
i using ajax jquery , php program. want display every word type in textfield this:
if typed "this is sample sample word word word", output should like:
//output = 1 = 2 = 1 sample = 2 word = 3 //end_output
my current code displays have typed on textbox , returns it. index.html
<!doctype html> <html> <head> <title>working javascript</title> <script type="text/javascript" src="js/jquery-3.2.1.min.js"> </script> </head> <body> <input type="text" name="input" id="textinput" autofocus/> <div id="content"></div> </body> <script type="text/javascript"> var textinput = document.getelementbyid("textinput"); var jtextinput = $("#textinput"); var divselector = document.getelementbyid("content"); textinput.onkeyup = function () { console.log($("#textinput").val()); $.ajax({ "method": "post", //to specify type of method request in server (get or post) "url": "assigned.php", // send request "datatype": "json", // datatype of request "data": { "text": $("#textinput").val() }, //data values you'll sebd success: function (res) { $("#content").html(res.reversedstring); } }); }; </script> </html>
and other page assigned.php
<?php $var = array("reversedstring" => $_post['text']); echo json_encode($var); ?>
i have idea php , this
$text = $_post['input']; $words = explode(' ', $text); sort($words); $result = array_combine($words, array_fill(0, count($words), 0)); $len = count($words); ($i = 0; $i < $len; $i++) { echo $words[$i] . " "; }echo "<br> <br>"; foreach ($words $word) { $result[$word] ++; } foreach ($result $word => $count) { echo "$word = $count<br>"; }
but have no idea put , how work , if work or not. prefer put on assigned.php. :)
actually need put code in assigned.php
, sent plain text, front-end can them , append html.
but more possible in web develop data transmitted json between front-end , back-end, , mission parse data belongs front-end. can consider changing way return json data @ php. if want send json in php set header header('content-type: application/json')
Comments
Post a Comment