如何从一个刀片表单编辑多个字段答案

【问题标题】：How to edit multiple field from one blade form如何从一个刀片表单编辑多个字段
【发布时间】：2021-07-24 02:53:20
【问题描述】：

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

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更改字段值。但我需要知道是否有更好的方法。）

我可以在我的 Laravel 刀片中只使用一个 form 标签来实现吗？如果是的话，我如何在不接触 JS 的情况下实现这一点？

【问题讨论】：

您实际上回答了自己的问题，您必须使用已设置的用户值放置一个隐藏的输入，但隐藏，当单击编辑按钮时，您只需使用 javascript 显示该输入，用户编辑其值并保存它，您可以将所有输入发送到控制器，因为它都设置为原始值，或者您可以让输入为空并忽略控制器侧的空值
是的，我知道这一点。只是想避免使用 javascript，并且每次单击提交时只从表单传递一个输入。
避免使用javascript或者在点击编辑时重定向用户，或者你用css做一些技巧，我不推荐这样做

标签： php html laravel forms laravel-blade

【解决方案1】：

好的，所以你可以用 css 技巧来做到这一点，看我添加了用 css 隐藏的输入，而不是 a 标签，我使用 label 链接到带有 @987654323 的输入@ 和 id 属性，因此当用户单击标签时，它会专注于输入并触发 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>

【讨论】：