如何使用表中表单元素的值更新某些数据库记录

时间:2013-02-22 19:11:19

标签: jquery ajax html-table

我使用下面的代码段生成一些表单输入。

<tr id='$ticket->id' class='ticket-row'>
    <td>$ticket->ticket_no</td>
    <td><input type='text' name='c_name[]' /></td>
    <td><input type='text' name='next_of_kin[]' /></td>
    <td><input type='text' name='address[]' value='$ticket->address' /></td>
    <td><input type='text' name='seat_no[]' /></td>
    <td><input type='text' name='fare[]' value='$ticket->fare' /></td>
</tr> 

某些表单元素包含数据库的输入值。每个tr标记都包含该行的记录id。 我的挑战是如何最好地在记录的id旁边连续检索表单值,并在编辑值后更新单个记录(可能使用循环)。

我尝试使用ajax,但我被困在某个地方。以下是我尝试过的代码段的一部分:

var tickets = $('.ticket-row');
    $.each(tickets, function(i, val) {
        // Retrieve the form elements in this row and send to the server
    });
});

1 个答案:

答案 0 :(得分:2)

更新完整表格:

编辑:JSON-js添加到您的网页

<强> HTML

<table>
    <tr id='$ticket->id' class='ticket-row'>
        <td><span id="no">$ticket->ticket_no</span></td>
        <td><input type='text' id='c_name' /></td>
        <td><input type='text' id='next_of_kin' /></td>
        <td><input type='text' id='address' value='$ticket->address' /></td>
        <td><input type='text' id='seat_no' /></td>
        <td><input type='text' id='fare' value='$ticket->fare' /></td>
    </tr>
</table>

<强> JS

var tickets = [];

$('.ticket-row').each(function() {
    tickets.push({ id : $(this).attr('id'),
                  no : $(this).find('#no').text(),
                  c_name : $(this).find('#c_name').val(),
                  next_of_kin: $(this).find('#next_of_kin').val(),
                  address : $(this).find('#address').val(),
                  seat_no : $(this).find('#seat_no').val(),
                  fare : $(this).find('#fare').val() });
});

$.ajax({
    type : 'POST',
    url : '**URL_HERE**',
    data : JSON.stringify(tickets),
    dataType : 'json'
})
.success(function() {
    // TODO
})
.fail(function() {
    // TODO
});