Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Address form adding and removing nodes dynamically on user input -->
<form id="address-form-node-addition">
<label for="name-node-addition">Name</label>
<input type="text" id="name-node-addition" autocomplete="name">
<label for="email-node-addition">Email</label>
<input type="email" id="email-node-addition" autocomplete="email">
<label for="phone-node-addition">Phone</label>
<input type="tel" id="phone-node-addition" autocomplete="tel">
<label for="country-node-addition">Country</label>
<input type="text" id="country-node-addition" autocomplete="country">
<label for="street-address-node-addition">Street Address</label>
<input id="street-address-node-addition" type="text" autocomplete="street-address">
<label for="address-level1-node-addition">Address Level 1</label>
<input id="address-level1-node-addition" type="text" autocomplete="address-level1">
<label for="address-level2-node-addition">Address Level 2</label>
<input id="address-level2-node-addition" type="text" autocomplete="address-level2">
<label for="postal-code-node-addition">Postal Code</label>
<input id="postal-code-node-addition" type="text" data-bacon="new-66" autocomplete="postal-code">
</form>
<script>
function replaceForm()
{
const form = document.getElementById("address-form-node-addition");
document.body.removeChild(form);
let newForm = document.createElement("form");
newForm.id = "address-form-node-addition";
newForm.innerHTML = `
<label for="name-node-addition">Name</label>
<input type="text" id="name-node-addition" autocomplete="name">
<label for="email-node-addition">Email</label>
<input type="email" id="email-node-addition" autocomplete="email">
<label for="phone-node-addition">Phone</label>
<input type="tel" id="phone-node-addition" autocomplete="tel">
<label for="country-node-addition">Country</label>
<input type="text" id="country-node-addition" autocomplete="country">
<label for="street-address-node-addition">Street Address</label>
<input id="street-address-node-addition" type="text" autocomplete="street-address">
<label for="address-level1-node-addition">Address Level 1</label>
<input id="address-level1-node-addition" type="text" autocomplete="address-level1">
<label for="postal-code-node-addition">Postal Code</label>
<input id="postal-code-node-addition" type="text" autocomplete="postal-code">`;
document.body.appendChild(newForm);
// A field in the new form must be focused, otherwise the field data is
// still for the old form. This is certainly what a page that removes forms
// in this way will do.
document.getElementById("postal-code-node-addition").focus();
}
const params = new URLSearchParams(document.location.search);
const mode = params.get("mode");
const countryInputNodeAddition = document.getElementById("country-node-addition");
countryInputNodeAddition.addEventListener('input', () => {
switch(mode) {
case "direct":
replaceForm();
break;
case "timeout":
setTimeout(replaceForm, 0);
break;
}
});
</script>
</html>