使用javascript存储循环中的输入值

我有一个列输入字段，因为它在循环中，每一行有一个输入字段，我从中得到一个javascript，它为输入字段存储本地存储，但问题是这个javascript只对一个输入工作，例如：

我有五行，由于循环输入字段自动生成了五行

我想要的是为每一行存储不同的值。由于这个脚本，它没有为每一行单独实现

代码

Javascript

<script type="text/javascript">
        document.getElementById("txt_1").value = getSavedValue("txt_1");    // set the value to this input
        document.getElementById("txt_2").value = getSavedValue("txt_2");   // set the value to this input
        /* Here you can add more inputs to set value. if it's saved */

        //Save the value function - save it to localStorage as (ID, VALUE)
        function saveValue(e){
            var id = e.id;  // get the sender's id to save it . 
            var val = e.value; // get the value. 
            localStorage.setItem(id, val);// Every time user writing something, the localStorage's value will override . 
        }

        //get the saved value function - return the value of "v" from localStorage. 
        function getSavedValue  (v){
            if (!localStorage.getItem(v)) {
                return "";// You can change this to your defualt value. 
            }
            return localStorage.getItem(v);
        }
</script>

图像显示

代码

---

首先，您需要将事件侦听器传递给已实现的函数，因此我已经解决了在js文件中添加事件的问题。 因此，与此相反：

<input type="text" id="txt_1" onkeyup='saveValue(this);'/> 

---

看看这个，看看它是否能帮你解决Html不可靠的问题。您可以使用纯javascript代码实现更简洁的方式。这是工作样本。怠惰

函数saveValue{target}，索引{ localStorage.setItemtarget.id，target.value；//每次用户写入 //或 localStorage.setItemtarget.id+index，target.value；//每次用户写入内容时，localStorage的值都将覆盖。 } //获取saved value函数-从localStorage返回v的值。 函数getSavedValuev{ if！localStorage.getItemv{ return；//您可以将其更改为您的解除值。 } 返回localStorage.getItemv； } document.querySelectorAll.textField.forEachelm，索引=>{ elm.addEventListenerinput，e=>saveValuee，index，false； }; //可以忽略 window.saveValue=saveValue； window.getSavedValue=getSavedValue； var inputGroup=document.getElementById'input-group'； var inputs=inputGroup.getElementsByTagName'input'；

---

fori=0；iSo您有5行具有相同的ID，您想知道它为什么不起作用？行是从MySQL获取的，在实现输入字段之后，它为每行创建了输入字段。例如，如果我在MySQL输入字段中为每行创建了2个条目，那么您的代码无法解释您想要的内容。在你的问题中，你提到了循环，我看不到。这是指你应该尝试什么e.id和e.value？所以真正的问题是，你如何在不硬编码每个输入的情况下做到这一点？行是从MySQL获取的，在实现输入字段后，它为每一行创建了输入字段。例如，如果我在MySQL输入字段中为每一行创建了两个条目，那么问题是值存储在其中只有一个inputi知道由于下一行数据输入字段id的循环而导致的问题，因为另一个是从MYSQL获取的。是否有任何方法可以自动创建id？一旦输入在循环中使用，我已经添加了表。如果您需要动态id，那么您可以设置id=txt。将在输入中自动分配唯一id。是。尝试以下操作：输入值不存储在其中

<table class="table table-hover table-striped table-bordered" id="input-group">
<thead ><tr >
 <th class="text-right"><?php echo "Contact No."; ?></th>
  <th><?php echo "Followup 1 Date"; ?>
    </th></tr></thead>
    <tbody>
    <?php
      if (empty($enquiry_list)) {
       ?>
       <?php
        } else {
        foreach ($enquiry_list as $key => $value) {
         $current_date = date("d/m/Y");
         $next_date = $value["next_date"];
         if (empty($next_date)) { $next_date = $value["follow_up_date"];
          }if ($next_date < $current_date) {                                      
          $class = "class='danger'";} else {
           $class = ""; } ?>
           <td class="mailbox-name"><?php echo $value['contact']; ?> </td>
   <td class="mailbox-name" >
    <div  style="width:200px" style="height:200px" >
     <input id="txt_<?= $row[id] ?>" onkeyup='saveValue(this);' 
      autocomplete="off" type="text" class="form-control"   /></div></td>
      </tr> </tr>
      <?php }}?> </tbody> </table>

<input type="text" id="txt_1" onkeyup='saveValue(this);'/> 

<input type="text" id="txt_1"/> 
<input type="text" id="txt_2"/> 

document.getElementById("txt_1").onkeyup = saveValue;
document.getElementById("txt_2").onkeyup = saveValue;

function saveValue(e) {
  var id = e.target.id; // get the sender's id to save it .
  var val = e.target.value; // get the value.
  localStorage.setItem(id, val); // Every time user writing something, the localStorage's value will override .
}