Question

我有一个包含多个表行的动态表单页面，用户通过选中要更新的行的复选框来更新状态。单击更新按钮时，我打开一个jquery模式窗口，供用户从下拉列表中选择状态并输入注释。我能够通过AJAX将模态窗口数据传递给我的servlet，但我不知道如何获取复选框值。

如何将父表单中的复选框值和模态窗口中的其他数据传递给我的Java servlet，以便更新相应的数据库记录？我想使用AJAX，因此父表单不会为用户重新加载。

提前致谢！

模态窗口和AJAX更新：

$(function() {
    $("#dialog-form").dialog({
        autoOpen: false,
        height: 'auto',
        width: 'auto',
        modal: true,
        buttons: {
            "Update Status": function() {
                dataString = $("#statusForm").serialize();

                $.ajax({
                    type: 'POST',
                    url: 'updateStatus',
                    data: dataString,
                    dataType: 'json',
                    success: function(data) {alert(data);}
                });
                $(this).dialog("close");
            },
            Cancel: function() {$(this).dialog("close");}
        },
        close: function() {$(this).dialog("close");}
    });
    $("#update-status")
            .button()
            .click(function() {
        $("#dialog-form").dialog("open");
    });
});

修改

正如您所看到的，在背景中检查了4个项目，顶部的模态窗口要求提供更多信息。所选项目需要使用模态窗口中的信息进行更新。每个复选框都有自己的唯一值，对应于数据库表中的记录ID。

enter image description here

编辑2：

父表单 - HTML代码段：

<form name="OptionList">
<table id="statusTable">
    <thead>
        <tr>
            <th>Option</th>
            <th>Type</th>
            <th>Timestamp</th>
            <th>Entry Type</th>
            <th>User Profile</th>
        </tr>
    </thead>
    <tr>
        <td><input type="checkbox" value="19"></td>
        <td>DO</td>
        <td>5/14/13 4:31 PM</td>
        <td>A</td>
        <td>user profile</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="61" ></td>
        <td>DO</td>
        <td>5/14/13 4:50 PM</td>
        <td>A</td>
        <td>user profile</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="37"></td>
        <td>DO</td>
        <td>5/14/13 5:03 PM</td>
        <td>A</td>
        <td>user profile</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="157"></td>
        <td>DO</td>
        <td>5/14/13 5:04 PM</td>
        <td>A</td>
        <td>user profile</td>
    </tr>
</table>

Answer 1

您目前正在做的事情是将整个表单整理并传递给您的模式：

dataString = $("#statusForm").serialize();

相反，您需要做的只是传递您感兴趣的行的数据。为此，您可以为每一行分配数字ID并解析具有该父ID的复选框的数据。

请参阅此解决方案：passing cell value inorder to update table using ajax post

使用AJAX将父表单和模态窗口数据传递给服务器

1 个答案: