WHAT AM I DOING?
I am making a transaction keeping application that has an option to bulk add transactions. It is a form which has a table inside. Each row of the table stands for one transaction with each cell having an input field. There is an option to remove a row and one to add a row.
Problems
I have two problems:
- When adding a row, how do I take original options for the select and then add them to the new selects.
- When deleting a row, shift all of the other input’s
nameattribute 1 down.
Code
Code Tried For The First Problem So Far
JavaScript
x
<!-- HTML START --><?php$conn = new mysqli('localhost', 'admin', 'myphpadmin', 'tests');$merch = $conn->query("Select Name From options Where `Type` = 'Merchant'");$type = $conn->query("Select Name From options Where `Type` = 'Type'");$source = $conn->query("Select Name From options Where `Type` = 'Source'")?><!DOCTYPE html><html><head><title>Add In Bulk</title><link rel='stylesheet' href='styles.css' type='text/css'><style>td{width: calc(100% / 6);overflow-x: hidden}</style></head><body><h1>Add In Bulk</h1><form action='bulk.php' method='post'><table><tr><th>Description</th><th>Date</th><th>Amount</th><th>Merchant</th><th>Type</th><th>Source</th><th>Delete</th></tr><tr><td><input type='text' name='des1' required></td><td><input type='data' name='d1' required></td><td><input type='number' step='0.01' min='0' name='a1' required></td><td><select name='m1' required id='m'><option value='' disable selected>Select One</option><?phpwhile($row = mysqli_fetch_assoc($merch)){foreach($row as $value){echo "<option value='$value'>$value</option>";}}?></select></td><td><select name='t1' required id='t'><option value='' disable selected>Select One</option><?phpwhile($row = mysqli_fetch_assoc($type)){foreach($row as $value){echo "<option value='$value'>$value</option>";}}?></select></td><td><select name='s1' required id='s'><option value='' disable selected>Select One</option><?phpwhile($row = mysqli_fetch_assoc($source)){foreach($row as $value){echo "<option value='$value'>$value</option>";}}?></select></td><td><button class='del'>Delete</td></tr></table></form><button id='add'>Add</button><script src='....jquery.js'></script><script src='bulk.js'></script></body></html><!-- HTML END -->JavaScript
<!-- BULK.js START -->/*==================Get The Option Values======================*/var merchants = []var type = []var source = []$("#m option").each(function() {merchants.push(this.value);});$("#s option").each(function() {source.push(this.value);});$("#t option").each(function() {type.push(this.value);});/*==================ForEach Function======================*/function addoptions(item){return "<option value='" + item + "'>" + item + "</option>";}/*==================Declare Variables======================*/var table = document.getElementsByTagName('table');var tr = document.getElementsByTagName('tr');var fun = `<tr><td><input type='text' name='des` + ((tr.lenght) + 1).toString() + `' required></td><td><input type='data' name='d` + ((tr.lenght) + 1).toString() + `' required></td><td><input type='number' step='0.01' min='0' name='a` + ((tr.lenght) + 1).toString() + `1' required></td><td><select name='m` + ((tr.lenght) + 1).toString() + `' required id='m'><option value='' disable selected>Select One</option>` + merchants.forEach(addoptions); + `</select></td><td><select name='t` + ((tr.lenght) + 1).toString() + `' required id='t'><option value='' disable selected>Select One</option>` + type.forEach(addoptions); + `</select></td><td><select name='s` + ((tr.lenght) + 1).toString() + `' required id='s'><option value='' disable selected>Select One</option>` + source.forEach(addoptions); + `</select></td><td><button class='del'>Delete</button></td>`;/*==================Delete Rows======================*/$(document).on("click", ".del" , function(){ $(this).closest('tr').remove();/*if(tr.lenght == 0){table.remove;} Why Does This Not Work? */})/*==============Add Rows==========================*///Adding Rows$('#add').click(function(e){$(table).push(fun)})<!-- BULK.js END -->Second Problem
I have no idea where to begin!
Notes
JQuery Version: 3.5.1
PHP: Working – Confirmed
Getting Option Values: Working – Confirmed (Using
console.log())
Any Questions For Me?
Thanks and I hope what I have provided is enough!
Advertisement
Answer
That is a nice job for jQuery .clone().
So basically, on page load, you “clone” the row and store it in a variable… Then on #add click, clone that again to append it to the table.
I made a rowNum function to loop all row and number them. Call that function on add and on delete.
Obviously, the PHP lines do not work here. 😉
JavaScript
/* Delete Rows */$(document).on("click", ".del", function() { $(this).closest('tr').remove(); rowNum();})// Keeping a clone safe (before any changes)let rowClone = $(".clonable").clone();/* Add Rows */$('#add').click(function(e) { $("table").append(rowClone.clone().removeClass("clonable")); rowNum();})/* Row numbering */function rowNum() { $("table tbody tr").each(function(index, row) { // Inputs $(row).find("input").eq(0).attr("name", "des" + (index + 1)); $(row).find("input").eq(1).attr("name", "d" + (index + 1)); $(row).find("input").eq(2).attr("name", "a" + (index + 1)); // Selects $(row).find("select").eq(0).attr("name", "m" + (index + 1)); $(row).find("select").eq(1).attr("name", "t" + (index + 1)); $(row).find("select").eq(2).attr("name", "s" + (index + 1)); })}JavaScript
form { margin-top: 1em;}JavaScript
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><h1>Add In Bulk</h1><button id="add">Add a row</button><form action='bulk.php' method='post'> <table> <thead> <tr> <th>Description</th> <th>Date</th> <th>Amount</th> <th>Merchant</th> <th>Type</th> <th>Source</th> <th>Delete</th> </tr> </thead> <tbody> <tr class="clonable"> <td><input type='text' name='des1' required></td> <td><input type='data' name='d1' required></td> <td><input type='number' step='0.01' min='0' name='a1' required></td> <td> <select name='m1' required id='m'> <option value='' disable selected>Select One</option> <?php while($row = mysqli_fetch_assoc($merch)){ foreach($row as $value){ echo "<option value='$value'>$value</option>";}} ?> </select> </td> <td> <select name='t1' required id='t'> <option value='' disable selected>Select One</option> <?php while($row = mysqli_fetch_assoc($type)){ foreach($row as $value){ echo "<option value='$value'>$value</option>";}} ?> </select> </td> <td> <select name='s1' required id='s'> <option value='' disable selected>Select One</option> <?php while($row = mysqli_fetch_assoc($source)){ foreach($row as $value){ echo "<option value='$value'>$value</option>";}} ?> </select> </td> <td><button class='del'>Delete</td> </tr> </tbody> </table></form>