Question

我在使用JQuery清除特定表单字段时遇到问题。我能够清除整个表格，但这不是我想要的。

以下是相关的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的建议，但如果我能至少清楚那些字段，而不是复选框，这将是伟大的。

我很感激帮助。

Answer 1

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

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

不确定如何使用jquery来执行它

Answer 2

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

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

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

无法使用JQuery清除特定的表单字段

2 个答案: