I tried so many times to solve this problem using ajax calls to webmethods but it didn't work.
Now, I am trying to use native asp.net code.
As you can see from the code, user can add as many rows as possible but how do I capture the rows inserted and then insert those rows into the database?
<head>
<script type='text/javascript'> //<![CDATA[
window.onload=function(){
$(document).on('click', '.delete-row', function(){
$(this).closest('tr').remove();
});
$(document).on('click', '.delete-row', function(){
$(this).closest('tr').remove();
});
$(document).on('click', '.add-row', function(){
var tr = $(this).closest('tr');
var field = [
'.sourcename', '.sourceaddress', '.sourceincome'
];
console.log(tr);
var flag = false;
for(var i = 0; i < field.length; i++) {
var ele = $.trim($(tr).find(field[i]).val());
console.log(ele);
console.log($(tr).find(field[i]));
if(!ele.length) {
flag = true;
$(tr).find(field[i]).addClass('error');
} else {
$(tr).find(field[i]).removeClass('error');
}
}
if (!flag) {
var html = "<tr><td><input name='sourcename" + i + "' type='text' placeholder='Source Name' class='form-control sourcename input-md'/> </td><td><input name='sourceaddress" + i + "' type='text' placeholder='Source address...' class='sourceaddress form-control input-md'></td><td><input name='sourceincome" + i + "' type='text' placeholder='Income...' class='form-control input-md sourceincome'></td><td><a href='#' class='btn btn-warning add-row' style='background-color:#0093B2'><i class='glyphicon glyphicon-plus'></i></a><a href='#' class='btn btn-danger delete-row'><i class='glyphicon glyphicon-minus'></i></a></td></tr>";
$(html).insertAfter(tr);
}
});
$(document).on('click', '.delete-row', function () {
$(this).closest('tr').remove();
});
$(document).on('click', '.add-row', function () {
var tr = $(this).closest('tr');
var field = [
'.spousename', '.spouseaddress', '.spouseincome'
];
console.log(tr);
var flag = false;
for (var i = 0; i < field.length; i++) {
var ele = $.trim($(tr).find(field[i]).val());
console.log(ele);
console.log($(tr).find(field[i]));
if (!ele.length) {
flag = true;
$(tr).find(field[i]).addClass('error');
} else {
$(tr).find(field[i]).removeClass('error');
}
}
if (!flag) {
var html = "<tr><td><input name='spousename" + i + "' type='text' placeholder='Spouse Name' class='form-control spousename input-md'/> </td><td><input name='spouseaddress" + i + "' type='text' placeholder='Spouse address...' class='spouseaddress form-control input-md'></td><td><input name='spouseincome" + i + "' type='text' placeholder='Income...' class='form-control input-md spouseincome'></td><td><a href='#' class='btn btn-warning add-row' style='background-color:#0093B2'><i class='glyphicon glyphicon-plus'></i></a><a href='#' class='btn btn-danger delete-row'><i class='glyphicon glyphicon-minus'></i></a></td></tr>";
$(html).insertAfter(tr);
}
});
$(document).on('click', '.add-row', function () {
var tr = $(this).closest('tr');
var field = [
'.dividentname', '.dividentaddress', '.dividentincome'
];
console.log(tr);
var flag = false;
for (var i = 0; i < field.length; i++) {
var ele = $.trim($(tr).find(field[i]).val());
console.log(ele);
console.log($(tr).find(field[i]));
if (!ele.length) {
flag = true;
$(tr).find(field[i]).addClass('error');
} else {
$(tr).find(field[i]).removeClass('error');
}
}
if (!flag) {
var html = "<tr><td><input name='dividentname" + i + "' type='text' placeholder='Divident Name...' class='form-control dividentname input-md'/> </td><td><input name='dividentaddress" + i + "' type='text' placeholder='Divident address...' class='dividentaddress form-control input-md'></td><td><input name='dividentincome" + i + "' type='text' placeholder='Income...' class='form-control input-md dividentincome'></td><td><a href='#' class='btn btn-warning add-row' style='background-color:#0093B2'><i class='glyphicon glyphicon-plus'></i></a><a href='#' class='btn btn-danger delete-row'><i class='glyphicon glyphicon-minus'></i></a></td></tr>";
$(html).insertAfter(tr);
}
});
}//]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<table class="table table-bordered table-hover" id="tab_logic1" style="width:800px;">
<thead>
<tr >
<th class="text-center">
Name
</th>
<th class="text-center">
Address
</th>
<th class="text-center">
Income
</th>
</tr>
</thead>
<tbody>
<tr id="addr1">
<td>
<asp:TextBox ID="sourcename0" style="width:250px;" placeholder="Source Name..." runat="server" class="form-control sourcename" required />
</td>
<td>
<asp:TextBox ID="sourceaddress0" style="width:250px;" placeholder="Source Address..." runat="server" CssClass="form-control sourceaddress" required />
</td>
<td>
<asp:TextBox ID="sourceincome0" style="width:250px;" runat="server" placeholder='Income...' CssClass="form-control sourceincome" required />
</td>
<td>
<a href="#" class="btn btn-warning add-row" style="background-color:#0093B2">
<i class="glyphicon glyphicon-plus"></i>
</a>
</td>
</tr>
</tbody>
</table><br /><br />
<table class="table table-bordered table-hover" id="tab_logic2" style="width:800px;">
<thead>
<tr >
<th class="text-center">
Name
</th>
<th class="text-center">
Address
</th>
<th class="text-center">
Income
</th>
</tr>
</thead>
<tbody>
<tr id="addr2">
<td>
<asp:TextBox ID="spousename0" style="width:250px;" placeholder="Spouse Name..." runat="server" class="form-control spousename" required />
</td>
<td>
<asp:TextBox ID="spouseaddress0" style="width:250px;" placeholder="Spouse Address..." runat="server" CssClass="form-control spouseaddress" required />
</td>
<td>
<asp:TextBox ID="spouseincome0" style="width:250px;" runat="server" placeholder='Income...' CssClass="form-control spouseincome" required />
</td>
<td>
<a href="#" class="btn btn-warning add-row" style="background-color:#0093B2">
<i class="glyphicon glyphicon-plus"></i>
</a>
</td>
</tr>
</tbody>
</table><br /><br />
<table class="table table-bordered table-hover" id="tab_logic3" style="width:800px;">
<thead>
<tr >
<th class="text-center">
Name
</th>
<th class="text-center">
Address
</th>
<th class="text-center">
Income
</th>
</tr>
</thead>
<tbody>
<tr id="addr3">
<td>
<asp:TextBox ID="dividentname0" style="width:250px;" placeholder="Divient Name..." runat="server" class="form-control dividentname" required />
</td>
<td>
<asp:TextBox ID="dividentaddress0" style="width:250px;" placeholder="Divient Address..." runat="server" CssClass="form-control dividentaddress" required />
</td>
<td>
<asp:TextBox ID="dividentincome0" style="width:250px;" runat="server" placeholder='Income...' CssClass="form-control dividentincome" required />
</td>
<td>
<a href="#" class="btn btn-warning add-row" style="background-color:#0093B2">
<i class="glyphicon glyphicon-plus"></i>
</a>
</td>
</tr>
</tbody>
</table>
<asp:Button id="btnCreate" Text="Submit Form" runat="server"/></span></div>
</form>
</body>
//code behind:
Protected Sub btnCreate_Click(sender As Object, e As EventArgs) Handles btnCreate.Click
End Sub
Thank you in advance
