How do I play an input value without submitting a form or button

Question

Hi, I wanted to get the input value "codigo_cat" and play in the variable $id_categoria that is at the bottom of the code PHP, to be able to run select using this variable as parameter. By method GET And POST I could do, the problem is that I’m not submitting any form or button, for a method to be used.

Is there any way to do that? If anyone knows how to help me. I’ve been trying for 2 days! Thank you.

<div class="row">
    <div class="col-md-3">
        <div class="form-group">
            <label for="codigo">Código</label>
            <input name="codigo" id="codigo_cat" type="text" class="form-control form-control-sm" placeholder="0" readonly>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <?php 
            $id_categoria = (QUERO O VALOR DO INPUT AQUI);

            $query = "SELECT ativo AS ativo_status FROM categoria WHERE idCategoria = '$id_categoria'";
            $result = mysqli_query($conexao, $query);
            $row = mysqli_fetch_assoc($result);

            if ($row['ativo_status'] == 'S') {
        ?>
            <input type="checkbox" id="ativo" name="ativo" checked>
        <?php
            } else {
        ?>
            <input type="checkbox" id="ativo" name="ativo">
        <?php
            }
        ?>

        <label for="ativo">Ativo</label>
    </div>
</div>

Answer 1

It is not possible to do so. The PHP interpreter will be executed at the time of the browser request. You need to understand that there are two actors: server and client. The server is responsible for processing PHP and sends to the client (browser) the result of the already processed PHP code. What you want to do is to process PHP code on the browser side and this is not possible, for this there is javascript.

What you want can only be obtained through javascript, or using Ajax or using javascript only. But I advise to study more about how PHP works and how requests to a web server occurs, in addition to better understand the http protocol and then Javascript and finally understand how Ajax works.

Answer 2

Francis has a prayer that what you want to do the way you’re trying to do doesn’t work. You’ll have to take a look at $ajax jQuery and include it on your page.

You’d be wearing something like that .load which is simpler:

<div class="row">
    <div class="col-md-3">
        <div class="form-group">
            <label for="codigo">Código</label>
            <input name="codigo" id="codigo_cat" type="text" class="form-control form-control-sm" placeholder="0" readonly>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12" id="retorno"> <!--vai ter que dar um id aqui -->
    </div>
</div>

<script>
    $("$codigo-cat").change(function(){
        var id_categoria = $(this).val();
        $("#retorno").load("consulta.php", {"id_categoria": id_categoria});
    });
</script>

PHP (query.php):

<?php 
    $id_categoria = $_POST['id_categoria'];
    $query = "SELECT ativo AS ativo_status FROM categoria WHERE idCategoria = '$id_categoria'";
    $result = mysqli_query($conexao, $query);
    $row = mysqli_fetch_assoc($result);
    if ($row['ativo_status'] == 'S') {
        echo '<input type="checkbox" id="ativo" name="ativo" checked>';
    } else {
        echo '<input type="checkbox" id="ativo" name="ativo">';
    }
?>

So whenever there are changes in the id_category the query will be called asynchronously by returning the input given by php echo.

Answer 3

Francisco Eduardo is right. Here’s a simple example for Ajax

HTML

<form onsubmit="return OnSubmitData(this)">
    <input type="text" name="teste">
    <button type="submit">Enviar</button>
</form>

JAVASCRIPT

function OnSubmitData(e)
{    
    let oForm = document.forms[e.id];
    // Loop dos campos do formulario
    for(var i = 0; i < oForm.elements.length; i++)
    {
        let elemForm = oForm.elements[i];
        // Ele aqui ignora o botao submit
        if( elemForm.getAttribute("type") == "submit" ) continue;
        // Mostra os resultados dos campos do formulario
        console.log(elemForm.name + ": " + elemForm.value );
    }
    // Cancela acao 'OnSubmit' de envio do formulario
    return false;
}

Function to send the data

function SendDataToServer(_data)
{
  var xmlhttp = new XMLHttpRequest();
  //
  xmlhttp.onreadystatechange = function() {
      //
      if (this.readyState == 4 && this.status == 200) {
          //
          console.log("Texto recebido do servidor -> " + this.responseText);
      }
  };
  // Aqui envia os dados 
  xmlhttp.open("GET", "php/TeuFicheiro.php?data="+_data, true);
  xmlhttp.send();
}

I hope it helps something