How to retrieve jQuery values back from html

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 )
    });
})