从先前在同一表单上输入的值自动填写表单字段

时间:2014-09-02 12:40:38

标签: javascript html5 forms

我正在构建一个包含多个表单字段和复选框的长表单。 为了使其从客户端角度尽可能可用,我想在客户填写表单时自动填充某些值。

当客户通过表单时,此表单包含不同的部分。 因此,如果他在第一部分输入了他的名字,姓氏和身份证号码,他将在稍后的部分再次提示他这样做(这是由于法律义务)。我想从客户的第一个条目中自动填充这些字段,以使该过程更容易,更友好。

最好的方法是什么?

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

希望这是有道理的。

<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>

1 个答案:

答案 0 :(得分:0)

如果在同一页面中您需要不同的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;
      }
    }  
  }
}