具有相同属性的多个表单答案

【问题标题】：Multiple form with same attribute具有相同属性的多个表单
【发布时间】：2018-08-05 11:46:59
【问题描述】：

我试图实现一个评论系统。每个人都可以回复每条评论。这里的系统是当有人点击评论时，表单将可见并且他可以回复。所以如果有 4 个 cmets 那么 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>

我试图通过以下 ajax 提交。

$( ".replyComment").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)
                {

                }

            });
});

【问题讨论】：

使用类而不是 ID
有趣的是，我目前正在开发相同的功能，也在 laravel 中
我也尝试过上课。但它再次刷新了页面。
表单的父元素是什么？
使用
这样的表单ID，为回复按钮保留类似的ID，删除表单的提交事件，在回复按钮上添加点击事件，然后通过映射Form和Button的$row->id就可以得到提交的是哪个Form

标签： php mysql ajax laravel-5

【解决方案1】：

我更改了表单 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>

并重写了脚本：

   $( ".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)
                {

                }

        });
    });

【讨论】：

【解决方案2】：

尝试使用 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>

并使用 '#' insted of '.'像这样打电话时

$( "#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)
                {

                }

            });
});

【讨论】：