Search code examples
javascriptjqueryspringthymeleaf

How Can I get Data when I click data ON or OFF by JavaScript and Spring

enter image description here

This is my Thymleaf each Data from Database

<div class="column val" th:each="nameApp,iStat:${listAppName}" id="valCheck">
  <div  class="Checkbox">
    <input type="text" th:value="${nameAppID.auto_detail_id}" hidden>
    <input type="text" th:value="${nameApp.application_id}" id="appID">
    <input type="checkbox" data-toggle="toggle" data-size="small">
      <label><spanth:text="${nameApp.application_name}"></span></label>
   </div>
</div>

This one is my JavaScript

$(".val").click(function(){
    let appID= document.getElementById("appID").value;
    var checkedValue = $(this).find(':checkbox').is(":checked")? 'On' : 'Off';
            
    console.log(appID);

});

That I need when I Click on OFF or ON if get Data appID and auto_detail_id

Solution

  • You can select the text input inside the clicked <div>.

    let appID = $('input[type=text]', this).val();

    Note that you should not have duplicate ids in a document. Use classes instead to group similar elements.