I have a form that I am building with a table, I want to be able to add or delete rows to this form and submit.
Here is a js.fiddle for my form
https://jsfiddle.net/oyvk1whx/
<form asp-controller="Institution" asp-action="AccountCategoryFees" method="post" class="form-horizontal">
<div asp-validation-summary="All" class="text-danger"></div>
<input asp-for="AccountCategoryId" type="hidden"/>
<table class="table table-responsive" id="feeTable">
<thead>
<tr>
<td><strong>Description</strong></td>
<td><strong>Price</strong></td>
<td><strong>Delete</strong></td>
</tr>
</thead>
#for (int j = 0; j < Model.Fees.Count; j++)
{
<tr>
<td>
<input asp-for="Fees[j].Description" />
</td>
<td>
<span style="position: absolute; margin-left: 2px; margin-top: 8px;">$</span><input asp-for="Fees[j].Price" type="number" min="0.00" step="0.0001" max="2500" class="form-control" />
</td>
<td>
<input type="button" class="deleteButton btn btn-md btn-danger" value="Delete">
</td>
</tr>
}
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" style="color:gray" value="Add Fee" />
</td>
</tr>
<tr></tr>
</tfoot>
</table>
<div class="modal-footer" style="padding:0px;">
<button type="submit" class="btn bg-primary">Save</button>
</div>
</form>
<script>
var feeTypes = #Html.Raw(Json.Serialize(#Model.Fees));
</script>
<script>
var counter = #Model.Fees.Count;
$('#feeTable').on("click", "#addrow", function () {
var cols = "<tr>";
cols += '<td><input id="Fees_' + counter + '__Description" name="Fees[' + counter + '].Description"/></td>';
cols += '<td><span style="position: absolute; margin-left: 2px; margin-top: 8px;">$</span><input id="Fees_' + counter + '__Price" name="Fees[' + counter + '].Price" type="number" min="0.00" step="0.0001" max="2500" value="0" class="form-control"/></td>';
cols += '<td><input type="button" class="deleteButton btn btn-md btn-danger" value="Delete"></td>';
cols += '</tr>';
$("#feeTable").append(cols);
counter++;
});
$(document).on("click", ".deleteButton", function (event) {
$(this).closest("tr").remove();
});
</script>
The script works fine for adding new rows and deleting rows. The issue is when I delete a row the form no longer submits correctly, all rows after the deleted one are ignored.
I believe this is because of the disconnect in the ids, since there is a gap the model binder cannot parse it.
Any suggestions?
I believe this is because of the disconnect in the ids, since there is a gap the model binder cannot parse it
I would suggest to avoid square brackets in names and/or ids if possible and to solve your issue on your server side. In any case, if you need to rearrange IDs and NAMEs attributes you can simply cycle on each table row (because on server side you will handle only names, you can rearrange only these) :
$('#feeTable tr:has(input.deleteButton)').each(function(rIdx, row) {
$(row).find('[id^=Fees_]').each(function(cIdx, col) {
// col.id = col.id.replace(/\d+/, rIdx);
col.name = col.name.replace(/\d+/, rIdx);
});
})
var counter = 0;
$('#feeTable').on("click", "#addrow", function () {
var cols = "<tr>";
cols += '<td><input id="Fees_' + counter + '__Description" name="Fees[' + counter + '].Description"/></td>';
cols += '<td><span style="position: absolute; margin-left: 2px; margin-top: 8px;">$</span><input id="Fees_' + counter + '__Price" name="Fees[' + counter + '].Price" type="number" min="0.00" step="0.0001" max="2500" value="0" class="form-control"/></td>';
cols += '<td><input type="button" class="deleteButton btn btn-md btn-danger" value="Delete"></td>';
cols += '</tr>';
$("#feeTable").append(cols);
counter++;
});
$(document).on("click", ".deleteButton", function (event) {
$(this).closest("tr").remove();
$('#feeTable tr:has(input.deleteButton)').each(function(rIdx, row) {
$(row).find('[id^=Fees_]').each(function(cIdx, col) {
// col.id = col.id.replace(/\d+/, rIdx);
col.name = col.name.replace(/\d+/, rIdx);
});
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-responsive" id="feeTable">
<thead>
<tr>
<td><strong>Description</strong></td>
<td><strong>Price</strong></td>
<td><strong>Delete</strong></td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" style="color:gray" value="Add Fee" />
</td>
</tr>
<tr></tr>
</tfoot>
</table>
<button type="submit" class="btn bg-primary">Save</button>
Related
Enable "Delete" button in forth col of the table when the row is more than one and Disable when the row is one.
$(document).ready(function() {
var counter = 0;
$("#addrow2").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control"></td>';
cols += '<td><input type="text" class="form-control"></td>';
cols += '<td><input type="text" class="form-control"></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger" value="Delete"></td>';
newRow.append(cols);
$("#myTable2").append(newRow);
counter++;
});
$("#myTable2").on("click", ".ibtnDel", function(event) {
$(this).closest("tr").remove();
counter -= 1;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable2" class="table">
<thead>
<tr>
<th>Full Name</th>
<th>Full Address</th>
<th>Business or Occupation</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="button" class="Del ibtnDel btn btn-md btn-danger" id="DeleteRow1" value="Delete" disabled='disabled'></td>
</tr>
</tbody>
</table>
You can use prop() to enabled/disabled .. also you can add/removeClass to prevent the click ..and on delete button click you need to check for the length of rows .. see the next code
$(document).ready(function() {
var counter = 0;
$("#addrow2").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control"></td>';
cols += '<td><input type="text" class="form-control"></td>';
cols += '<td><input type="text" class="form-control"></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger" value="Delete"></td>';
newRow.append(cols);
$("#myTable2").append(newRow);
$(".ibtnDel").prop('disabled' , false).removeClass('disabled'); // <<<<<< here
counter++;
});
$("#myTable2").on("click", ".ibtnDel:not(.disabled)", function(event) { // <<<< here ..add :not(.disabled) to prevent the click for .disabled class element
$(this).closest("tr").remove();
counter -= 1;
// >>>>>> here ..check for the row length
if($("#myTable2 tbody tr").length === 1){
$(".ibtnDel").prop('disabled' , true).addClass('disabled');
}
console.log($("#myTable2 tbody tr").length);
});
});
.disabled{
background : red;
color : #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addrow2">Add Row</button>
<table id="myTable2" class="table">
<thead>
<tr>
<th>Full Name</th>
<th>Full Address</th>
<th>Business or Occupation</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="button" class="Del ibtnDel btn btn-md btn-danger" id="DeleteRow1" value="Delete" disabled='disabled'></td>
</tr>
</tbody>
</table>
I have two tables to which I want to be able to dynamically add and delete rows that both use separate scripts but are the same. How can I alter the second script so that it is able to make changes to the second table and not the first one?
Table:
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Numbers</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4">
<input type="text" name="number[]" class="form-control"/>
</td>
<td class="col-sm-4"><a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="0" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Another Number"/>
</td>
</tr>
</tfoot>
</table>
Script:
<script>
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="number min="1"" class="form-control" name="step_number[]' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="step_description[]' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
});
});
</script>
you should do like is done in the line delete.
instead of
$("table.order-list").append(newRow);
you can do
$(this).closest("table.order-list").append(newRow);
and should add a class to add button instead of using the id
when I click the button, I need to add a row in the table above the current
I found the search code but it adds a line at the bottom tell me where to dig to redo it
http://jsfiddle.net/Guruprasad_Rao/Lg0v4yyz/
<table id="myTable" class="order-list">
<thead>
<tr>
<td>Name</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="name" />
</td>
<td>
<input type="text" name="price1" />
</td>
<td><input type="button" id="ibtnDel" value="Delete"></td>
<td colspan="5" style="text-align: left;">
<input type="button" class="addRow" id="addrow" value="Add Row" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="">Grand Total: $<span id="grandtotal"></span>
</td>
</tr>
</tfoot>
</table>
You can use the insertBefore() instead of insertAfter()
The insertBefore() method inserts HTML elements before the selected elements.
$(document).ready(function () {
var counter = 0;
$(document).on("click",".addRow", function () {
console.log('clicked');
var counter = $('#myTable tr').length - 2;
$(document).on("click",".dele", function () {
counter = -1
});
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" name="name' + counter + '"/></td>';
cols += '<td><input type="text" name="price' + counter + '"/></td>';
cols += '<td><input type="button" id="ibtnDel" class="dele" value="Delete"></td>';
cols += '<td colspan="5" style="text-align: left;"><input type="button" class="addRow" value="Add Row" /></td>';
newRow.append(cols);
newRow.insertBefore($(this).parents().closest('tr'));
//$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("change", 'input[name^="price"]', function (event) {
calculateRow($(this).closest("tr"));
calculateGrandTotal();
});
$("table.order-list").on("click", ".dele", function (event) {
$(this).closest("tr").remove();
calculateGrandTotal();
});
});
function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();
}
function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="price"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="order-list">
<thead>
<tr>
<td>Name</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="name" />
</td>
<td>
<input type="text" name="price1" />
</td>
<td><input type="button" id="ibtnDel" value="Delete"></td>
<td colspan="5" style="text-align: left;">
<input type="button" class="addRow" id="addrow" value="Add Row" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="">Grand Total: $<span id="grandtotal"></span>
</td>
</tr>
</tfoot>
</table>
You can do something like this in your JS script:
// Replace the following
// newRow.insertAfter($(this).parents().closest('tr'));
// with
newRow.insertBefore($(this).parents('tr'));
I'm trying to add a bootstrap-select dynamically in a table defined as follow:
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Select</td>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4">
<select class="selectpicker" data-style="select-with-transition" id="select0">
<option>opt1</option>
<option>opt2</option>
</select>
</td>
<td class="col-sm-4">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4">
<input type="mail" name="mail" class="form-control" />
</td>
<td class="col-sm-3">
<input type="text" name="phone" class="form-control" />
</td>
<td class="col-sm-2"><a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>
Essentially my script create new row to that table when the user press a button.
The problem is that the new bootstrap-select which you can download here, is not added correctly, infact is invisible. I don't know how to fix that, some one could help me?
This is the js code:
$(document).ready(function() {
var counter = 0;
$("#addrow").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><select class="selectpicker" id="select' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function(event) {
$(this).closest("tr").remove();
counter -= 1
});
});
and this is a working fiddle.
I'm unsure what you meant by $(...).selectpicker() didn't work, because I tested it in your fiddle and it worked just fine. I forked it here https://jsfiddle.net/hpysz5xr/
The code is included below.
$(document).ready(function() {
var counter = 0;
$("#addrow").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><select class="selectpicker" id="select' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
$('#select'+counter).selectpicker();
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function(event) {
$(this).closest("tr").remove();
counter -= 1
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Select</td>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4">
<select class="selectpicker" data-style="select-with-transition" id="criteria0">
<option>opt1</option>
<option>opt2</option>
</select>
</td>
<td class="col-sm-4">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4">
<input type="mail" name="mail" class="form-control" />
</td>
<td class="col-sm-3">
<input type="text" name="phone" class="form-control" />
</td>
<td class="col-sm-2">
<a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>
I have this written function :
$(".tdAdd").on("click", function () {
counter = $('#myTable tr').length - 3; //supposing i only have 2 data
var count = $("#myTable").length;
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="button" value="Add" class="tdAdd"/></td>';
cols += '<td><input type="text" name="name' + counter + '"/></td>';
cols += '<td><input type="text" name="price' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel" value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow); // this is adding row to the end. but i want i on a specific row after where the add button was clicked
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
});
});
and my table is like this :
<table id="myTable" class="order-list">
<thead>
<tr>
<td></td>
<td></td>
<td>Name</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">
<input type="button" id="addrow" value="Add Row" />
<td>
<input type="text" name="name" />
</td>
<td>
<input type="text" name="price1" />
</td>
<td>
<input type="button" value="Delete" class="ibtnDel"/>
</td>
</tr>
</tbody>
</table>
Here is a sample Fiddle
I want to add another row below where i clicked the Add row button. the fiddle will only add row on the bottom of the table and only the first button will work. any help would be appreciated. Thanks!
i tried :
$("table.order-list").eq(count-1).after(newRow)
but i still can't get the code to work
You need to apply the event listener to the document, because the button is dynamically created. EG:
$(document).on("click", '.tdAdd', function () { ... }
See updated fiddle:
http://jsfiddle.net/y8F88/1/