How to take the value of an input, according to a DATA attribute

Asked

Viewed 686 times

0

I have the following table:

<tr>
    <td>FULANO 1</td>
    <td>USUARIO 1</td>
    <td>
        <input type="text" data-id="1" class="form-control" id="senhaA" size="6">
    </td>
    <td>
        <select class="form-control" data-id="1" style="width:auto;" id="nivelA">
            <option value="0">Desativado</option>
            <option value="1">Digitador</option>
            <option value="2">Administrador</option>
        </select>
    </td>
    <td>
        <a href="#" id="atualizar" data-id="1" class="btn btn-primary">Atualizar</a>
    </td>
    <td>
        <a href="#" id="excluir" data-id="1" class="btn btn-danger">Excluir</a>
    </td>
</tr>

<tr>
    <td>FULANO 2</td>
    <td>USUARIO 2</td>
    <td>
        <input type="text" data-id="2" class="form-control" id="senhaA" size="6">
    </td>
    <td>
        <select class="form-control" data-id="2" style="width:auto;" id="nivelA">
            <option value="0">Desativado</option>
            <option value="1">Digitador</option>
            <option value="2">Administrador</option>
        </select>
    </td>
    <td>
        <a href="#" id="atualizar" data-id="2" class="btn btn-primary">Atualizar</a>
    </td>
    <td>
        <a href="#" id="excluir" data-id="2" class="btn btn-danger">Excluir</a>
    </td>
</tr>

It follows a pattern where each line receives attributes data-id=NUMERO DO ID

At the end of each line there are two buttons: one to change the data and one to delete the record and each button also has the attribute data-id=NUMERO DO ID.

What I want is that when the user clicks on the change button, know how to get the information of the fields senhaA and nivelA in accordance with their respective data-id=NUMERO DO ID

jquery
  • 1

    Maybe this will help: https://jsfiddle.net/2pmn1ems/3/, https://answall.com/questions/130803/passar-id-de-um-dado-de-uma-tabela-para-a-modal

1 answer

1


You can do it this way:

$(document).ready(function(){
  $(".atualizar").on("click", function(){
    var id = $(this).data("id");
    
    var senha = $("input[id='senhaA'][data-id='"+id+"']").val();
    var nivelA = $("select[id='nivelA'][data-id='"+id+"']").val();
    
    console.log("senha: "+senha+", nivelA: "+nivelA);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
    <td>FULANO 1</td>
    <td>USUARIO 1</td>
    <td>
        <input type="text" data-id="1" class="form-control" id="senhaA" size="6">
    </td>
    <td>
        <select class="form-control" data-id="1" style="width:auto;" id="nivelA">
            <option value="0">Desativado</option>
            <option value="1">Digitador</option>
            <option value="2">Administrador</option>
        </select>
    </td>
    <td>
        <a href="#" id="atualizar" class="atualizar" data-id="1" class="btn btn-primary">Atualizar</a>
    </td>
    <td>
        <a href="#" id="excluir" class="excluir" data-id="1" class="btn btn-danger">Excluir</a>
    </td>
</tr>

<tr>
    <td>FULANO 2</td>
    <td>USUARIO 2</td>
    <td>
        <input type="text" data-id="2" class="form-control" id="senhaA" size="6">
    </td>
    <td>
        <select class="form-control" data-id="2" style="width:auto;" id="nivelA">
            <option value="0">Desativado</option>
            <option value="1">Digitador</option>
            <option value="2">Administrador</option>
        </select>
    </td>
    <td>
        <a href="#" class="atualizar" id="atualizar" data-id="2" class="btn btn-primary">Atualizar</a>
    </td>
    <td>
        <a href="#" class="excluir" id="excluir" data-id="2" class="btn btn-danger">Excluir</a>
    </td>
</tr>

When the button is clicked (I gave a class and selected by class as it is better than having buttons with repeated id’s), the attribute data-id button is saved in variable id. That one id then it is used in the Jquery selector, which searches the input with id 'password' and data-id same as the button. Same thing for 'level'.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.