Jquery ajax表单数组提交

时间:2015-09-09 16:35:19

标签: javascript php jquery ajax laravel

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

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

非常感谢你们!

2 个答案:

答案 0 :(得分:2)

首先,使用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(),

答案 1 :(得分:1)

您的代码正在循环并创建具有相同文本框名称的多个表单,因此jquery无法识别type =&#39; name&#39;你在写$(&#39;输入[name = answer]&#39;)。val();

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