In my input form the user needs to be able to input multiple lines of data. I achieve this by making an ajax call to submit the information and then it will clone that row and append it to my table body so the user can enter more data. They can do this as many times as they want. However, I want to be able to disable the previous whenever a new row is created.
This is what I currently have to try to solve this problem. It works for the first two rows, as in when I click add on the first row it creates a new one and the previous items are disabled. However, when I click on add again to create another row, row three, that row is automatically disabled. I'm assuming because it's cloning the first row. If anyone has any ideas on how to fix this is greatly appreciated! Thanks!
$('#tableData').on('click', 'button.addRow', (e) => {
const cloneRow = $('#tableData tbody tr').first();
e.preventDefault();
let data = {
project_id: getPid,
imp_or_ann: $(".imp_or_ann").last().val(),
category: $(".category").last().val(),
cost: $(".cost").last().val(),
hours: $(".hours").last().val()
}
$.ajax({
url: '/costs_hours',
type: 'POST',
data: data
}).then(
cloneRow.clone().appendTo('#tableData tbody').find(".cost, .hours").val(''),
$(".imp_or_ann:not(:last)").attr("disabled", true),
$(".category:not(:last)").attr("disabled", true),
$(".cost:not(:last)").attr("disabled", true),
$(".hours:not(:last)").attr("disabled", true),
)
});
This is the HTML
<div class="row">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Costs and Hours</li>
</ol>
</nav>
<form action='/costs_hours' id="formData" method="POST">
<div class="card border-secondary w-100 text-light" style="background-color: #333f48">
<h5 style="background-color: #bf5700;" class="card-header">Costs & Hours</h5>
<div class="card-body w-100 text-end">
<div id="errors" class="text-start"></div>
<table id="tableData" class="table text-light text-center mt-3">
<thead>
<tr>
<th scope="col">Implementation or Annual</th>
<th scope="col">Category</th>
<th scope="col">Costs</th>
<th scope="col">Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="input-group mb-3">
<div class="input-group mb-3">
<select name="imp_or_ann" class="form-select imp_or_ann"
id="inputGroupSelect01">
<option disabled selected>Choose...</option>
<option>Implementation</option>
<option>Annual</option>
</select>
</div>
</div>
</td>
<td>
<div class="input-group mb-3">
<div class="input-group mb-3">
<select name="category" class="form-select category" id="inputGroupSelect01">
<option disabled selected>Choose...</option>
<option>EMO</option>
<option>Analysts</option>
<option>Maintenance</option>
<option>ETS</option>
<option>BOT</option>
<option>OtherUT</option>
<option>Materials</option>
<option>Non-UT Contract</option>
<option>Contingency</option>
</select>
</div>
</div>
</td>
<td>
<div class="input-group mb-3">
<input name="cost" type="text" class="cost form-control">
</div>
</td>
<td>
<div class="input-group mb-3">
<input name="hours" type="text" class="hours form-control">
</div>
</td>
<td>
<button type="button" style="background-color: #bf5700;"
class="btn btn-warning text-light addRow"><i
class="fas fa-plus-circle"></i> Add
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="row text-center my-3">
<div class="col-11 text-end">
<button disabled id="next" type="button" class='btn btn-success'><a id="link"
class="text-white">Next</a>
</button>
</div>
</div>
</div>
</form>
</div>
The issue is indeed the first row. You are cloning it after inputs within it are disabled
Create a clone() of it when page loads and before anything is disabled within that row. If there are any preset values in first row you can reset them in the cloned version
Then append a clone of that clone as needed and prior to that append disable other inputs
Simplified working version of add and disable:
const $table = $('#tableData'),
$tbody = $table.find('tbody'),
$cloneRow = $tbody.find('tr').first().clone();
$table.on('click', 'button.addRow', (e) => {
e.preventDefault();
$tbody.find(':input').prop('disabled', true);
$tbody.append($cloneRow.clone());
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Costs and Hours</li>
</ol>
</nav>
<form action='/costs_hours' id="formData" method="POST">
<div class="card border-secondary w-100 text-light" style="background-color: #333f48">
<h5 style="background-color: #bf5700;" class="card-header">Costs & Hours</h5>
<div class="card-body w-100 text-end">
<div id="errors" class="text-start"></div>
<table id="tableData" class="table text-light text-center mt-3">
<thead>
<tr>
<th scope="col">Implementation or Annual</th>
<th scope="col">Category</th>
<th scope="col">Costs</th>
<th scope="col">Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="input-group mb-3">
<div class="input-group mb-3">
<select name="imp_or_ann" class="form-select imp_or_ann"
id="inputGroupSelect01">
<option disabled selected>Choose...</option>
<option>Implementation</option>
<option>Annual</option>
</select>
</div>
</div>
</td>
<td>
<div class="input-group mb-3">
<div class="input-group mb-3">
<select name="category" class="form-select category" id="inputGroupSelect01">
<option disabled selected>Choose...</option>
<option>EMO</option>
<option>Analysts</option>
<option>Maintenance</option>
<option>ETS</option>
<option>BOT</option>
<option>OtherUT</option>
<option>Materials</option>
<option>Non-UT Contract</option>
<option>Contingency</option>
</select>
</div>
</div>
</td>
<td>
<div class="input-group mb-3">
<input name="cost" type="text" class="cost form-control">
</div>
</td>
<td>
<div class="input-group mb-3">
<input name="hours" type="text" class="hours form-control">
</div>
</td>
<td>
<button type="button" style="background-color: #bf5700;"
class="btn btn-warning text-light addRow"><i
class="fas fa-plus-circle"></i> Add
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="row text-center my-3">
<div class="col-11 text-end">
<button disabled id="next" type="button" class='btn btn-success'><a id="link"
class="text-white">Next</a>
</button>
</div>
</div>
</div>
</form>
</div>