Find data with JSON [closed]

Question

Find data with JSON [closed]

Navigation

#1 by (0 votes)

-1

I need to, with a <select> </select> , bring the data to some input[type='text'] . I believe it is through JSON and AJAX, because the page can not have any "Submit".

For example:

I have a <select> </select> to select a student in my classroom, and some input[type='text'] to bring the data of the selected student, such as " age ", " room number "," parent name "," parent name ", and more. The page can not have Submit because I have more than <select> </select> that will do the same role (when selecting an item, it will be displayed in input[type='text'] its characteristics). The form that I was able to develop allows to bring the data of one or the other <select> </select> .

I hope you have understood my problem. I'm inexperienced in JS.

PHP code:

<?php $query="SELECT idFunc AS 'ID', nomeFunc AS 'NOME', idadeFunc AS 'IDADE' FROM funcionario WHERE statusFunc = '1' ORDER BY nomeFunc"; ?>

<form method="GET" action="">
    <select name="aluno" onclick="if (this.value != ''){this.form.submit()};">
        <option value="">- ALUNOS -</option>

<?php   $sql =  odbc_exec($con, $query);

        $i=0; 
        while(odbc_fetch_row($sql)){

            $id=odbc_result($sql,"ID");
            $nome=odbc_result($sql,"NOME");
            $idade=odbc_result($sql,"IDADE");

            $i++;
?>
        <option value="<?php echo $id; ?>" ><?php echo $nome; ?></option>
<?php   
        } odbc_close($con); 
?>
    </select>
</form>

In PHP, I was able to do what I wanted, but when I select another checkbox, it deletes the first result and displays the results of the second. I could make the user select the two items and after doing a Submit, the information would appear, but I want to make a more intuitive system, in which the user just select and appear in real time for him.

Result:

About any questions or comments, I am at your disposal.

javascript html jquery ajax json

asked by anonymous 05.11.2018 / 15:40

1 answer

How to transform sql scripts into liquibase xml? How to get text from a Span with Class [VB.NET]

score 0 · Accepted Answer

Do you already have web service in your PHP? Making an asynchronous request (AJAX) with jQuery or Axios is easier, but you can also use native solutions like fetch.

function ajax(id) {
    return fetch('/meuWebservice?id=${id}').then(r => {
        if (r.ok) return r.json();
        throw r.text();
    });
}

So in your PHP you would have something like

public function meuWebservice() {
    $id = $_GET['id'];
    $query = "SELECT * FROM {/*sua tabela*/} WHERE idAluno = '$id'";
    $sql =  odbc_exec($con, $query);
    odbc_fetch_row($sql);

    $retorno = [];
    $retorno['resultado'] = [
        'idade' => $nome=odbc_result($sql,"IDADE"),
        'numero_da_sala' => $idade=odbc_result($sql,"NUMEROSALA"),
        'nome_mae' => $idade=odbc_result($sql,"NOMEMAE"),
        'nome_pai' => $idade=odbc_result($sql,"NOMEPAI")
    ];

    odbc_close($con);
    echo JSON_ENCODE($retorno);
    die();
}

Now in JavaScript, create a function to call on select onchange. It can also be an eventListener. Declaring the function as async allows us to use await to wait for the fetch response, which is a promise.

async function buscaInfo() {
    try{
        let {resultado} = await ajax(this.value);
        document.getElementById('idade_aluno').value = resultado.idade;
        document.getElementById('numero_sala').value = resultado.numero_sala;
        document.getElementById('nome_mae').value = resultado.nome_mae;
        document.getElementById('nome_pai').value = resultado.nome_pai;

    } catch (err) {
        console.error('Erro na consulta', await err);
    }   
}

This is all a blind example, you'll need to adjust the ids of the elements, sort the PHP query, start the $ con with the correct value.