时间戳

首页 > 解决方案 > 一旦用户输入值，使用 javascipt/jquery 自动更新具有相同 ID 的输入字段

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

问题描述

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

不 任务 集群 ID 评估
1 遛狗出去 1.1.1
2 带猫出去 1.1.1
3 去杂货店 1.1.2
4 去兽医 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 中输入的值相同的值。

标签： javascripthtmljquerymysql

解决方案

您不能对多个元素使用相同的 id。而是使用 data-attribute ie :data-id="cluster'.$ClusterID.'"并且当用户在输入框中键入时，使用$("input[data-id=" + data_id + "]").val(value)将相同的值更新到具有相同 data-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>

推荐阅读