I am building a website that takes in unique information (such as shareholder info and loan info) about specific store clients and stores them.
Because it is impossible to know how many shareholders/lenders a client has, the website has the ability to add and remove shareholders/Lenders and toggle between them being legal entities or individuals.
My issue:
My issue is that when I add a shareholder/Lender, the radio toggle (which is an onclick) function does not seem to work properly as I add new shareholders/lenders.
Is there a way to add shareholders/lenders (by cloning) while updating the onclick functions for each created shareholder?
I have replicated my code below in a JS fiddle: Client Project
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="aa.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="aa.js" defer></script>
<title>Loan Agreement</title>
</head>
<body>
<form action="#" class="form">
<h1 class="text-center">Client Registration List</h1>
<!-- Progress bar -->
<div class="progressbar">
<div class="progress" id="progress"></div>
<div class="progress-step progress-step-active" data-title="Client Info"></div>
<div class="progress-step" data-title="Shareholder Info"></div>
<div class="progress-step" data-title="Loan Info"></div>
<div class="progress-step" data-title="Background"></div>
<div class="progress-step" data-title="Defs"></div>
</div>
<!-- Steps -->
<div class="form-step form-step-active">
<div class="checkbox">
<label for="legalEntity">Legal Entity</label>
<input type="radio" name="choice" id="legalEntity" value="legalEntity" onclick="filterForm()" checked />
<label for="Individual">Individual</label>
<input type="radio" name="choice" id="Individual" value="Individual" onclick="filterForm()" />
</div>
<div id="lec" class="legal-entity-content">
<div class="input-group">
<label for="CompanyName">Company Name</label>
<input type="text" name="CompanyName" id="CompanyName" placeholder="Ex. My Pocket Counsel" />
</div>
<div class="input-group">
<label for="RegisteredAddress">Registered Address</label>
<input type="text" name="RegisteredAddress" id="RegisteredAddress" placeholder="Ex. MyPocketCounsel" />
</div>
<div class="input-group">
<label for="RegistrationNumber">Registration Number</label>
<input type="text" name="RegistrationNumber" id="RegistrationNumber" placeholder="Ex. MyPocketCounsel" />
</div>
<div class="input-group">
<label for="Definedas">Defined as...</label>
<input type="text" name="Definedas" id="Definedas" placeholder="Ex. MyPocketCounsel" />
</div>
</div>
<div id="ic" class="individual-content hide">
<div class="input-group">
<label for="FirstName">First Name</label>
<input type="text" name="FirstName" id="FirstName" placeholder="Ex. MyPocketCounsel" />
</div>
<div class="input-group">
<label for="LastName">Last Name</label>
<input type="text" name="LastName" id="LastName" placeholder="Ex. MyPocketCounsel" />
</div>
<div class="input-group">
<label for="Address">Address</label>
<input type="text" name="Address" id="Address" placeholder="Ex. MyPocketCounsel" />
</div>
<div class="input-group">
<label for="Definedas">Defined as...</label>
<input type="text" name="Definedas" id="Definedas" placeholder="Ex. MyPocketCounsel" />
</div>
</div>
<div class="">
<a href="#" class="btn btn-next width-50 ml-auto">Next</a>
</div>
</div>
<div class="form-step">
<div id="readroot">
<div class="checkbox">
<label for="LegalEntity">Legal Entity</label>
<input type="radio" name="choice0" id="legalEntity0" value="legalEntity" onclick="filterForm0()" />
<label for="Individual">Individual</label>
<input type="radio" name="choice0" id="Individual0" value="Individual" onclick="filterForm0()" />
</div>
<div id="lec0" class="legal-entity-content">
<div class="input-group">
<label for="CompanyName">Company Name</label>
<input type="text" name="CompanyName" id="CompanyName" placeholder="Ex. MyPocketCounsel" />
</div>
<div class="input-group">
<label for="RegisteredAddress">Registered Address</label>
<input type="text" name="RegisteredAddress" id="RegisteredAddress" placeholder="Ex. MyPocketCounsel" />
</div>
<div class="input-group">
<label for="RegistrationNumber">Registration Number</label>
<input type="text" name="RegistrationNumber" id="RegistrationNumber" placeholder="Ex. MyPocketCounsel" />
</div>
<div class="input-group">
<label for="Definedas">Defined as...</label>
<input type="text" name="Definedas" id="Definedas" placeholder="Ex. MyPocketCounsel" />
</div>
</div>
<div id="ic0" class="individual-content hide">
<div class="input-group">
<label for="FirstName">First Name</label>
<input type="text" name="FirstName" id="FirstName" placeholder="Ex. MyPocketCounsel" />
</div>
<div class="input-group">
<label for="LastName">Last Name</label>
<input type="text" name="LastName" id="LastName" placeholder="Ex. MyPocketCounsel" />
</div>
<div class="input-group">
<label for="Address">Address</label>
<input type="text" name="Address" id="Address" placeholder="Ex. MyPocketCounsel" />
</div>
<div class="input-group">
<label for="Definedas">Defined as...</label>
<input type="text" name="Definedas" id="Definedas" placeholder="Ex. MyPocketCounsel" />
</div>
</div>
<input type="button" value="Remove Lender" class="btn btn-remove-lender"
onclick="if (counter >= 1){
counter --;
this.parentNode.parentNode.removeChild(this.parentNode);
}else{alert('you must have at least one Lender');}">
</div>
<div>
<div class="checkbox">
<label for="LegalEntity">Legal Entity</label>
<input type="radio" name="choice2" id="legalEntityX" value="legalEntityX" onclick="filterFormX()" />
<label for="Individual">Individual</label>
<input type="radio" name="choice2" id="IndividualX" value="IndividualX" onclick="filterFormX()" />
</div>
<div id="lecX" class="legal-entity-content">
<div class="input-group">
<label for="CompanyName">Company Name</label>
<input type="text" name="CompanyName" id="CompanyName" placeholder="Ex. MyPocketCounsel" />
</div>
<div class="input-group">
<label for="RegisteredAddress">Registered Address</label>
<input type="text" name="RegisteredAddress" id="RegisteredAddress" placeholder="Ex. MyPocketCounsel" />
</div>
<div class="input-group">
<label for="RegistrationNumber">Registration Number</label>
<input type="text" name="RegistrationNumber" id="RegistrationNumber" placeholder="Ex. MyPocketCounsel" />
</div>
<div class="input-group">
<label for="Definedas">Defined as...</label>
<input type="text" name="Definedas" id="Definedas" placeholder="Ex. MyPocketCounsel" />
</div>
</div>
<div id="icX" class="individual-content hide">
<div class="input-group">
<label for="FirstName">First Name</label>
<input type="text" name="FirstName" id="FirstName" placeholder="Ex.MyPocketCounsel" />
</div>
<div class="input-group">
<label for="LastName">Last Name</label>
<input type="text" name="LastName" id="LastName" placeholder="Ex. MyPocketCounsel" />
</div>
<div class="input-group">
<label for="Address">Address</label>
<input type="text" name="Address" id="Address" placeholder="Ex. MyPocketCounsel" />
</div>
<div class="input-group">
<label for="Definedas">Defined as...</label>
<input type="text" name="Definedas" id="Definedas" placeholder="Ex. MyPocketCounsel" />
</div>
</div>
<input type="button" value="Remove Lender" class="btn btn-remove-lender"
onclick="if (counter >= 1){
counter --;
this.parentNode.parentNode.removeChild(this.parentNode);
}else{alert('you must have at least one Lender');}">
</div>
<span id="writeroot" class="pls"></span>
<div class="btns-group">
<input type="button" id="morefields" value="Add Lender" class="btn btn-add-lender" onclick="moreFields()">
<a href="#" class="btn btn-prev">Previous</a>
<a href="#" class="btn btn-next">Next</a>
</div>
<!--
"₦"
-->
</div>
<div class="form-step">
<div class="input-group">
<label for="LoanAmount">Loan Amount</label>
<div class="wrapper">
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon currency-symbol">$</div>
<input type="text" class="form-control currency-amount" id="inlineFormInputGroup" placeholder="0.00" size="8">
<div class="input-group-addon currency-addon">
<select class="currency-selector">
<option data-symbol="$" data-placeholder="0.00">USD</option>
<option data-symbol="€" data-placeholder="0.00">EUR</option>
<option data-symbol="£" data-placeholder="0.00">GBP</option>
<option data-symbol="₦" data-placeholder="0.00" selected>NGN</option>
<option data-symbol="¥" data-placeholder="0">JPY</option>
<option data-symbol="$" data-placeholder="0.00">CAD</option>
<option data-symbol="$" data-placeholder="0.00">AUD</option>
</select>
</div>
</div>
</div>
</div>
<div class="input-group">
<label for="Moratorium">Moratorium</label>
<input type="text" name="Moratorium" id="Moratorium" placeholder="Ex. MyPocketCounsel" />
</div>
<div class="input-group">
<label for="InterestRate">Interest Rate</label>
<input type="text" name="InterestRate" id="InterestRate" placeholder="Ex. MyPocketCounsel" />
</div>
<div class="input-group">
<label for="LoanDuration">Loan Duration/Maturity Date</label>
<input type="text" name="LoanDuration" id="LoanDuration" placeholder="Ex. MyPocketCounsel" />
</div>
<div class="input-group">
<label for="UseofLoan">Use of Loan</label>
<input type="text" name="UseofLoan" id="UseofLoan" placeholder="Ex. MyPocketCounsel" />
</div>
<div class="">
<div class="btns-group">
<a href="#" class="btn btn-prev">Previous</a>
<a href="#" class="btn btn-next">Next</a>
</div>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="Recitals">Recitals</label>
<input type="text" name="Recitals" id="Recitals" placeholder="Ex. MyPocketCounsel" />
</div>
<div class="">
<div class="btns-group">
<a href="#" class="btn btn-add-recital">Add Recital</a>
<a href="#" class="btn btn-remove-recital">Remove Recital</a>
<a href="#" class="btn btn-prev">Previous</a>
<a href="#" class="btn btn-next">Next</a>
</div>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="Definitions">Definitions</label>
<input type="text" name="Definitions" id="Definitions" placeholder="Ex. MyPocketCounsel" />
</div>
<div class="">
<div class="btns-group">
<a href="#" class="btn btn-add-definition">Add Definition</a>
<a href="#" class="btn btn-remove-definition">Remove Definition</a>
<a href="#" class="btn btn-prev">Previous</a>
<input type="submit" value="Submit" class="btn" />
</div>
</div>
</form>
</body>
</html>
Javascript:
const prevBtns = document.querySelectorAll(".btn-prev");
const nextBtns = document.querySelectorAll(".btn-next");
const progress = document.getElementById("progress");
const formSteps = document.querySelectorAll(".form-step");
const progressSteps = document.querySelectorAll(".progress-step");
let formStepsNum = 0;
nextBtns.forEach((btn) => {
btn.addEventListener("click", () => {
formStepsNum++;
updateFormSteps();
updateProgressbar();
});
});
prevBtns.forEach((btn) => {
btn.addEventListener("click", () => {
formStepsNum--;
updateFormSteps();
updateProgressbar();
});
});
function updateFormSteps() {
formSteps.forEach((formStep) => {
formStep.classList.contains("form-step-active") &&
formStep.classList.remove("form-step-active");
});
formSteps[formStepsNum].classList.add("form-step-active");
}
function updateProgressbar() {
progressSteps.forEach((progressStep, idx) => {
if (idx < formStepsNum + 1) {
progressStep.classList.add("progress-step-active");
} else {
progressStep.classList.remove("progress-step-active");
}
});
const progressActive = document.querySelectorAll(".progress-step-active");
progress.style.width =
((progressActive.length - 1) / (progressSteps.length - 1)) * 100 + "%";
}
const IndividualContent = document.getElementById("ic");
IndividualContent.classList.add("hide");
function filterForm() {
if(document.getElementById('legalEntity').checked) {
//hide individual contnet
const IndividualContent = document.getElementById("ic");
IndividualContent.classList.add("hide");
const legalEntityContent = document.getElementById("lec");
legalEntityContent.classList.remove("hide");
}else {
const legalEntityContent = document.getElementById("lec");
legalEntityContent.classList.add("hide");
const IndividualContent = document.getElementById("ic");
IndividualContent.classList.remove("hide");
}
}
function filterFormX() {
if(document.getElementById('legalEntityX').checked) {
//hide individual contnet
const IndividualContent = document.getElementById("icX");
IndividualContent.classList.add("hide");
const legalEntityContent = document.getElementById("lecX");
legalEntityContent.classList.remove("hide");
}else {
const legalEntityContent = document.getElementById("lecX");
legalEntityContent.classList.add("hide");
const IndividualContent = document.getElementById("icX");
IndividualContent.classList.remove("hide");
}
}
//Function to get more Lenders ie. input fields
let counter = 0;
let idCounter =0;
//old count once we get to the
let OC = idCounter -1;
function moreFields() {
var x, i;
counter ++;
idCounter ++;
//old count
let OC = idCounter -1;
//change function name
document.getElementById('legalEntity'+OC).onclick= filterForm1;
document.getElementById('Individual'+OC).onclick= filterForm1;
//let insertHere = document.getElementById('writeroot');
let newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
console.log(OC);
document.getElementById('legalEntity'+OC).id = 'legalEntity'+idCounter;
document.getElementById('Individual'+OC).id = 'Individual'+idCounter;
document.getElementById('ic'+OC).id = 'ic'+idCounter;
document.getElementById('lec'+OC).id = 'lec'+idCounter;
let insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
//Function to toggle legal entity for Lender2
function filterForm0() {
if(document.getElementById('legalEntity0').checked) {
//hide individual contnet
const IndividualContent = document.getElementById("ic0");
IndividualContent.classList.add("hide");
const legalEntityContent = document.getElementById("lec0");
legalEntityContent.classList.remove("hide");
console.log('nope');
}else {
const legalEntityContent = document.getElementById("lec0");
legalEntityContent.classList.add("hide");
const IndividualContent = document.getElementById("ic0");
IndividualContent.classList.remove("hide");
console.log('bange');
}
}
//Function to toggle legal entity for Lender3
function filterForm1() {
if(document.getElementById('legalEntity1').checked) {
//hide individual contnet
const IndividualContent = document.getElementById("ic1");
IndividualContent.classList.add("hide");
const legalEntityContent = document.getElementById("lec1");
legalEntityContent.classList.remove("hide");
console.log('nope2');
}else {
const legalEntityContent = document.getElementById("lec1");
legalEntityContent.classList.add("hide");
const IndividualContent = document.getElementById("ic1");
IndividualContent.classList.remove("hide");
console.log('bange2');
}
}
function showContent() {
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
function updateSymbol(e){
var selected = $(".currency-selector option:selected");
$(".currency-symbol").text(selected.data("symbol"));
$(".currency-amount").prop("placeholder", selected.data("placeholder"));
$('.currency-addon-fixed').text(selected.text());
}
$(".currency-selector").on("change", updateSymbol);
updateSymbol();
