Pass button value to modal

Question

I need help with the javascript code, I’m new and I’m not really sure what the syntax is. What I need is to take the value of this button and play on the id_usuario label, as I do?

<button data-target="modal1" class="negar" value="{{item.id}}" class="btn modal-trigger blue"><i class=" large material-icons ">clear</i

    <!-- Modal Structure -->
    <div id="modal1" class="modal">
        <div class="modal-content">
            <h4>Motivo</h4>
            <form method="POST" action="." class="viewform" id="formMotivo">
              <label id=id_usuario> </label>
                <button type="submit" name="salvar" class="btn btn-primary btn-lg">Salvar</button>    
            </form>
        </div>
        <div class="modal-footer"></div>
    </div>
    script>

             $(document).ready(function(){


      **document.getElementById("id_usuario").innerHTML = btn(negar).value;**

             });

Answer 1

The @Isac comment is pertinent, because if you don’t need interaction you could just use {{item.id}} directly on label. But I will consider that you just simplified for the question.

I think you could do it like this:

document.getElementById("id_usuario").innerHTML = document.getElementsByClassName("negar")[0].getAttribute("value");

But seeing in your code you using Jquery, I believe it would be better if you standardized the use of it.

Thus remaining:

$("#id_usuario").text($(".negar").attr("value"));

Snippet:

<button data-target="modal1" class="negar" value="{{item.id}}" class="btn modal-trigger blue">
  <i class=" large material-icons ">clear</i>
</button>
<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Motivo</h4>
    <form method="POST" action="." class="viewform" id="formMotivo">
      <label id=id_usuario></label>
      <button type="submit" name="salvar" class="btn btn-primary btn-lg">Salvar</button>    
    </form>
  </div>
  <div class="modal-footer"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $("#id_usuario").text($(".negar").attr("value"));
  });
</script>

Answer 2

How you use Jquery, you can use in your button, an attribute of type date-*, turning him into:

<button data-itemid="{{item.id}}" onclick="OpenModalFor(this)"></button>

And recover the value in the function as follows:

function OpenModalFor(clicked_button) {
   var item_id = $(clicked_button).data('itemid');
   $('#id_usuario').text(item_id);
}