jquery 在按名称属性获取值时出现问题

Posted 2023-05-09

【中文标题】jquery 在按名称属性获取值时出现问题

【英文标题】：jquery issue in getting value by name attribute

【发布时间】：2021-01-05 04:58:34

【问题描述】：

<%= attendance_form_id %> 在 jquery 中包含在 html 视图中生成的表的动态唯一 id。 我试图通过名称属性project_director[status]获取单选按钮值。在每个唯一ID 中具有相同的属性名称。我正在使用警报来获取价值。

目前我的代码在第一页加载提交时正确地提醒表单提交的值。但第二次提交之后它会提醒第一次提交警报值。一旦我重新加载页面，它第一次就可以正常工作。

我怎样才能让警报始终正确工作。

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代码

<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>

【参考方案1】：

如果我理解正确，您需要在具有<%= attendance_form_id %> id 的表单中获取input[name="project_director[status]"] 的值。在这种情况下，$('input[name="project_director[status]"]:checked').val() 将无法按预期工作，因为您有多个使用上述名称的输入（在每个唯一 id 中具有相同的属性名称）。要使其工作，您可以使用.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")
 );
);

【讨论】：

也许你没有检查收音机

我检查了所有表单的单选按钮问题都相同

你能试试console.log($(this).find('input[name="project_director[status]"]').val())吗？

console.log($(this).find('input[name="project_director[status]"]').val()) 与undefined 的输出相同

console.log($('#<%= attendance_form_id %>').find('input[name="project_director[status]"]:checked').val()) 怎么样？