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。 然后你可以單獨識別它們。