Php 具有相同属性的多个表单

我试图实现一个评论系统。每个人都可以回复每一条评论。这里的系统是当有人点击一条评论时，一个表单将可见，他可以回复。因此，如果有4条评论，那么将出现4个回复框。我想通过ajax存储这些回复。但问题是我无法指定实际提交的表单，因此当我使用类指定表单时，页面得到了刷新。我试图提交上述表格，如果用户单击“回复”按钮，该表格将显示在每条评论下：

 <form class="replyComment">
      <textarea name="comment" class="ru_input" placeholder="Write your reply"></textarea>
      <input type="hidden" value="{{$row->id}}" name="comment_id">
      <div class="bt_area">
         <button class="floatRight btn btn-primary">Reply
         </button>
      </div>
   </form>

---

我更改了表单ID，并在输入和按钮中添加了ID和类。将行的ID作为数据传递给提交按钮的单击事件。使用作为数据传递的行的ID来获取输入值

    <form id="replyComment-{{$row->id}}">
      <textarea name="comment" id="comment-{{$row->id}}" class="ru_input" placeholder="Write your reply"></textarea>
      <input type="hidden" id="comment-id-{{$row->id}}" value="{{$row->id}}" name="comment_id">
      <div class="bt_area">
         <button data-id="{{$row->id}}" class="floatRight btn btn-primary comment-button">Reply
         </button>
      </div>
    </form>

---

尝试使用id属性来区分表单

        <form class="replyComment" id="1">
            <textarea name="comment" class="ru_input" placeholder="Write your reply"></textarea>
            <input type="hidden" value="{{$row->id}}" name="comment_id">
            <div class="bt_area">
                <button class="floatRight btn btn-primary">Reply
                </button>
            </div>
        </form>
        <form class="replyComment" id="2">
                <textarea name="comment" class="ru_input" placeholder="Write your reply"></textarea>
                <input type="hidden" value="{{$row->id}}" name="comment_id">
                <div class="bt_area">
                    <button class="floatRight btn btn-primary">Reply
                    </button>
                </div>
        </form>

---

使用类而不是idsFund，我目前正在使用相同的功能，同样在laravelI中也尝试使用类。但它再次刷新了页面。表单的父元素是什么？对表单使用ID，例如，为回复按钮保留类似的ID，删除表单的提交事件，在回复按钮上添加单击事件，然后通过映射$row->表单ID和按钮，您将获得提交的表单

   $( ".comment-button").click(function( event ) {
        var form_id = $(this).data('id');
        event.preventDefault();      
        $.ajaxSetup({
            headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
                type: "POST",
                url: '{{url("/postReply")}}',
                async: false,
                data: 
                {
                    product_id : {!! json_encode($product->id)!!},
                    comment : $('#comment-'+form_id).val(),
                    comment_id : $('#comment-id-'+form_id).val()
                },
                success: function(data) 
                {
                    console.log(data)

                },
                error:function(data)
                {

                }

        });
    });

        <form class="replyComment" id="1">
            <textarea name="comment" class="ru_input" placeholder="Write your reply"></textarea>
            <input type="hidden" value="{{$row->id}}" name="comment_id">
            <div class="bt_area">
                <button class="floatRight btn btn-primary">Reply
                </button>
            </div>
        </form>
        <form class="replyComment" id="2">
                <textarea name="comment" class="ru_input" placeholder="Write your reply"></textarea>
                <input type="hidden" value="{{$row->id}}" name="comment_id">
                <div class="bt_area">
                    <button class="floatRight btn btn-primary">Reply
                    </button>
                </div>
        </form>

$( "#1").submit(function( event ) {      
 event.preventDefault();      
      $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
          });
            $.ajax({
                type: "POST",
                url: '{{url("/postReply")}}',
                async: false,
                data: 
                {
                  product_id : {!! json_encode($product->id)!!},
                  comment : event.currentTarget[0].value,
                  comment_id : event.currentTarget[1].value
                },
                success: function(data) 
                {
                  console.log(data)

                },
                error:function(data)
                {

                }

            });
});


$( "#2").submit(function( event ) {      
 event.preventDefault();      
      $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
          });
            $.ajax({
                type: "POST",
                url: '{{url("/postReply")}}',
                async: false,
                data: 
                {
                  product_id : {!! json_encode($product->id)!!},
                  comment : event.currentTarget[0].value,
                  comment_id : event.currentTarget[1].value
                },
                success: function(data) 
                {
                  console.log(data)

                },
                error:function(data)
                {

                }

            });
});