I’ll be frank, not terribly skilled with JS, still learning, and I may be in way over my head but maybe not. I am creating a script that will grab a fieldset from an html form, remove it, add an ID number, iterated that ID number in the JS, then adds the now modified fieldset back. Once completed I should be able to click a button to add an additional fieldset but with now the new ID number. And repeat… I will attach a segment of my HTML and all my JS.
<fieldset name="authorizedUsers">
<legend><h2>Section 2: Authorized Users</h2></legend>
<fieldset class="formUser" name="au">
<span>User ID<button>Remove</button></span>
<label for="auFirstName">First Name</label>
<input type="text" id="auFirstName" name="auFirstName" placeholder="John">
<label for="auLastName">Last Name</label>
<input type="text" id="auLastName" name="auLastName" placeholder="Smith">
<label for="audob">Date of Birth</label>
<input type="date" id="audob" name="audob">
<label for="auSex">Sex</label>
<select id="auSex" name="ausex">
<option value="" selected>- Select -</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<label for="auMaritalStatus">Marital Status</label>
<select id="auMaritalStatus" name="auMaritalStatus">
<option value="" selected>- Select -</option>
<option value="single">Single</option>
<option value="widowed">Widowed</option>
<option value="divorced">Divorced</option>
<option value="separated">Separated</option>
<option value="other">Other</option>
</select>
<label for="auphone">Phone Number</label>
<input type="tel" id="auphone" name="auphone" placeholder="123-456-7890">
<label for="auemail">Email</label>
<input type="email" id="auemail" name="aumail" placeholder="[email protected]">
<fieldset name="auGovID">
<legend>Government ID</legend>
<label for="auidType">ID Type</label>
<select id="auidType" name="auidType">
<option value="" selected>- Select -</option>
<option value="passport">Passport</option>
<option value="driversLicense">Drivers License</option>
<option value="regionalID">Regional ID</option>
<option value="citizenStatus">Citizen Status</option>
</select>
<label for="auidFile">Upload Government ID</label>
<input type="file" id="auidFile" name="auidFile">
<label for="auidNum">Government ID Number</label>
<input type="text" id="auidNum" name="auidNum" placeholder="ABC123">
</fieldset>
<fieldset name="auAddressProof">
<legend>Address Proof</legend>
<fieldset class="formFieldsetAddress" name="auAddress">
<legend>Residential Address</legend>
<label for="auAddressLine1">Address Line 1</label>
<span class="formInputAddress1"><input type="text" id="auAddressLine1" name="auAddressLine1"></span>
<label for="auAddressLine2">Address Line 2</label>
<span class="formInputAddress2"><input type="text" id="auAddressLine2" name="auAddressLine2"></span>
<label for="auCity">City/District</label>
<span class="formInputCity"><input type="text" id="auCity" name="auCity"></span>
<label for="auState">State/Province</label>
<span class="formInputState"><input type="text" id="auState" name="auState"></span>
<label for="auPostalCode">Postal Code</label>
<span class="formInputPostalCode"><input type="text" id="auPostalCode" name="auPostalCode"></span>
<label for="auCountry">Country</label>
<span class="formSelectCountry"><select id="auCountry" name="auCountry"></select></span>
</fieldset>
<label for="auDateAtAddress">Start Date at Residential Address</label>
<input type="date" id="auDateAtAddress" name="auDateAtAddress">
<label for="auAddressFile">Upload Proof of Address</label>
<input type="file" id="auAddressFile" name="auAddressFile">
</fieldset>
</fieldset>
<div>
<button type="button">Add New User</button>
<button>Clone from Stakeholders / Shareholders / Directors</button>
<button>Clone from Designated Users</button>
</div>
</fieldset>
// Set the ID number to 0
let idIterator = 0;
// Grab the fieldset's parent fieldset.
const auFieldset = document.getElementsByName('authorizedUsers')[0];
const shFieldset = document.getElementsByName('stakeholders')[0];
const duFieldset = document.getElementsByName('designatedUsers')[0];
// Define the fieldset to be grabbed, clone it, then remove it
const auTemplateLocation = document.getElementsByName('au')[0];
const auTemplate = auTemplateLocation.cloneNode(true);
auTemplateLocation.remove();
const shTemplateLocation = document.getElementsByName('sh')[0];
const shTemplate = shTemplateLocation.cloneNode(true);
shTemplateLocation.remove();
const duTemplateLocation = document.getElementsByName('du')[0];
const duTemplate = duTemplateLocation.cloneNode(true);
duTemplateLocation.remove();
// Modify the "Add New User" button to add the new user
auFieldset.getElementsByTagName('div')[0].getElementsByTagName('button')[0].addEventListener('click',function(){addTemplate(auTemplate,auFieldset);},false);
// A function to target all descendants in order to add the ID's
function targetAllDescendants(node,execute) {
node.childNodes.forEach(function(child) {
targetAllDescendants(child,execute);
execute(child);
})
}
// The function that actually adds the ID
function assignID(node) {
if(node.nodeType === 3) {
if(node.nodeValue == 'User ID') {
node.textContent = node.textContent+' '+idIterator;
}
return;
}
if(node.hasAttribute('id')) {
node.setAttribute('id',idIterator+node.getAttribute('id'));
}
if(node.hasAttribute('for')) {
node.setAttribute('for',idIterator+node.getAttribute('for'));
}
if(node.hasAttribute('name')) {
node.setAttribute('name',idIterator+node.getAttribute('name'));
}
}
// The function that then adds the new template with the new ID to the page and adds to the ID number
function addTemplate(template,section) {
assignID(template);
targetAllDescendants(template, assignID);
template.addEventListener('click',showUser);
const location = section.getElementsByTagName('div')[0];
console.log(location);
location.parentNode.insertBefore(template, location);
idIterator ++;
console.log(idIterator);
}
// To be done...
function showUser() {
}
// Attempting to add two templates...
addTemplate(auTemplate,auFieldset);
addTemplate(auTemplate,auFieldset);
What is extra odd to me is the ID in the JS increments correctly, but I get some wild numbers within the actual HTML.