一旦用户输入值，使用 javascript/jquery 自动更新具有相同 ID 的输入字段

Posted 2023-05-08

【中文标题】一旦用户输入值，使用 javascript/jquery 自动更新具有相同 ID 的输入字段

【英文标题】：Automatically updating input field with same id using javascipt/jquery once user enter value

【发布时间】：2021-06-28 02:55:15

【问题描述】：

我有一个如下所示的 SQL 表：

No	Task	ClusterID	Assessment
1	Walk dog out	1.1.1
2	Walk cat out	1.1.1
3	Go Groceries	1.1.2
4	Go veterinar	1.1.2

然后我使用php在while循环中将sql问题表查询到表单中，并在输入字段中附加ClusterID作为id：

<td style="overflow-x: hidden; width: 90px">
  <a style="display: none">'.$Assessment.'</a>
  <div class="input-group mb-3">
    <div class="input-group-prepend"></div>

    <input
      type="number"
      id="cluster'.$ClusterID.'"
      name="selfRating[]"
      min="0"
      max="10"
      value="'.$Assessment.'"
      class="form-control"
      aria-describedby="basic-addon1"
    />
  </div>
</td>

我想要实现的是，每当用户在具有相同 id 的输入字段中输入值时，具有相同 id 的其他输入字段将自动填充。我怎样才能使用 javascript 或 jquery 做到这一点？

例如，用户为问题 1 输入了一个值，那么问题 2 将自动填充与用户在问题 1 中输入的值相同的值。

【参考方案1】：

您不能对多个元素使用相同的 id。而是使用数据属性，即：data-id="cluster'.$ClusterID.'"，当用户在输入框中输入时，使用 $("input[data-id=" + data_id + "]").val(value) 将相同的值更新到具有相同数据 ID 的其他输入。

演示代码：

$("[name*=selfRating]").on("keyup change", function() 
  var data_id = $(this).data("id"); //get data id
  var value = $(this).val() //get value which user typed
  $("input[data-id=" + data_id + "]").val(value) //assign to other inputs as well with same data-id
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table>
  <tr>
    <td style="overflow-x: hidden;width: 90px;">
      <a style="display:none;">abc</a>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
        </div>
        <!--use data-id="cluster'.$ClusterID.'"-->
        <input type="number" data-id="cluster1" name="selfRating[]" min="0" max="10" value="abc" class="form-control" aria-label="Username" aria-describedby="basic-addon1">
      </div>
    </td>
  </tr>
  <tr>
    <td style="overflow-x: hidden;width: 90px;">
      <a style="display:none;">abc2</a>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
        </div>

        <input type="number" data-id="cluster1" name="selfRating[]" min="0" max="10" value="abc2" class="form-control" aria-label="Username" aria-describedby="basic-addon1">
      </div>
    </td>
  </tr>
  <tr>
    <td style="overflow-x: hidden;width: 90px;">
      <a style="display:none;">abc22</a>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
        </div>

        <input type="number" data-id="cluster2" name="selfRating[]" min="0" max="10" value="abc22" class="form-control" aria-label="Username" aria-describedby="basic-addon1">
      </div>
    </td>
  </tr>
  <tr>
    <td style="overflow-x: hidden;width: 90px;">
      <a style="display:none;">abc23</a>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
        </div>

        <input type="number" data-id="cluster3" name="selfRating[]" min="0" max="10" value="abc23" class="form-control" aria-label="Username" aria-describedby="basic-addon1">
      </div>
    </td>
  </tr>
  <tr>
    <td style="overflow-x: hidden;width: 90px;">
      <a style="display:none;">abc23</a>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
        </div>

        <input type="number" data-id="cluster3" name="selfRating[]" min="0" max="10" value="abc23" class="form-control" aria-label="Username" aria-describedby="basic-addon1">
      </div>
    </td>
  </tr>
</table>