jQuery ajax 表单数组提交答案

【问题标题】：Jquery ajax form array submitjQuery ajax 表单数组提交
【发布时间】：2015-09-09 16:35:19
【问题描述】：

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

@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。我该如何解决上述问题？

非常感谢大家！

【问题讨论】：

您是否将 formData obj 传递给您的 php 页面？如果是这样，您认为 formData obj 是 null 还是 undefined ？
你有一个循环中的id="form1" -> @foreach($responses as $response)，所以你有多个相同的ids，而不是unique ids
我能想到的一种方法是，将 jquery 代码保存在 $('#form1').submit() 事件中，然后使用 $(this).serialize 引用所有变量() 。但我建议你在表单中添加一个类而不是 id 然后使用 $('.form1')

标签： javascript php jquery ajax laravel

【解决方案1】：

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

<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(),

【讨论】：

【解决方案2】：

您的代码正在循环并创建具有相同名称的文本框的多个表单，因此 jquery 无法识别 type='name' 您是否指定了何时编写 $('input[name=answer]').val();

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

【讨论】：