run mysql query without reloading webpage [duplicate]

Question

I am generating a table via if loop, and if data is not found an is displayed so I can type the data needed.

Then I needed that when I click outside of the textbox the data is saved in the database. the problem I am having is that only the first textbox is saved the others that follow are not being saved.

bellow you can see the related code:

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

You're already using jQuery then why don't you make ajax call using jQuery it's pretty simple. Here is main.php code.

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 file code:

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

Answer 2

First I recommended you change this lines:

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

In something this:

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

This should prevent from SQL injection...

---

I guess you using same ID for everybody new field?

If yes, you can update your code using this lines:

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

First line initialize all inputs which contains id started by 'new_text'... and second line helps get value for input, so you don't need to know id... But if you need id, you can use:

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

And inside 'e', can find id ant other usually information...