根据先前在同一表单上输入的值自动完成表单字段

Posted 2023-03-05

【中文标题】根据先前在同一表单上输入的值自动完成表单字段

【英文标题】：Auto complete form field from previously entered value on the same form

【发布时间】：2014-10-26 17:41:33

【问题描述】：

我正在构建一个包含多个表单域和复选框的很长的表单。 为了从客户的角度尽可能地使用它，我想在客户填写表格时自动填充某些值。

当客户浏览表单时，此表单包含不同的部分。 因此，如果他在第一部分输入了他的名字、姓氏和身份证号码，他会在后面的部分再次提示他这样做（这是由于法律义务）。我想从客户的第一个条目中自动填充这些字段，以使流程更容易和更用户友好。

最好的方法是什么？

如果我的说法是正确的，当表单提交到数据库时，我不能在表单中包含两个相同的值。拥有一个值但从第一个值自动填充更有意义。

希望这是有道理的。

<h3>Section 1</h4>
<ul>
<li>
    <input type="text" name="client_first_name" id="client_first_name">         
    <label for="client_first_name">Client First Name:</label>
    <input type="text" name="client_last_name" id="client_last_name">           
    <label for="client_last_name">Client Last Name:</label>
    <input type="text" name="client_id" id="client_id">
    <label for="client_id">Client ID Number:</label>    
<li>
    <label for="advisor_name">Advisor:</label>
    <select type="text" name="advisor_name" id="advisor_name">
        <option>Please Select Advisor</option>
        <option value="andrew">Andrew</option>
        <option value="jamie">Jamie</option>
    </select>

    <label for="advisor_id">Advisor ID Number:</label>
    <input type="text" name="advisor_id" id="advisor_id">
</li>
</ul>

Later in document......

 <h3>Section 7</h4>
<ul>
<li>
    <input type="text" name="client_first_name" id="client_first_name">         
    <label for="client_first_name">Client First Name:</label>
    <input type="text" name="client_last_name" id="client_last_name">           
    <label for="client_last_name">Client Last Name:</label>
    <input type="text" name="client_id" id="client_id">
    <label for="client_id">Client ID Number:</label>    
<li>
    <label for="advisor_name">Advisor:</label>
    <select type="text" name="advisor_name" id="advisor_name">
        <option>Please Select Advisor</option>
        <option value="andrew">Andrew</option>
        <option value="jamie">Jamie</option>
    </select>

    <label for="advisor_id">Advisor ID Number:</label>
    <input type="text" name="advisor_id" id="advisor_id">
</li>
</ul>

【问题讨论】：

这将为您提供所需的答案：***.com/questions/11662715/…

并且您需要记住，您只能在页面上使用一次 ID，该 ID 始终需要是唯一的，即使您使用它来收集相同的数据。

如果在同一个页面你需要不同的ID。

您提供的 JSFiddle 使用复选框来协助自动填充。不希望复选框自动填充其他字段。假设我可以使用“下一步”按钮来做同样的事情？

为什么不直接复制要重复的值。例如当前地址，永久地址

【参考方案1】：

如果在同一页面中，您需要不同的 ID。

你可以这样做

FIDDLE

window.onload=function() 
  var names=["client_first_name","client_last_name","advisor_name"],fields=;
  for (var i=0;i<names.length;i++) 
    var fieldSet = document.getElementsByName(names[i]);
    if (fieldSet.length==2)   
      fields[names[i]]=fieldSet[1];
      if (fieldSet[0].type.indexOf("select")!=-1) 
        fieldSet[0].onchange=function() 
          fields[this.name].selectedIndex=this.selectedIndex;
        
      
      else fieldSet[0].onkeyup=function() 
        fields[this.name].value=this.value;