dynamic_forms.html (7650B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <!-- Address form adding and removing nodes dynamically on user input --> 10 <form id="address-form-node-addition"> 11 <label for="name-node-addition">Name</label> 12 <input type="text" id="name-node-addition" autocomplete="name"> 13 14 <label for="email-node-addition">Email</label> 15 <input type="email" id="email-node-addition" autocomplete="email"> 16 17 <label for="phone-node-addition">Phone</label> 18 <input type="tel" id="phone-node-addition" autocomplete="tel"> 19 20 <label for="country-node-addition">Country</label> 21 <input type="text" id="country-node-addition" autocomplete="country"> 22 23 <div id="address-extra-fields-node-addition"></div> 24 </form> 25 26 <!-- Credit card form adding and removing nodes dynamically on user input --> 27 <form id="cc-form-node-addition"> 28 <label for="cc-number-node-addition">Credit Card Number</label> 29 <input id="cc-number-node-addition" autocomplete="cc-number"> 30 <div id="cc-extra-fields-node-addition"></div> 31 </form> 32 33 <!-- Address form toggling the visibility state dynamically for some elements on user input --> 34 <form id="address-form-visibility-change"> 35 <label for="name-visibility-change">Name</label> 36 <input type="text" id="name-visibility-change" autocomplete="name"> 37 38 <label for="email-visibility-change">Email</label> 39 <input type="email" id="email-visibility-change" autocomplete="email"> 40 41 <label for="organization-visibility-change">Phone</label> 42 <input type="tel" id="organization-visibility-change" autocomplete="tel" /> 43 44 <label for="country-visibility-change">Country</label> 45 <input type="text" id="country-visibility-change" autocomplete="country"> 46 47 <label for="street-address-visibility-change">Street Address</label> 48 <input type="text" id="street-address-visibility-change" autocomplete="street-address" hidden/> 49 50 <label for="address-level1-visibility-change">Address Level 1</label> 51 <input type="text" id="address-level1-visibility-change" autocomplete="address-level1" hidden/> 52 53 <label for="address-level2-visibility-change">Address Level 2</label> 54 <input type="text" id="address-level2-visibility-change" autocomplete="address-level2" hidden/> 55 56 <label for="postal-code-visibility-change">Postal Code</label> 57 <input type="text" id="postal-code-visibility-change" autocomplete="postal-code" hidden/> 58 </form> 59 60 <!-- Credit card form toggling the visibility state dynamically for some elements on user input --> 61 <form id="cc-form-visibility-change"> 62 <label for="cc-number-visibility-change">Credit Card Number</label> 63 <input id="cc-number-visibility-change" autocomplete="cc-number"> 64 65 <label for="cc-name-visibility-change">Cardholder Name</label> 66 <input id="cc-name-visibility-change" autocomplete="cc-name" hidden> 67 68 <label for="cc-exp-month-visibility-change">Expiration Month</label> 69 <input id="cc-exp-month-visibility-change" autocomplete="cc-exp-month" hidden> 70 71 <label for="cc-exp-year-visibility-change">Expiration Year</label> 72 <input id="cc-exp-year-visibility-change" autocomplete="cc-exp-year" hidden> 73 </form> 74 </body> 75 76 <script> 77 const addField = (parent, id, labelText, autocomplete) => { 78 const label = document.createElement('label'); 79 label.htmlFor = id; 80 label.textContent = labelText; 81 82 const input = document.createElement('input'); 83 input.id = id; 84 input.type = "text"; 85 input.autocomplete = autocomplete; 86 87 parent.appendChild(label); 88 parent.appendChild(input); 89 90 return input; 91 } 92 93 const ccNumberInputNodeAddition = document.getElementById("cc-number-node-addition"); 94 ccNumberInputNodeAddition.addEventListener('input', (event) => { 95 let ccFields = document.getElementById("cc-extra-fields-node-addition"); 96 if (event.target.value != "") { 97 addField(ccFields, "cc-name-node-addition", "Cardholder Name", "cc-name"); 98 addField(ccFields, "cc-exp-month-node-addition", "Expiration Month", "cc-exp-month"); 99 addField(ccFields, "cc-exp-year-node-addition", "Expiration Year", "cc-exp-year"); 100 } else { 101 while (ccFields.firstChild) { 102 ccFields.firstChild.remove() 103 } 104 } 105 }); 106 107 const countryInputNodeAddition = document.getElementById("country-node-addition"); 108 countryInputNodeAddition.addEventListener('input', (event) => { 109 let addressFields = document.getElementById("address-extra-fields-node-addition"); 110 if (event.target.value != "") { 111 addField(addressFields, "street-address-node-addition", "Street Address", "street-address"); 112 addField(addressFields, "address-level1-node-addition", "Address Level 1", "address-level1"); 113 addField(addressFields, "address-level2-node-addition", "Address Level 2", "address-level2"); 114 addField(addressFields, "postal-code-node-addition", "Postal Code", "postal-code"); 115 } else { 116 while (addressFields.firstChild) { 117 addressFields.firstChild.remove() 118 } 119 } 120 }); 121 122 const countryInputVisibilityChange = document.getElementById("country-visibility-change"); 123 countryInputVisibilityChange.addEventListener('input', (event) => { 124 if (event.target.value != "") { 125 document.getElementById("street-address-visibility-change").hidden = false; 126 document.getElementById("address-level1-visibility-change").hidden = false; 127 document.getElementById("address-level2-visibility-change").hidden = false; 128 document.getElementById("postal-code-visibility-change").hidden = false; 129 } else { 130 document.getElementById("street-address-visibility-change").hidden = true; 131 document.getElementById("address-level1-visibility-change").hidden = true; 132 document.getElementById("address-level2-visibility-change").hidden = true; 133 document.getElementById("postal-code-visibility-change").hidden = true; 134 } 135 }); 136 137 const ccNumberInputVisibilityChange = document.getElementById("cc-number-visibility-change"); 138 ccNumberInputVisibilityChange.addEventListener('input', (event) => { 139 if (event.target.value != "") { 140 document.getElementById("cc-name-visibility-change").hidden = false; 141 document.getElementById("cc-exp-month-visibility-change").hidden = false; 142 document.getElementById("cc-exp-year-visibility-change").hidden = false; 143 } else { 144 document.getElementById("cc-name-visibility-change").hidden = true; 145 document.getElementById("cc-exp-month-visibility-change").hidden = true; 146 document.getElementById("cc-exp-year-visibility-change").hidden = true; 147 } 148 }); 149 </script> 150 </html>