我有一个表单,它是 foreach()
循环的一部分,该循环针对显示的每个用户状态在同一页面上重复。
该表单由一个简单的“喜欢”按钮组成,按下该按钮后应通过 AJAX 将数据发送到 Controller 。
目前,我只是尝试获取 status_id
和 user_id
的动态隐藏输入字段的值,但失败了。
每当我点击任何状态上的按钮时,它总是返回数据库中最新状态的 ID,该 ID 会首先显示在页面上。
我尝试调用表单的 ID,然后调用类,然后尝试直接调用按钮,并将动态值添加到按钮标记内作为 data-user
和 data-status
,它总是失败。
我还在submit
和click
上尝试了不同的事件 - 单击时不会返回任何内容,但提交时每次都会返回相同的状态ID。
另外,如果我想通过AJAX传递数据,是否需要表单?我不能直接从点击按钮传递数据吗?
这是表格
{!! Form::open(['action' => 'FeedController@likeStatus', 'id' => 'like_form', 'class' => 'likeform']) !!}
{!! Form::hidden('like_status', $status->id) !!}
{!! Form::hidden('user_id', Auth::user()->id) !!}
<button type="submit" class="btn btn-info btn-xs like" data-user="{{ Auth::user()->id }}" data-status="{{ $status->id }}" id="like-status">
<i class="fa fa-thumbs-up"></i> Like ({{ $likes_count }})
</button>
{!! Form::close() !!}
这就是 Javascript
$('.likeform').submit(function(e) {
e.preventDefault();
var status_id = $('.like').data('status');
var user_id = $('.like').data('user');
console.log(status_id + ' ' + user_id);
});
这是前 2 个状态在 DOM 中呈现的 HTML
<form method="POST" action="http://localhost/socialnet/public/likeStatus" accept-charset="UTF-8" id="like_form" class="likeform"><input name="_token" type="hidden" value="lIs80IwNwY6Gzojefiwvdlj8d0PCCoxsZtrlGfP4">
<input name="like_status" type="hidden" value="21">
<input name="user_id" type="hidden" value="14">
<button type="submit" class="btn btn-info btn-xs like" data-user="14" data-status="21" id="like-status">
<i class="fa fa-thumbs-up"></i> Like (0)
</button>
</form>
<form method="POST" action="http://localhost/socialnet/public/likeStatus" accept-charset="UTF-8" id="like_form" class="likeform"><input name="_token" type="hidden" value="lIs80IwNwY6Gzojefiwvdlj8d0PCCoxsZtrlGfP4">
<input name="like_status" type="hidden" value="20">
<input name="user_id" type="hidden" value="14">
<button type="submit" class="btn btn-info btn-xs like" data-user="14" data-status="20" id="like-status">
<i class="fa fa-thumbs-up"></i> Like (0)
</button>
</form>
最佳答案
我有一种感觉,这两行 jquery 行并没有按照您的想法进行。
var status_id = $('.like').data('status');
var user_id = $('.like').data('user');
由于每个提交按钮上都有 like
类,因此 $('.like')
包含所有这些类的数组,因此 .data
函数仅返回最后一个。
如果您想获取与正在提交的表单相关的选择器,则需要更改选择器。 像这样的东西;
var submitBtn = $(this).find('.like');
var status_id = submitBtn.data('status');
var user_id = submitBtn.data('user');
即使您通过 AJAX 发送,拥有一个正确的表单也很好,如果脚本中的某些内容失败,拥有一个可以正常工作的表单是一个很好的后备。
同时,我不知道当此数据在隐藏字段中可用时,您为什么要费心向提交按钮添加 data-*
属性,为什么不使用这些属性呢?
关于javascript - 如何使用 jQuery 获取重复表单中的字段值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38579083/