insert into an imput table data

Question

I want the user to click on a button, the values of the row corresponding to the button, table to be inserted inside an imput. But by the script I made it is only inserting the first value of the table, because when I click the second it inserted the first.

NOTE: the table values I’m pulling from the database.

Follow my PHP table:

<?php
    require_once("classes/conecta.php");
    $conectando = new CONEXAO();
    $resposta = $conectando->Consulta("SELECT * FROM clientes_cli");
?>
<br>
<table >
    <thead>
        <tr>
            <td width="40px"><b>Nome</b></td>
            <td width="550px"><b>Sobrenome</b></td>
        </tr>
    </thead>
    <tbody> 
        <?php while ($inte = mysqli_fetch_assoc($resposta)) : ?>
        <tr>
        <td id="nome_lin">
       <?php echo $inte['nome_cli']; ?>
            </td>
            <td id="sobrenome_lin">
                <?php echo $inte['sobrenome_cli']; ?>
            </td>
            <td>
            <button onclick="alimentarCampo()" class="btn btn-primary">Alterar</button>
            </td>
        </tr>
        <?php endwhile; ?>
    </tbody>
</table>

Follow my PHP the imputs:

    <form method="post" action="classes/consulta.php">
    <div class="row">
    <div class="col-6">
        <div class="form-group">
            <label>Nome</label>
            <input type="text" id="nome_input" class="form-control" name="nome">
        </div>
        </div>
        </div>
        <div class="row">
        <div class="col-6">
        <div class="form-group">
            <label>Sobrenome</label>
            <input type="text" class="form-control" id="sobrenome_input" name="sobrenome">
        </div>
        <button type="submit" class="btn btn-primary">Adicionar</button>
        <button type="submit" class="btn btn-primary">Alterar</button>
        <button type="submit" class="btn btn-primary">Excluir</button>
        </div>
        </div>
    </form>

Also follow my javascript:

function alimentarCampo() {
var nome_do_cliente = document.getElementById("nome_lin");
var sobrenome_do_cliente = document.getElementById("sobrenome_lin");
document.getElementById("nome_input").value = nome_do_cliente.innerText;
document.getElementById("sobrenome_input").value = sobrenome_do_cliente.innerText;

}

Answer 1

The problem with your code is using the same id for all rows in the table, when working with id, use unique id’s to manipulate the elements. In your case I do not see the need to manipulate these id’s, since their fields are written via php and are already exposed on the screen, I believe I can send the data by parameter to the javascript function. With the amendments:

<?php
    require_once("classes/conecta.php");
    $conectando = new CONEXAO();
    $resposta = $conectando->Consulta("SELECT * FROM clientes_cli");
?>
<br>
<table >
    <thead>
        <tr>
            <td width="40px"><b>Nome</b></td>
            <td width="550px"><b>Sobrenome</b></td>
        </tr>
    </thead>
    <tbody> 
        <?php while ($inte = mysqli_fetch_assoc($resposta)) : ?>
            <tr>
                <td> //Removido o id, não vamos mais precisar dele
                    <?php echo $inte['nome_cli']; ?>
                </td>
                <td> //Removido o id, não vamos mais precisar dele
                    <?php echo $inte['sobrenome_cli']; ?>
                </td>
                <td>
                    <button onclick="alimentarCampo(<?php echo $inte['nome_cli']; ?>, <?php echo $inte['sobrenome_cli']; ?>)" class="btn btn-primary">Alterar</button>//adicionado o nome_cli e sobrenome_cli como parâmetro
                </td>
            </tr>
        <?php endwhile; ?>
    </tbody>
</table>

And in javascript:

function alimentarCampo(nome_do_cliente , sobrenome_do_cliente ) { //recebemos o parâmetro
    //var nome_do_cliente = document.getElementById("nome_lin");
    //var sobrenome_do_cliente = document.getElementById("sobrenome_lin");
    //document.getElementById("nome_input").value = nome_do_cliente.innerText;
    //document.getElementById("sobrenome_input").value = sobrenome_do_cliente.innerText;
    document.getElementById("nome_input").value = nome_do_cliente;
    document.getElementById("sobrenome_input").value = sobrenome_do_cliente;
}

Answer 2

It turns out that there are several elements with the repeated ID, and the document.getElementById will access the first element he finds with the past id. One output is to make this id dynamic, using the field ID in the database table, for example:

Table:

<?php
    require_once("classes/conecta.php");
    $conectando = new CONEXAO();
    $resposta = $conectando->Consulta("SELECT * FROM clientes_cli");
?>
<br>
<table >
    <thead>
        <tr>
            <td width="40px"><b>Nome</b></td>
            <td width="550px"><b>Sobrenome</b></td>
        </tr>
    </thead>
    <tbody> 
        <?php while ($inte = mysqli_fetch_assoc($resposta)) : ?>
        <tr>
        <!-- O id dessa coluna se torna nome_lin_IdDoCampoNoBanco -->
        <td id="nome_lin_<?php echo $inte['id']; ?>">
       <?php echo $inte['nome_cli']; ?>
            </td>
        <!-- Similarmente, o id dessa se torna sobrenome_lin_IdDoCampoNoBanco -->
            <td id="sobrenome_lin_<?php echo $inte['id']; ?>">
                <?php echo $inte['sobrenome_cli']; ?>
            </td>
            <td>
            <button onclick="alimentarCampo(<?php echo $inte['id']; ?>)" class="btn btn-primary">Alterar</button>
            </td>
        </tr>
        <?php endwhile; ?>
    </tbody>
</table>
<br>

Javascript

function alimentarCampo(id) {
    var nome_do_cliente = document.getElementById("nome_lin" + id);
    var sobrenome_do_cliente = document.getElementById("sobrenome_lin" + id);
    document.getElementById("nome_input").value = nome_do_cliente.innerText;
    document.getElementById("sobrenome_input").value = sobrenome_do_cliente.innerText;
}