JavaScript中重置一个表单数组

Question

我有一个表单评论区，用户可以回复评论。每个评论都有一个带有回复框的表单。我从数据库中获取评论并运行以下循环：

@foreach($responses as $response)
<form action="{{action('DiscussionController@postAnswerQuestion',[$entry_year, $grade_id, $subject_id, $question_id])}}" method="post" name="replyForm" class="commentForm" >
<li>{{$response->answer}}</li>
<div id="reply">
<input type="text" name="reply" value="" placeholder="Reply" >
</div>

<input type="hidden" name="response_id" value="{{$response->id}}">
<input type="hidden" name="_token" value="{{{csrf_token()}}}">
<input type="submit" name="" value="reply"   >

</form>

@endforeach  

我正在使用jQuery和Ajax提交页面，当用户提交回复后，我想重置表单字段。

当我使用

document.forms.replyForm.reset();

只有第一个表单被重置，循环中的其他表单没有被重置。

我该如何做才能在用户提交回复后重置每个表单。

- user3714932

---

您会发现document.forms实际上是一个数组。因此请利用这一点。 - RiggsFolly

Answer 1

你能试试这个：

。

$('.commentForm').trigger("reset");

- brute_force

Answer 2

主要原因是 document.forms 返回一个数组，但你只重置了第一个表单，尝试循环每个表单：

$('[name="replyForm"]').each(function(){
   this.reset();
});

或者使用JavaScript：

 var forms = document.forms;
    for (var i = 0; i < forms.length; i++) {
        if (forms[i].name == "replyForm") {
            forms[i].reset();
        };
    }

Javascript演示

演示

- Umesh Sehta

Answer 3

由于您在表单上有一个类名：

class='commentForm'

你可以使用它：

document.getElementsByClassName('commentForm').reset();

因为.getElementsByClassName()返回一个元素集合，所以它将适用于重置所有具有类名commentForm的元素。

使用.querySelectorAll():

document.querySelectorAll('.commentForm').reset();

- Jai

Answer 4

对于 JavaScript：

为每个 form 添加共同的类，因为你正在运行循环。

假设 formR 是所有渲染的 form 的共同类。

代码：

formRC=document.getElementsByClassName("formR");
for(i=0;i<formRC.length;i++){
    formRC[i].reset();;
} 

而对于 jQuery，您可以使用：

$('.formR').each(function(){
   this.reset();
});

- Sachink