Looping jquery grab button value and put on label

Asked

Viewed 154 times

0

My dears,

I have a table of users, and for each user I have a button that opens a modal:

{% for item in lista_usuarios %}
    <tr>
        <td>{{ item.first_name }}</td>

        <button data-target="modal1" class = "oi" type = "button" value="{{item.id}}"  class = "btn waves-effect waves-light blue" data-index="{{item.id}}" onclick="$('#modal1').modal('open');" >
            <i class="large material-icons">clear</i>
        </button>
        </td>
    </tr>

As you can see, the value of this button is already getting the id of each user, this is correct.

Inside the modal, I have a label and I need the value of this id to be passed to her.

 <input type="text" class="usuario">

<script>

    $(document).ready(function(){
        $(".oi").each(function() {
            $(this).click(function() {
                alert("teste");
                $('.modal').modal();
                var id = $(".oi").val();
                alert(id);
                $(".usuario").val(id);
            });
        });
    });


</script>

The modal is working and the 2 Alerts are working. But is passing the same user id always, is passing only the id of the first user to the label inside the modal.

javascript jquery
  • 2

    Instead of doing var id = $(".oi").val(), try to do var id = $(this).val()

  • Thank you Anderson, that’s all! But you know tell me because the way I did wasn’t working out?

  • Bianca, yes, because doing $(".oi")you will find all elements of the page that have the class oi and making .val() the value of the first item in the list will always be returned. With $(this) you select only the element you want and thus, .val() returns the desired value.

1 answer

1

I see no need to use $.each in that case. Follow the example below and implement to your reality that will work.

$(document).ready(function(){
  $('body').on ('click', 'table > tbody > tr > td button.oi', function (ev) {
    console.log ($(this).val());
  });
    
});

var openModal = function () {
  console.log ('Executando openModal.');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>item 10</td>
      <td>
        <button data-target="modal1" class = "oi" type = "button" value="10"  class = "btn waves-effect waves-light blue" data-index="10" onclick="openModal();" >
          <i class="large material-icons">clear</i>
        </button>
      </td>
    </tr>
    <tr>
      <td>item 20</td>
      <td>
        <button data-target="modal1" class = "oi" type = "button" value="20"  class = "btn waves-effect waves-light blue" data-index="20" onclick="openModal();" >
          <i class="large material-icons">clear</i>
        </button>
      </td>
    </tr>
    <tr>
      <td>item 30</td>
      <td>
        <button data-target="modal1" class = "oi" type = "button" value="30"  class = "btn waves-effect waves-light blue" data-index="30" onclick="openModal();" >
          <i class="large material-icons">clear</i>
        </button>
      </td>
    </tr>
  </tbody>
</table>

Browser other questions tagged javascript jquery

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