After a user selects items from a list, they can submit the selected items to be saved in a table. The table is dynamically rendered using JavaScript and the data comes from a Map with keys as primary keys and values as descriptions and prices.
function displaySelectedItems(value, key, map) {
var newRow = document.createElement("tr");
var itemPK = document.createElement("td");
itemPK.setAttribute('class', 'id');
itemPK.textContent = key;
newRow.appendChild(itemPK);
var itemDescription = document.createElement("td");
itemDescription.textContent = value.item;
newRow.appendChild(itemDescription);
var itemPrice = document.createElement("td");
itemPrice.textContent = value.price;
newRow.appendChild(itemPrice);
selectedItemsTableBody.appendChild(newRow);
}
});
The HTML representation of the table;
<div class="table-responsive">
<table class="table table-borderless" id="selected_items_table">
<thead>
<tr>
<th>Description</th>
<th>Price</th>
<th>Remove</th>
</tr>
</thead>
<form action="" method="POST"> {% csrf_token %}
<tbody id="selectedItemsTable">
<!-- SELECTED ITEMS ARE DISPLAYED HERE -->
</tbody>
</form>
</table>
</div>
Django Model Structure
class Selected(models.Model):
foreignKey = models.CharField(max_length=5)
description = models.CharField(max_length=20)
price = models.DecimalField(max_digits=5, decimal_places=2)
I'm unsure how to save the table rows in the model or whether it should be done in the view to maintain model simplicity. Is it feasible to save data from multiple table rows with one submit button?
Some example data:
Pk . Description . Price
12 . Pizza . 13.50
13 . Water . 3.00
Any suggestions would be appreciated. Thank you!