выполнить запрос MySQL без перезагрузки веб-страницы

Question

Я создаю таблицу с помощью цикла if, и если данные не найдены, отображается, чтобы я мог ввести необходимые данные.

Затем мне нужно было, чтобы при нажатии за пределами текстового поля данные сохранялисьв базе данных. у меня проблема в том, что сохраняется только первое текстовое поле, остальные не сохраняются.

ниже вы можете увидеть соответствующий код:

main.php

if(empty($code))
{
    ?>
        <input type="text" id="new_text" placeholder="title" style="width: 80px;">
        <div id="check_new_text" style="text-align: right; margin-right: 25px;"></div>
        <script>
            $("#new_text").blur(function()
            {
                //alert("This input field has lost its focus.");
                var new_text = document.getElementById("new_text").value;

                var myRequest = new XMLHttpRequest();
                myRequest.open("GET", "save_query.php?code=<?=$code?>&new_text=" + new_text);
                myRequest.onreadystatechange = function () { 
                    if (myRequest.readyState === 4) {
                        document.getElementById('check_new_text').innerHTML = myRequest.responseText;
                    }
                };
                myRequest.send();
                document.getElementById('reveal').style.display = 'none';
            });
        </script>
    <?php
}

save_query.php

<?php
    $code = $_GET['code'];
    $new_text = $_GET['new_text'];

    if(!empty($new_text))
    {
        $sql_new_text = "INSERT INTO `table` (`code`, `text`) VALUES ('$code', '$new_text');";
        if ($connection->query($sql_new_text) === TRUE)
        {
            echo "<font color=green style='font-size: 12px;'><i class='fas fa-check'></i> Saved sucessfully.</font>";
        }
        else
        {
            echo "<font color=red style='font-size: 12px;'><i class='fas fa-times'></i>Error updating record: " . $connection->error."</font>";
        }
    }
?>

Answer 1

Сначала я порекомендовал вам изменить эти строки:

$code = $_GET['code'];
$new_text = $_GET['new_text'];

Во что-то такое:

$code = filter_input(INPUT_GET, 'code', FILTER_SANITIZE_NUMBER_INT);
$new_text = filter_input(INPUT_GET, 'new_text', FILTER_SANITIZE_STRING);
$new_text = htmlspecialchars($new_text);

Это должно предотвратить внедрение SQL ...

---

Я полагаю, вы используете один и тот же идентификатор для каждого нового поля?

Если да, вы можете обновить свой код, используя следующие строки:

$('input[id^="new_text"]').blur("click", function(){
var new_text = this.value;

Первая строка инициализирует все входные данные, которые содержат идентификатор, начинающийся с 'new_text' ... а вторая строка помогает получить значение дляввод, так что вам не нужно знать идентификатор ... Но если вам нужен идентификатор, вы можете использовать:

$('input[id^="new_text"]').blur("click", function(e){

А внутри 'e' можно найти идентификатор и другую обычно информацию ...

Answer 2

Вы уже используете jQuery, тогда почему бы вам не сделать вызов ajax с помощью jQuery, это довольно просто. Вот код main.php.

if(empty($code))
{
    ?>
        <input type="text" id="new_text" placeholder="title" style="width: 80px;">
        <div id="check_new_text" style="text-align: right; margin-right: 25px;"></div>
        <script>
            $("#new_text").blur(function()
            {
                //alert("This input field has lost its focus.");
                var new_text = $("#new_text").val();
                $.ajax({
                    url: '/save_query.php',// Url to save_query.php file
                    type: 'POST',
                    data: { "code": $code, "new_text": new_text },
                    success: function(response) {
                        $('#check_new_text').html(response);
                        $('#reveal').css("display", "none");
                    },
                    error: function(){},
                });
            } 
        </script>
    <?php
}

Код файла save_query.php:

<?php
    $code = $_POST['code'];
    $new_text = $_POST['new_text'];

    if(!empty($new_text))
    {
        $sql_new_text = "INSERT INTO `table` (`code`, `text`) VALUES ('$code', '$new_text');";
        if ($connection->query($sql_new_text) === TRUE)
        {
            echo "<font color=green style='font-size: 12px;'><i class='fas fa-check'></i> Saved sucessfully.</font>";
        }
        else
        {
            echo "<font color=red style='font-size: 12px;'><i class='fas fa-times'></i>Error updating record: " . $connection->error."</font>";
        }
        die();
    }
?>