Как записать данные в БД, а также отобразить текст в текстовом поле?

Есть функционал, который считывает количество символов введёных в текстовое поле, а также делает расчёт о том, сколько нужно отправить SMS-сообщений на основе этой информации. Нужно записать данные (Количество символов, количество смс) в БД при клике на кнопку, функционал записи в БД написан, единственной проблемой является то, что я немогу вытянуть значения $symbols(количество символов) и $count(количество СМС), исходя из этого, запись в БД идёт пустая. Помимо этого, есть функционал транслитерации, который срабатывает при установке галочки на чекбоксе, проблемой для меня является то, что результат текста должен отображаться в текстовом поле, сейчас весь этот результат отображается в специальном блоке (div). Как мне записать данные в БД, а также, как мне вывести результат транслитерации в текстовое (в тоже место откуда пришли данные для операции транслитерации)???

Мой код:

index.php

<form method="POST">
    <input type="text" name="text" id="text" placeholder="Введите текст">
    <button type="submit" name="submit" id="submit">Сохранить</button><br>
    <div class="results">
        <span>Количество символов: 0</span><br>
        <span>Количество SMS: 0</span>
    </div>
    <input type="checkbox" name="translit" id="translit"><span 
class="checkbox_text">Транслитерировать</span>
    <br>
    <span>Результат транслитерации:</span>
    <span class="results_translit" id="results_translit"></span>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="recount.js"></script>
<script src="translit.js"></script>
<script src="db.js"></script>

recount.php

<?php

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);
}

$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])]);
$count = count($result);
echo 'Количество SMS: ' . $count;

db.php

<?php

require_once 'recount.php';

$dbh = new PDO('mysql:host=localhost;dbname=sms', 'root', 'root');

$data = [
'symbols' => $symbols,
'count' => $count,
];

$sql = "INSERT INTO sms (symbols, count) VALUES (:symbols, :count)";
$stmt= $dbh->prepare($sql);
$stmt->execute($data);
return $stmt;

recount.js

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

translit.js

const checkbox = document.getElementById('translit')

checkbox.addEventListener('change', (event) => {
if (event.target.checked) {
    let formData = $('#text').serialize();
    $.ajax({
        url: 'translit.php',
        type: "POST",
        data: formData,
        success: function(data) {
            $('.results_translit').html(data);
        }
    });
} else {
    let myStr = document.getElementById('text').value;
    document.getElementById('results_translit').innerHTML = myStr;
}
})

db.js

$('#submit').click(function(event) {
event.preventDefault();
$.ajax({
    url: 'recount.php',
    method: 'post',
    success: function(data){
        alert('Данные успешно записаны в БД!');
    }
});
});

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

Автор решения: Sergei Kirjanov

Исходя из примеров, в ключе есть ::

https://www.php.net/manual/ru/pdostatement.execute.php

$data = [
  ':symbols' => $symbols,
  ':count' => $count,
];

Возвращайте json, и распихивайте по элементам:

header('Content-Type: application/json');
echo json_encode(array(
    "text" => ...,
    "smsCount" => ...,
    ...
));
$.ajax({ 
  dataType: 'json',
$("#text").val(data.text);
→ Ссылка
Автор решения: Hey One

В общем решил, в файл db.js, который посылает запрос в БД при клике на кнопку Сохранить, я добавил свойство data, а значение этого свойства - данные введёные пользователем в форме, то есть, проблема записи в БД была в том, что просто напросто не было данных с которыми нужно было работать.

db.js:

$('#submit').click(function(event) {
event.preventDefault();
$.ajax({
    url: 'db.php',
    method: 'post',
    data: $('#text').serialize(),
    success: function(data){
        alert('Данные успешно записаны в БД!');
    }
});
});

Проблему обратной транслитерации я решил не самым лучшим способом, время поджимало, пришлось сделать так:

const checkbox = document.getElementById('translit')

checkbox.addEventListener('change', (event) => {
if (event.target.checked) {
    let formData = $('#text').serialize();
    $.ajax({
        url: 'translit_cyrillic.php',
        type: "POST",
        data: formData,
        success: function(data) {
            $('#text').val(data);
        }
    });
} else {
    let formData = $('#text').serialize();
    $.ajax({
        url: 'translit_latin.php',
        type: "POST",
        data: formData,
        success: function(data) {
            $('#text').val(data);
        }
    });
}
})

При установке галочки на чекбос шёл запрос на php скрипт, который переводил в латиницу, а при снятии на другой php-скрипт, который переводил в кириллицу. Если кто-то знает способ лучше этого, буду рад узнать:)

→ Ссылка