I'm currently facing an issue with an HTML template I built using Bootstrap. My problem lies in the fact that I have a JavaScript function that dynamically adds rows to a Django form with specific fields whenever I need to. However, when I add a row, the submit button ceases to function as intended and instead keeps adding more product fields that need to be filled, all initialized to "None."
Here is the code snippet for the HTML template:
{% block createlist %}
<form id="form-container" method="POST">
{% csrf_token %}
<div class="card">
<div class="form-group" id="form-group">
<div class="row mt-3">
<h4 class="card-title md-2 m-2">List Name</h4>
<div class="m-2">{{ listform.name}}</div>
</div>
<div id="button_row" class="row mt-0 no-gutters"> <!-- Apply .row class here -->
<div class="row">
<h2 class="col-md-2 md-2 m-2">Products</h2>
<div id="add-form" class="col-md-1 md-2 m-2"><button type="button" class="btn btn-primary">+</button></div>
</div>
<div class="col-md-2 m-2">Product Name</div>
<div class="col-md-2 m-2">Quantity</div>
<div class="col-md-2 m-2">Weight</div>
<div class="col-md-2 m-2">Price</div>
</div>
{{ productformset.management_form }}
{% for form in productformset %}
<div id="form-row" class="row mt-0 no-gutters"> <!-- Apply .row class here -->
<div class="col-md-2 m-2"><input type="text" name="{{ form.prefix }}-product_name" value=""></div>
<div class="col-md-2 m-2"><input type="text" name="{{ form.prefix }}-quantity" value="{{ form.quantity.value }}"></div>
<div class="col-md-2 m-2"><input type="text" name="{{ form.prefix }}-weight" value="{{ form.weight.value }}"></div>
<div class="col-md-2 m-2"><input type="text" name="{{ form.prefix }}-price" value="{{ form.price.value }}"></div>
</div>
{% endfor %}
</div>
</div>
<button type="submit">Submit</button>
</form>
<script>
document.addEventListener("DOMContentLoaded", function() {
let addButton = document.querySelector("#add-form");
let totalForms = document.querySelector("#id_form-TOTAL_FORMS");
let productFormRowToClone = document.querySelector("#form-row");
let productFormsContainer = document.querySelector("#form-group");
let formNum = productFormRowToClone.children.length - 2;
addButton.addEventListener('click', addForm);
function addForm(e) {
e.preventDefault();
let newProductFormRow = productFormRowToClone.cloneNode(true); // Clone the specific row
// Increment form number
// Exclude the header row
formNum++;
// Update the form prefixes
let formRegex = RegExp(`form-(\\d){1}-`, 'g');
newProductFormRow.innerHTML = newProductFormRow.innerHTML.replace(formRegex, `form-${formNum}-`)
// Insert the new form before the submit button
productFormsContainer.insertAdjacentElement("beforeend",newProductFormRow);
totalForms.setAttribute('value', `${formNum+1}`);
}
});
</script>
{% endblock createlist %}
Below is a screenshot of the issue I'm facing. When I click the submit button, rows with "None" values keep getting added: enter image description here
I've made various changes to the JavaScript file but haven't been able to pinpoint the exact cause of the problem. Previously, when the add button wasn't inside a div with the class "row" but was directly under the whole container, it worked fine.