jquery通过名称属性获取值的问题

Question

<%= attendance_form_id %> in jquery contains dynamic unique id of table generated in html view.
i am trying to get radio button value by name attribute project_director[status] .that has same attribute name inside every unique id. i am using alert to get value.

currently my code correctly alerts form submitted value on first page load submission. but second submission onward it alerts first submission alert value. once i reload page it works correct first time.

how can i make alert work correct all time.

js

<script>
   $(document).on('turbolinks:load', function() {
     $('#<%= attendance_form_id %>').on('ajax:success', function(event){
      const [data, status, xhr] = event.detail
      //alert(status)
      value = $('input[name="project_director[status]"]:checked').val();
      alert(value)
      $('#<%= attendance_form_id %>').hide()
     }).on('ajax:error',function(event){
        alert("Something went wrong, please reload page")
     });
   });
</script>

html code

<table id="attendance_form_29">
   <tbody>
      <tr>
         <td>
            <ul>
               <div>
                  <div class="wrapper-class">
                     <input type="radio" value="true" name="project_director[status]" id="project_director_status_true">
                     <label for="project_director_approve">Approve</label>
                     <br>
                     <input type="radio" value="false" name="project_director[status]" id="project_director_status_false">
                     <label for="project_director_reject">Reject</label>
                  </div>
  
               </div>
            </ul>
         </td>
         <td>
            <input value="4" type="hidden" name="project_director[user_id]" id="project_director_user_id">
            <input type="submit" name="commit" value="Submit" class="button primary small" data-disable-with="Submit">
         </td>
      </tr>
   </tbody>
</table>

Answer 1

If I understand correctly, you need to get value of input[name="project_director[status]"] inside the form that has <%= attendance_form_id %> id. In this case $('input[name="project_director[status]"]:checked').val() will not work as expected because you have multiple input with this name as mentioned ( has same attribute name inside every unique id ). To make it work, you can use .find() :

$(document).on('turbolinks:load', function() {
 $('#<%= attendance_form_id %>').on('ajax:success', function(event){
  const [data, status, xhr] = event.detail;
  //change here
  value = $('#<%= attendance_form_id %>').find('input[name="project_director[status]"]:checked').val(); 
  alert(value)
  $('#<%= attendance_form_id %>').hide()
 }).on('ajax:error',function(event){
    alert("Something went wrong, please reload page")
 });
});