Как сохранить данные из строки в ajax в базу данных?

Question

Я создал таблицу, которая отображает данные из базы данных и дал пользователям возможность добавлять в нее строки.Я также добавил необходимый Ajax-скрипт, чтобы каждый раз, когда пользователь нажимал кнопку «Добавить», в нижней части таблицы появлялась новая строка.Я не могу найти способ сохранить данные, введенные пользователем в новой добавленной строке, в базу данных.

 `<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"> // код для отображения таблицы с данными из данныхбаза вместе с опцией добавления строк

$(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

Всякий раз, когда вы нажимаете addrow, в вашу таблицу добавляется новая строка, поэтому вы можете сохранить значение в базе данных двумя способами. Они следующие:

1) .Всякий раз, когда вы добавляете новую строку, пользователь заполняет входные данные в нее, а затем вы можете создать один submit btn в вашей строке и, например:

$('#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++;
});

, поэтому, когда вы нажмете submit btn, данные перейдут кurl предоставлено вами, а затем вы можете использовать, request.getParameter("Product_code");, чтобы получить значения и сохранить значения в базе данных.

---

2) . Вы можете использовать ajax, когда добавляете new row и добавляете к нему кнопку

$('#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++;
    });

Когда пользователь наберет click на btn, вы можете получить всезначения поля ввода, а затем pass to ajax и сохраните их в базе данных, как показано ниже:

$('#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
            }  
       });  

});

Получите все, указанные выше значения, используя request.getParameter("quantity"); и сохраните данные в базе данных.

Надеюсь, что этопомочь тебе .