@model Registration
@{
ViewData["Title"] = "Register Page - Step Two";
}
<button type="button" class="btn btn-primary" onclick="addAddress()">Add Address</button>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<h2 class="text-center mb-4">Address Details</h2>
<form asp-page-handler="RegisterStepTwo" method="post">
<div id="addressesContainer" class="row mt-3 fieldRow">
<!-- Addresses will be dynamically added here -->
</div>
<button type="submit" class="btn btn-primary w-100">Next</button>
</form>
</div>
</div>
</div>
@section Scripts {
<script>
let addressCount = 0;
function addAddress() {
addressCount++;
const addressesContainer = document.getElementById('addressesContainer');
const fieldHtml = `
<div class="col-md-2 mb-3" id="type${addressCount}">
<label class="form-label">Address type</label>
<select id="addressType${addressCount}" class="form-select">
<option value="">Select Address Type</option>
<option value="Permanent">Permanent</option>
<option value="Present">Present</option>
</select>
</div>
<div class="col-md-3 mb-3" id="housenumber${addressCount}" >
<label class="form-label">House No.</label>
<input type="text" id="houseNumberVisible${addressCount}" class="form-control" placeholder="Enter house number">
</div>
<div class="col-md-3 mb-3 " id="street${addressCount}" >
<label class="form-label">Street</label>
<input type="text" id="streetVisible${addressCount}" class="form-control" placeholder="Enter street name">
</div>
<div class="col-md-2 mb-3" id="barangay${addressCount}" >
<label class="form-label">Barangay</label>
<input type="text" id="barangayVisible${addressCount}" class="form-control" placeholder="Enter barangay name">
</div>
<div class="col-md-2 mb-3" id="btnRemove">
<label class="form-label"></label>
<button type="button" class="btn btn-danger remove-address-btn" onclick="removeField(${addressCount})">-</button>
</div>
`;
addressesContainer.innerHTML += fieldHtml;
}
function removeField(index) {
// Construct the ID of the element to remove based on the index
const type = `type${index}`;
const housenumber = `housenumber${index}`;
const street = `street${index}`;
const barangay = `barangay${index}`;
const removebtn = `btnRemove${index}`;
// Find the element within the #addressesContainer
const elementToRemove = document.getElementById(type).closest('.col-md-2.mb-3');
const housenumberToRemove = document.getElementById(housenumber).closest('.col-md-3.mb-3');
const streetToRemove = document.getElementById(street).closest('.col-md-3.mb-3');
const barangayToRemove = document.getElementById(barangay).closest('.col-md-2.mb-3');
const buttonToRemove = document.getElementById(removebtn).closest('.col-md-2.mb-3');;
// fieldRow
if (elementToRemove && housenumberToRemove && streetToRemove && barangayToRemove && buttonToRemove) {
elementToRemove.remove();
housenumberToRemove.remove();
streetToRemove.remove();
barangayToRemove.remove();
buttonToRemove.remove();
}
}
addAddress();
</script>
}
The code above is a form that can fill up their address details. The resident can have multiple addresses so that's why the system has a add button to add a new set of fields for address.
Now my problem is that once the resident fills up the address then the resident adds again for the another addresses the data for the first address was clear.
Example
The data was clear when I clicked the add address button.