I am working in google app script and JavaScript to create a custom form to input information on to a spreadsheet. I am stuck on creating a dynamic form to update the input fields based on a radio button selection. I found a topic from a while ago to swap the div groups How to change a form using radio buttons?. However, the swapConfig suggestion by CrandellWS uses “this” to base the radio ID to the function. However, I also have an onsubmit passing “this” and I believe they are conflicting with each other. Looking for help on how to do both the swapConfig and onsubmit.
<script>
function handleFormSubmit(formObject) {
google.script.run.processForm(formObject);
document.getElementById("budgetDetails").reset();
}
function swapConfig(x) {
var radioName = document.getElementsByName(x.name);
for (i = 0; i < radioName.length; i++) {
document.getElementById(radioName[i].id.concat("Settings")).style.display = "none";
}
document.getElementById(x.id.concat("Settings")).style.display = "initial";
}
</script>
<br>
<form class="form" id="budgetDetails" onsubmit="handleFormSubmit(this)">
<div class="form-group">
<label for="entryType" class="form-label">Entry Type</label><br>
<input type="radio" name="entryType" id="income" value="income" onchange="swapConfig(name)">
<label for="income" class="btn btn-sm btn-success">Income</label>
<input type="radio" name="entryType" id="transfer" value="transfer" onchange="swapConfig(name)">
<label for="transfer" class="btn btn-sm btn-warning">Transfer</label>
<input type="radio" name="entryType" id="expense" value="expense" onchange="swapConfig(name)" checked>
<label for="expense" class="btn btn-sm btn-danger">Expense</label>
</div>
<div id="incomeSettings" class="form-group" style="display:none">
<label for="incomePayee">Payee</label>
<input type="text" name="incomePayee" id="incomePayee" class="form-control" placeholder="Payee Name" required>
</div>
<div id="transferSettings" class="form-group" style="display:none">
<label for="paymentTo" class="form-label">Payment To</label>
<select class="form-select form-select-sm" id="paymentTo" name="paymentTo" required>
<option>--Select Payment To--</option>
</select>
</div>
<div id="expenseSettings" class="form-group">
<label for="expensePayee">Payee</label>
<input type="text" name="expensePayee" id="expensePayee" class="form-control" placeholder="Payee Name" required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Tried to figure out an alternative to passing “this” like this.id or this.value in swapConfig() based on one of the suggested posts but it does not seem to work.