如何从 html 中检索 jQuery 值

Question

When opening a modal, I'm assigning values with jQuery so they could be used inside the model:

Modal trigger:

<a data-toggle='modal' data-name='$nameCap' data-id='$id' class='open-DeleteDialog' href='#deleteDialog'><i class='fas fa-trash-alt'></i></a>

main.js:

$(document).on("click", ".open-DeleteDialog", function () {
    var categoryId = $(this).data('id');
    var categoryName = $(this).data('name');
    $("#categoryId").val( categoryId );
    $('#deleteConfirmation').text("Are you sure you want to delete this category: " + categoryName + "?");
});

Inside the modal:

  <div class="modal-body">
    <div id="deleteConfirmation">
      <!-- Filled with confirmation from jquery -->
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
    <button id="saveChanges" type="button" class="btn btn-danger">Delete</button>
    <script>

      $(function() {

        $('#saveChanges').on('click', function() {
          var id = $( "#categoryId").val();
          console.log(id)
        });


      });
    </script>

I'm trying to get back #categoryId value but when logging it it returns undefined. What am I doing wrong?

Answer 1

You should add categoryId element with hidden type like this.

<input type="hidden" id="categoryId" />

 $(document).on("click", ".open-DeleteDialog", function () { var categoryId = $(this).data('id'); $("#categoryId").val(categoryId); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a data-toggle='modal' data-name='$nameCap' data-id='123' class='open-DeleteDialog' href='#deleteDialog'><i class='fas fa-trash-alt'></i>123</a> <a data-toggle='modal' data-name='$nameCap' data-id='456' class='open-DeleteDialog' href='#deleteDialog'><i class='fas fa-trash-alt'></i>456</a> <input type="hidden" id="categoryId" /> <hr/> <div class="modal-body"> <div id="deleteConfirmation"> <!-- Filled with confirmation from jquery --> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button id="saveChanges" type="button" class="btn btn-danger">Delete</button> <script> $(function() { $('#saveChanges').on('click', function() { var id = $( "#categoryId").val(); console.log(id) }); }); </script>

Answer 2

 $(function(){ var categoryId; $(document).on('click', '.open-DeleteDialog', function(e){ categoryId = $(this).data('id'); }) $('#saveChanges').on('click', function(e){ alert(categoryId); }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a data-toggle='modal' data-name='$nameCap' data-id='123' class='open-DeleteDialog' href='#deleteDialog'><i class='fas fa-trash-alt'></i>123</a> <a data-toggle='modal' data-name='$nameCap' data-id='456' class='open-DeleteDialog' href='#deleteDialog'><i class='fas fa-trash-alt'></i>456</a> <button id="saveChanges" type="button" class="btn btn-danger">Delete</button>

Why not make global variable instead of creating hidden element?

var categoryId;

$(document).on("click", ".open-DeleteDialog", function () {
    // initialize category id
    categoryId = $(this).data('id');
});

Getting category id value

$('#saveChanges').on('click', function() {
      console.log(categoryId )
});

The code will look like this

$(function() {
    // global variable
    var categoryId;

    $(document).on("click", ".open-DeleteDialog", function () {
        // initialize category id
        categoryId = $(this).data('id');
    });

    $('#saveChanges').on('click', function() {
        console.log(categoryId )
    });
})