How to save data from a row in ajax to the database? - ajax

Question

I have created a table which displays data from the databaseand have given the users the option to add rows to it. I have also added the necessary Ajax script so that whenever users click the button "add" a new row appears at the bottom of the table.
I am not able to find a way to save the data entered by the user in the newly added row to the database.
`<table border = "1" width = "50%" id="bill">
<tr>
<th>Item no</th>
<th>Product Code</th>
<th>Dates</th>
<th>Quantity</th>
<th>Amount</th>
<th>Net Amount</th>
<th>Tax</th>
<th>Choose option</th>
</tr>
<c:forEach var = "row" items = "${result.rows}">
<tr>
<td><c:out value = "${row.Item_no}"/></td>
<td><c:out value = "${row.Product_Code}"/></td>
<td><c:out value = "${row.Dates}"/></td>
<td><c:out value = "${row.Quantity}"/></td>
<td><c:out value = "${row.Amount}"/></td>
<td><c:out value="${row.Amount * row.Quantity}"/></td>
<td><input type="text" name="Tax" value=""></td>
<td><input type="text" name="gross" value=""></td>
</tr>
'
<input type="button" id="addrow" href="#" value="ADD">//the code to display the table with data from data base along with the add rows option
$(document).ready(function() {
var t = $('#bill');
var counter = $('#bill tr').size() + 1;
console.log(counter);
$('#addrow').on( 'click', function () {
t.append('<tr width="80%"><td><input type="text" name="Item_No" id="item" value = "" ></td><td><input type="text" name="Product_code" id="pc"></td>\n\
<td><input type="text" name="Date" id="date"></td><td><input type="text" name="Quantity" id="quantity"></td>\n\
<td><input type="text" name="Amount" id="amount"></td><td><input type="text" name="Net Amount" id="net"></td>\n\
<td><input type="text" name="Tax" id="tax"></td><td><input type="text" name="Gross" id="gross"></td>\n\
</tr>');
counter++;
} ); //The code which displays a new row at the bottom of the table when the users click add option . This is where the user enters his new data and I need to save it to the database.

Answer 1

Whenever you will click on addrow a new row will append in your table , so there are 2 way you can save value to database .They are as follow :
1). Whenever you append new row ,user will fill inputs to it and then you can create one submit btn in your row and i.e :
$('#addrow').on( 'click', function () {
t.append('<tr width="80%">
<form action="url" method="post">
<td><input type="text" name="Item_No" id="item" value = "" ></td>
<td><input type="text" name="Product_code" id="pc"></td>\n\
//your input field
<td><input type="submit" name="submit" value="add to db"><td>
</form>
</tr>');
counter++;
});
so,whenever you will click on submit btn data will go to urlprovided by you and then you can use ,request.getParameter("Product_code"); to get values and save values in database .
2) .You can use ajax ,whenever you append new row add a button also to it
$('#addrow').on( 'click', function () {
t.append('<tr width="80%">
<td><input type="text" name="Item_No" id="item" value = "" ></td>
<td><input type="text" name="Product_code" id="pc"></td>\n\
//your input field
<td><input type="button" name="submit" id="addtodb" value="add to db"><td>//add this button
</tr>');
counter++;
});
When user will click on btn you can get all values of input field and then pass to ajax and save them in database like below :
$('#addtodb').on( 'click', function () {
var pc=$("#pc").val();//getting value of input field
var quantity=$("#quantity").val();
$.ajax({
url:"yourclasspageurl",
method:"POST",
data:{ quantity:quantity,pc:pc} //passing data to specified url
success:function(data){
//do something
}
});
});
Get all , above values same using request.getParameter("quantity"); and save data to database.
Hope this help you .