<script type="text/javascript">
$(document).ready(function () {
$(document).on("click", ".classAdd", function () {
var rowCount = $('.data-contact-person').length + 1;
var contactdiv = '<tr class="data-contact-person">' +
'<td><input type="text" name="f-name' + rowCount + '" class="form-control f-name01" /></td>' +
'<td><input type="text" name="l-name' + rowCount + '" class="form-control l-name01" /></td>' +
'<td><input type="text" name="email' + rowCount + '" class="form-control email01" /></td>' +
'<td><input type="text" name="stock' + rowCount + '" class="form-control stock01" /></td>' +
'<td><input type="text" name="qty' + rowCount + '" class="form-control qty01" /></td>' +
'<td><input type="text" name="rate' + rowCount + '" class="form-control rate01" /></td>' +
'<td><input type="text" name="total' + rowCount + '" class="form-control total01" /></td>' +
'<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable').append(contactdiv);
});
$(document).on("click", ".deleteContact", function () {
$(this).closest("tr").remove();
});
function getAllEmpData() {
var data = [];
$('tr.data-contact-person').each(function () {
var firstName = $(this).find('.f-name01').val();
var lastName = $(this).find('.l-name01').val();
var emailId = $(this).find('.email01').val();
var Stock = $(this).find('.stock01').val();
var qty = $(this).find('.qty01').val();
var rate = $(this).find('.rate01').val();
var totalamount = $(this).find('.total01').val();
var alldata = {
'FName': firstName,
'LName': lastName,
'EmailId': emailId,
'STOCK': Stock,
'QUANTITY': qty,
'RATE': rate,
'TOTAL': totalamount
}
data.push(alldata);
});
console.log(data);
return data;
}
$("#btnSubmit").click(function () {
var data = JSON.stringify(getAllEmpData());
$.ajax({
url: 'Home.aspx/SaveData',
type: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ 'empdata': data }),
success: function () {
alert("Data Added Successfully");
},
error: function () {
alert("Error while inserting data");
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
var getAllEmp;
$( document ).ready(function() {
getAllEmp = function () {
console.log(" getAllEmp");
var data = [];
$('tr.data-contact-person').each(function () {
var firstName = $(this).find('.Name').val();
var Con = $(this).find('.Contact').val();
var emailId = $(this).find('.Email').val();
var Sal = $(this).find('.Salary').val();
var Deg = $(this).find('.Designation').val();
var alldata = {
'FName': firstName,
'Contact': Con,
'EmailId': emailId,
'Salary': Sal,
'Degnation': Deg
}
data.push(alldata);
});
console.log(data);
return data;
}
$("#btnSubmit").click(function () {
var data = JSON.stringify(getAllEmp());
$.ajax({
url: 'Home.aspx/UpdateStaff',
type: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ 'Supempdata': data }),
success: function () {
alert("Data Added Successfully");
},
error: function () {
alert("Error while inserting data");
}
});
});
});
});
</script>
What I have tried:
<asp:Button ID="getAllEmpData" OnClientClick="getAllEmp();return false;" runat="server" Text="sb" Width="61px" />