move counter to global

remove inputs from template and move all generation of inputs to js script
This commit is contained in:
Yisroel Baum 2024-10-29 15:25:32 +02:00
parent bb7bc37a3e
commit 86b1ccb3de
2 changed files with 5 additions and 10 deletions

View file

@ -1,25 +1,27 @@
const addLineButton = document.getElementById("add-line-button"); const addLineButton = document.getElementById("add-line-button");
const lineContainer = document.getElementById('table-body'); const lineContainer = document.getElementById('table-body');
var counter = 1;
function addLine(){ function addLine(){
const columns = ['Amount', 'Vendor', 'Confirmation Code', 'Note']; const columns = ['Amount', 'Vendor', 'Confirmation Code', 'Note'];
var tr = document.createElement('tr'); var tr = document.createElement('tr');
var counter = 2;
columns.forEach(column => { columns.forEach(column => {
var td = document.createElement('td'); var td = document.createElement('td');
var ip = document.createElement('input'); var ip = document.createElement('input');
ip.type = 'text' ip.type = 'text'
ip.classList = 'form-control' ip.classList = 'form-control'
ip.name = `${column}-${counter++}` ip.name = `${column}-${counter}`
ip.placeholder = column ip.placeholder = column
td.appendChild(ip) td.appendChild(ip)
tr.appendChild(td) tr.appendChild(td)
}) })
counter++
lineContainer.appendChild(tr) lineContainer.appendChild(tr)
} }
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
addLine()
addLineButton.addEventListener('click', addLine) addLineButton.addEventListener('click', addLine)
}) })

View file

@ -37,14 +37,7 @@
<table class="table table-bordered"> <table class="table table-bordered">
<input type="hidden" name="parent-id" value="{{li.id}}"/> <input type="hidden" name="parent-id" value="{{li.id}}"/>
<input type="hidden" name="date" value="{{li.date}}"/> <input type="hidden" name="date" value="{{li.date}}"/>
<tbody id="table-body"> <tbody id="table-body"></tbody>
<tr>
<td><input type="text" class="form-control" name="Amount-1" placeholder="Amount"></td>
<td><input type="text" class="form-control" name="Vendor-1" placeholder="Vendor"></td>
<td><input type="text" class="form-control" name="Confirmation Code-1" placeholder="Confirmation Code"></td>
<td><input type="text" class="form-control" name="Note-1" placeholder="Note"></td>
</tr>
</tbody>
</table> </table>
</div> </div>
<button type="button" class="btn btn-primary" id="add-line-button">Add Another Line?</button> <button type="button" class="btn btn-primary" id="add-line-button">Add Another Line?</button>