如何从一个 blade 表单编辑多个字段

How to edit multiple field from one blade form

您好,我有一个如下图所示的表格-

这个HTML代码是-

<table style="width:100%" class="table table-striped">
            <tr>
                <td><strong>First Name</strong></td>
                <td>Test Name</td>
                <td><a class="btn btn-success" href="#">Edit</a></td>
            </tr>
            <tr>
                <td><strong>Last Name</strong></td>
                <td>Test Name</td>
                <td><a class="btn btn-success" href="#">Edit</a></td>
            </tr>
            <tr>
                <td><strong>Username</strong></td>
                <td>test_username</td>
                <td><a class="btn btn-success" href="#">Edit</a></td>
            </tr>
            
</table>

现在我在这里尝试的是,当我单击编辑按钮时,我只需要能够编辑该特定字段并将更新后的值仅存储到我的数据库中。我只想知道,每次我单击表单提交按钮时,只有更新的字段值应该传递给我的控制器方法。我可以通过隐藏输入传递我的字段名称。

(我知道我可以在表单中保留一个隐藏的输入字段并通过 javascript 更改字段值。但我需要知道是否有更好的方法。)

我可以在 Laravelblade 中仅使用一个 form 标签来实现吗?如果是,我如何在不接触 JS 的情况下实现它?

好的,所以你可以用 css 技巧来做到这一点,看我已经添加了用 css 隐藏的输入,而不是 a 标签,我使用了 label 链接到具有 forid 属性的输入,因此当用户单击标签时,它会聚焦于输入并触发 css input:focus 显示输入并隐藏名称。

所有内容都包含在一个表单中,如果您添加一个 <button type="input">Send</button> 会将所有内容发送到控制器

但是您已经提到您只想发送已更改的数据,不幸的是,如果没有 javascript,我认为这是不可能的,但您应该将输入的值设置为原始值,所以当更新时它会更新为相同的值,完全没问题,实际上几乎所有的编辑表单都是这样

input {
  opacity: 0;
  width: 0;
}

input:focus {
  visibility: visible;
  opacity: 1;
  width: 100px;
}

input:focus + span {
  display: none;
}
<form>
  <table style="width:100%" class="table table-striped">
    <tr>
      <td><strong>First Name</strong></td>
      <td>
        <input id="first_name" name="first_name" value="Test Name" />
        <span>Test Name</span>
      </td>
      <td>
        <label for="first_name" class="btn btn-success" href="#">Edit</label>
      </td>
    </tr>
    <tr>
      <td><strong>Last Name</strong></td>
      <td>
        <input id="last_name" value="Test Name" />
        <span>Test Name</span>
      </td>
      <td>
        <label for="last_name" class="btn btn-success" href="#">Edit</label>
      </td>
    </tr>
    <tr>
      <td><strong>Last Name</strong></td>
      <td>
        <input id="username" value="test_username" />
        <span>test_username</span>
      </td>
      <td>
        <label for="username" class="btn btn-success" href="#">Edit</label>
      </td>
    </tr>      
  </table>
</form>