使用 JQuery 清除特定表单字段时遇到问题

Posted 2023-05-09

【中文标题】使用 JQuery 清除特定表单字段时遇到问题

【英文标题】：Trouble clearing a specific form field with JQuery

【发布时间】：2018-06-11 17:00:57

【问题描述】：

我在。我可以清除整个表格，但这不是我想要的。

这里是相关的 html

<article class="panel panel-default" id="<%= dom_id(list) %>">
  <div class="panel-heading"><%= list.name %><%= link_to %(<span class="glyphicon glyphicon-pencil"></span>).html_safe, [:edit, list], remote: true %></div>

<%= form_tag(destroy_multiple_list_items_path(list_id: list.id),method: :delete,remote: true) do %>
  <ul class="list-group sortable" data-update-url="<%= sort_list_path(list) %>">
    <%= render list.items %>
  </ul>

  <div class="panel-footer">
    <%= submit_tag("Delete Selected",  :class => "btn btn-danger") %>
  </div>
  <% end %>


  <div class="panel-footer">
    <%= form_for [list, Item.new], remote: true, html:  class: "form-inline", id: "#dom_id(list)_new_item_form"  do |f| %>
      <div class="form-group">
        <%= f.text_field :content, class: "form-control", id:itemName%>
      </div>
      <%= f.submit "Add Item", name: nil, class: "btn btn-defaultbtn"%>
    <% end %>

  </div>


</article>

我正在尝试清除最后一个 id 为 itemName 的文本字段。

我在渲染项目的创建视图时清除表单，该视图仅在项目成功提交时才会呈现。这是JQuery

  $("#<%= dom_id(@list) %> ul").append("<%=j render 'items/item', item: @item %>");
$('#itemName').trigger("reset");

现在我可以使用清除表单了

$("form").trigger("reset");

但这会清除整个页面上的所有表单字段，包括复选框。该页面包含多个 itemName 输入，我知道此尝试的方法将清除所有这些输入，而不是已提交的特定输入，因此我愿意接受有关仅清除已提交的单个特定 itemName 的任何建议，但如果我可以至少清除那些字段，而不是复选框，那会很棒。

感谢您的帮助。

【问题讨论】：

如果您与呈现的HTML 共享此问题而不是连接服务器代码，则只是一个旁注，更多范围的用户可能能够为您提供帮助，因为实际问题与 javascript 相关跨度>

您不能有重复的IDs。应该只有一个#itemName。 （# 表示 itemName 是 id 而不是 class）。请粘贴输出的 HTML 代码。

【参考方案1】：

您可以使用 querySelectorAll DOM 方法访问表单的每个元素：

document.querySelectorAll('form input').forEach(function(element) 
  element.reset();
);

不知道如何用 jquery 执行它

【参考方案2】：

所以我能够通过获取 .form-inline 类来解决问题。

$(".form-inline").trigger("reset");

这只会重置文本框，而不是复选框。感谢所有帮助。