Как реализовать динамическое отображение данных в блоке введёных в текстовое поле?

Question

Есть функционал на PHP, который делает подсчёт символов, а также расчитывает кол-во СМС-сообщений, которое требуется отправить (на основе информации о расчёте длины сообщения). Осталось реализовать мнгновенное, динамическое отображение информации в dive при заполнении input['text'] путём AJAX, Query, JS. Набросал немного код на JS, но без толку, как я понял нужно в свойстве data поймать $_POST['text'], но как именно всё это реализовать понять пока немогу. Кто знает как грамотно всё это дело реализовать?

Мой код:

<?php

var_export($_POST);

function get_encode($textString){
    if(preg_match("/[А-Яа-я]/", $textString)) {
        return 1;
    } elseif(preg_match("/[A-Za-z]/", $textString)) {
        return 0;
    }
    return -1; 
}

function str_split_unicode($str, $l = 1) {
    if ($l > 0) {
        $ret = array();
        $len = mb_strlen($str, "UTF-8");
        for ($i = 0; $i < $len; $i += $l) {
            $ret[] = mb_substr($str, $i, $l, "UTF-8");
        }
        return $ret;
    }
    return preg_split("//u", $str, -1, PREG_SPLIT_NO_EMPTY);
}

function recount(string $textString) {
    $textString = $_POST['text'];
    $symbols = mb_strlen($textString);
    echo 'Количество символов: ' . $symbols;
    echo '<br>';
    $encode = get_encode($textString);
    $ops = [
        [160,153],
        [70,67]
    ];
    $result = str_split_unicode($textString, $ops[$encode][intval($symbols>$ops[$encode][0])]);
    echo 'Количество SMS: ' . count($result);
}

recount("Сообщение");

HTML, JS (index.php) :

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>SMS</title>
    <style>
        input {
            padding: 5px;
            margin: 5px;
        }
        button {
            padding: 5px;
            margin: 5px;
        }
        label {
            padding: 5px;
        }
    </style>
</head>
<body>
    <form method="POST">
        <input type="text" name="text" placeholder="Введите текст">
        <button type="submit" name="submit">Сохранить</button><br>
                <div class="results"></div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $.ajax({
            url: 'function.php',
            method: 'post',
            dataType: 'html',
            data: {text: 'Результат POST запроса'},
            success: function(data){
                $('.results').html(data);
            }
        });
    </script>
</body>
</html>

Answer 1

Решил сам:

    $('#text').keyup(function(event) {
        event.preventDefault();
        $.ajax({
            url: 'function.php',
            method: 'post',
            data: $(this).serialize(),
            success: function(data){
                $('.results').html(data);
            }
        });
    });

БЛОГ НА HUSL

Как реализовать динамическое отображение данных в блоке введёных в текстовое поле?

Ответы (1 шт):