JavaScript |自动填充一个与另一个相同的字段-yiteyi-C++库

（本文介绍了一些关于HTML、CSS和JavaScript的知识。）你可能已经注意到，有时像电子商务或一些政府网站这样的网站在其表单中有两个地址字段。一个用于主地址，另一个用于辅助地址（或一个用于账单地址，另一个用于发货地址等）。大多数情况下，人们拥有相同的主地址和辅助地址，为了避免我们再次输入相同数据的繁琐工作，他们可以选择自动将一个字段的内容复制到另一个字段中。我们将看到如何使用JavaScript制作这种自动完成表单。在我们将要讨论的表单中，有一个复选框，只要选中它，代码就会自动将值从主地址和主邮政编码分别复制到次地址和次邮政编码。如果复选框未选中，这些字段将变为空白。以下是此类表单的简单代码：

null

                       <!DOCTYPE html>                     
                       <html lang=                                  "en"                                  >                     
                                             <head>                     
                                             <meta charset=                                  "UTF-8"                                  />                     
                                             <title>Form Auto Fill</title>                     
                                             <style>                     
                                             fieldset {                     
                                             margin-bottom: 5%;                     
                                             }                     
                                             </style>                     
                                             </head>                     
                                
                                             <body>                     
                                             <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>                     
                                
                                             // Submit button in the form                     
                                             <input type=                                  "submit"                     
                                             value=                                  "Submit"                                  />                     
                                             </form>                     
                                
                                             // JavaScript Code                     
                                             <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>                     
                                             </body>                     
                       </html>                     

#以下是选中该框前表单的外观： before checking box

#以下是勾选该框后的效果： after checking the box 注：像

“必填”（第18、20、29、31行）-确保只有在这些字段非空时才会提交表单；
‘pattern=“[0-9]{6}’（第20行，第31行）-确保邮政编码的格式正确，即六位邮政编码。

说明： 当复选框的选中状态被更改时，“onchange”（参见第23行）事件将发生，该事件将调用“addressFunction（）”。如果选中该框，主地址和主邮政编码的值将复制到辅助地址和辅助邮政编码（通过使用“getElementById（）”函数，我们指的是具有特定Id和“”的元素）。值），以访问该特定Id元素的值）。否则，这些字段将保持空白，以便用户可以填写（在主地址和辅助地址不同的情况下）。

文章版权归作者所有，未经允许请勿转载。

THE END

Javascript