javascript - 如何使用 jQuery 获取重复表单中的字段值？

Question

我有一个表单，它是 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>

Answer 1

我有一种感觉，这两行 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-* 属性，为什么不使用这些属性呢？