JavaScript 自动将一个字段填充到另一个字段

您可能注意到有些网站（如电子商务或某些政府网站）在其表单中有两个地址字段。一个是主要地址，另一个是次要地址（或一个是账单地址，另一个是运送地址等）。

大多数情况下，人们的主要地址和次要地址相同，为了省去我们重新输入相同数据的繁琐工作，他们会有一种选项，可以自动将一个字段的内容复制到另一个字段。

我们将看到如何使用JavaScript创建这种类型的自动填充表单。在我们要讨论的表单中，有一个复选框，当选中它时，代码会自动将主要地址和主要邮政编码的值复制到次要地址和次要邮政编码中。如果取消选中该复选框，则这些字段将为空白。以下是这种类型表单的简单代码：

<style> 
    fieldset { 
        margin-bottom: 5%; 
    } 
</style> 
<h1>AutoFill Form</h1> 
<form> 
    //Fields for primary address 
    <fieldset> 
        <legend><b>Primary Address</b> 
        </legend> 
        <label for="primaryaddress"> 
            Address:</label> 
        <input type="text" 
               name="Address" 
               id="primaryaddress" 
               required /><br /> 
        <label for="primaryzip">Zip code:</label> 
        <input type="text" 
               name="Zip code" 
               id="primaryzip" 
               pattern="[0-9]{6}" 
               required /><br /> 
    </fieldset> 
  
    <input type="checkbox" 
           id="same" 
           name="same" 
           onchange="addressFunction()" /> 
    <label for="same"> 
        If same secondary address select this box. 
    </label> 
  
    // Fields for secondary address 
    <fieldset> 
        <legend><b>Secondary Address</b></legend> 
        <label for="secondaryaddress"> 
            Address: 
        </label> 
        <input type="text" 
               name="Address" 
               id="secondaryaddress" 
               required /><br /> 
        <label for="secondaryzip"> 
            Zip code:</label> 
        <input type="text" 
               name="Zip code" 
               id="secondaryzip" 
               pattern="[0-9]{6}" 
               required /><br /> 
    </fieldset> 
    <input type="submit" value="Submit" /> 
</form> 
  
<script> 
    function addressFunction() { 
        if (document.getElementById( 
        "same").checked) { 
            document.getElementById( 
            "secondaryaddress").value = 
            document.getElementById( 
            "primaryaddress").value; 
              
            document.getElementById( 
            "secondaryzip").value = 
            document.getElementById( 
            "primaryzip").value; 
        } else { 
            document.getElementById( 
            "secondaryaddress").value = ""; 
            document.getElementById( 
            "secondaryzip").value = ""; 
        } 
    } 
</script>

输出：

注意： 像‘required’（第18、20、29、31行）这样的功能，确保只有在这些字段非空的情况下才会提交表单；
* ‘pattern = “[0-9]{6}”’（第20、31行）这样的功能，确保邮政编码的格式正确，即六位数字邮政编码。

解释： 当复选框的选中状态发生改变时，将触发‘onchange’事件（见第23行），该事件将调用‘addressFunction()’。如果复选框被选中，则将主地址和主邮政编码的值复制到辅助地址和辅助邮政编码（通过使用‘getElementById()’函数，我们可以引用特定Id的元素，并使用‘.value’来访问该特定Id元素的值）。否则，这些字段将保持为空，以便用户填写（以防主地址和辅助地址不同）。