Jquery ajax表单数组提交

Question

我有一个表单评论部分，用户可以回复评论。 每条评论都有一个带回复框的表格。 我从数据库获取注释并运行以下循环。

@foreach($responses as $response)

<li>{{$response->answer}}</li>

<form action="{{action('DiscussionController@postAnswerQuestion', [$entry_year, $grade_id, $subject_id, $question_id])}}" method="post" id="form1">
<input type="text" name="reply" value="" placeholder="Reply">
<input type="hidden" name="response_id" value="{{$response->id}}">
<input type="submit" name="" value="reply">
 </form>
  @endforeach

当我使用普通的PHP提交php表单时，它提交的很好但是在使用jquery ajax和以下代码时。

  var formData = {
        'answer'            : $('input[name=answer]').val(),
        'reply'             : $('input[name=reply]').val(),
        'response_id'       : $('input[name=response_id]').val(),
    };

它只在一些谷歌搜索之后返回第一个输入的值我发现我应该使用序列化而不是上面的jquery代码我使用了以下

        var formData = $('#form1').serialize();

但是现在这些值并没有被捕获，而且值也是以空值传递到php。 我该如何解决上述问题？

非常感谢！

Answer 1

首先，用class替换表单上的id 。

<form action="..." method="post" class="commentForm">
<input type="text" name="reply" value="" placeholder="Reply">
<input type="hidden" name="response_id" value="{{$response->id}}">
<input type="submit" name="" value="reply">
</form>

然后在表单上注册一个提交事件处理程序以进行ajax调用。 在事件处理程序回调中， this指的是正在提交的表单。 您可以使用它来获取该表单的输入值。

$('.commentForm').submit(function(event) {
    event.preventDefault();

    var $form = $(this);
    var formData = {
        answer     : $form.find('input[name=answer]').val(),
        reply      : $form.find('input[name=reply]').val(),
        response_id: $form.find('input[name=response_id]').val()
    };

    // Make the ajax call here.
});

但是，您应该能够跳过将formData对象放在一起，并使用以下内容进行ajax调用：

data: $(form).serialize(),

Answer 2

你的代码循环并创建了多个具有相同文本框名称的表单，因此jquery无法识别type ='name'是指定写入$（'input [name = answer]'）。val（）;

所以我建议你为所有3个输入标签添加id。 对于每个循环，所有3个标签应具有相同的id。 然后你可以单独识别它们。