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

Navigation
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 another to delete the record, and each button also has the data-id=NUMERO DO ID attribute.

What I want is that when the user clicks the change button, I know how to get the information from the senhaA and nivelA fields according to their data-id=NUMERO DO ID

    
asked by anonymous 09.10.2017 / 15:42

1 answer

1

You can do this as follows: 

$(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>FULANO1</td><td>USUARIO1</td><td><inputtype="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 it for the class, as it is better than having buttons with id's repeated), the data-id attribute of the button is stored in the id variable. This id is then used in the JQuery selector, which searches for the input with id 'passwordA' and data-id equal to that of the button. Same thing for 'level'.

    
09.10.2017 / 16:09
Javascript does not recognize Json How to use Jekyll's posts system to make app [closed]