具有相同属性的多个表单
具有相同属性的多个表单
提问于 2018-02-26 12:21:24
我正在尝试实现一个评论系统。每个人都可以回复每条评论。这里的系统是，当有人点击评论时，表格就会出现，他就可以回复了。因此，如果有4条评论，那么4个回复框就会出现。我想通过ajax存储这些回复。但问题是，我无法指定实际提交的是哪个表单，因此当我使用class指定表单时，页面得到了刷新。我试着提交了上面的表单，如果用户点击回复按钮，每个评论下面都会显示出来：
<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)
{
}
});
});回答 2
Stack Overflow用户
发布于 2018-02-26 12:36:44
我更改了表单ID，并向输入和按钮添加了ID和类。将行的ID作为数据传递给submit按钮的单击事件。使用作为数据传递的行的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)
{
}
});
});Stack Overflow用户
发布于 2018-02-26 14:41:18
尝试通过使用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)
{
}
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48981414
复制相关文章
相似问题
腾讯云开发者
