PHP：获取 foreach 之外的值

Question

我在 html 表中嵌套了 foreach 循环：

@foreach ($getUsers as $key => $commits)
    @foreach ($commits->getLinks as $key1 => $links)
        <tr>
            <td>
                <input type="hidden" name="" id="applicant_id" value="{{$commits->id}}">
            <td>
        <tr>
    @endforeach
@endforeach

接下来我有一个表单，我需要在上面的 foreach 循环中的隐藏字段中定义的行的id。

在表单下方我有另一个隐藏的输入字段，我在其中将 foreach 隐藏字段值推入表单隐藏字段值 但它总是只给出一个 id（每个表格行的 id 相同）。

用于从 foreach 隐藏输入到表单隐藏输入获取 id 的 Jquery：

    $(document).ready(function(){
        var applicant_id = $('#applicant_id').val();
        $("#applicant").val(applicant_id);
    })

表格

<form class="form-horizontal" method="POST" action="{{route('upload-agreement')}}" enctype="multipart/form-data">
    {{csrf_field()}}
    <input type="hidden" name="applicant" id="applicant" >
    <input type="file" name="file" class="form-control" required="">
    <button type="submit" class="btn btn-primary">Save changes</button>
</form>

问题：上面的方法总是给我同样的id。

Answer 1

根据您的评论，以及您只有一个表格的事实。您需要通过提供一个按钮或其他东西供用户单击来使用正确的 ID 动态加载它。

@foreach ($getUsers as $key => $commits)
  @foreach ($commits->getLinks as $key1 => $links)
    <tr>
        <td>
            <button class="edit" data-id="{{$commits->id}}" >Edit</button>
        <td>
    <tr>
  @endforeach
@endforeach


$(document).ready(function(){
    $('.edit').click(function(){
        $("#applicant").val($(this).data('id'));
    });
});

我还将您的表单放在各种模式窗口中...这样您就可以在单击时弹出它，从而提供易于遵循的交互式用户体验。

我提供了一个例子。 （需要 Bootstrap 框架）

JS

$(document).ready(function(){
    $('.edit').click(function(){
        $('#myModal').modal({backdrop:'static'});
        $("#applicant").val($(this).data('id'));
    });
});

HTML

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Upload File</h4>
  </div>
  <div class="modal-body">
    <form class="form-horizontal" method="POST" action="{{route('upload-agreement')}}" enctype="multipart/form-data">
       {{csrf_field()}}
       <input type="hidden" name="applicant" id="applicant" >
       <input type="file" name="file" class="form-control" required="">
      <button type="submit" class="btn btn-primary">Save changes</button>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

Answer 2

正如 html 规范所说：

id 属性指定其元素的唯一标识符 (ID)。该值在元素的主子树中的所有 ID 中必须是唯一的，并且必须包含至少一个字符。该值不得包含任何空格字符。

https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

您不希望您的数据库记录在表中具有重复的 ID，对吗？好吧，同样的经验法则适用于页面中的 HTML 元素。当您打算稍后与它们进行交互时，在循环显示数据库项目时要记住这一点尤其重要。

在你的情况下：

 <input type="hidden" name="" id="applicant_id" value="{{$commits->id}}">

你可能在这里弄错了 input 元素的 id 和 name 属性。 name 属性用于在提交父表单时将名称与值相关联。 id 属性正如它所说的那样 - 一个唯一的标识符，用于 css 样式或 javascript 操作（通过 document.getElementById() 方法或其对应的 jQuery 方法，$('#FindThisIdForMe')）。

在 dom 中具有重复的 id 值可能是无害的，但仍然会使您的 html 无效，并且可能会破坏元素检索（因为顾名思义，该方法应该检索一个元素或什么都不检索，因此必须处理多个候选人）。

将某种变量附加到 id 属性值可以解决问题，例如：

 <input type="hidden" name="" id="applicant_id_{{$commits->id}}" value="{{$commits->id}}">

并相应地修复 jQuery 选择器。

您可能希望也可能不希望将隐藏输入的name 属性设置为相同的值，具体取决于您是否打算提交表单。

Answer 3

您正在遍历一个数组，但在每次迭代中创建一个具有相同 id 的输入，而不是 id 设置输入类名或数据属性，可以愉快地共存于 dom 中，id 应该是唯一的，并且当您选择元素时id 应该只有一个，否则你可能会弄错一个