时间戳

首页 > 解决方案 > 如果我有多个表单，如何在表格行中显示元素

javascript - 如果我有多个表单，如何在表格行中显示元素

问题描述

我有一个包含多行的表，并且在每一行中我都有一个 id="saveComment" 的表单。（目标：对于我要添加评论的每一行）

我使用 AJAX 保存数据。当我添加评论时，我成功地将数据保存在数据库中，以便根据需要在表中添加单个评论。但我还想在当前提交的表单所在的行中添加一个图像元素或显示隐藏的图像或一些文本！（添加了评论 - 显示显示该行有评论的图像或成功文本）。理想情况下，当评论变空时隐藏图像/文本

HTML：

<table>
    <tr>
        <td id="success"><span id="successmessage" style="display:none;">OK</span></td>
        <td>
            <form method="post" id="saveComment">
                <!-- some form data and submit button -->
            </form>
        </td>
    </tr>
</table>

阿贾克斯：

<script>
    var frm = $("#saveComment");
        frm.submit(function (e) {
            e.preventDefault();
            $.ajax({
                type: frm.attr('method'),
                contentType: "application/json",
                crossDomain: true,
                async: true,
                url: 'test.cgi',
                data: $(this).serialize(),
                success: function (data) {
                    alert('Saved!');
                    $("#successmessage").show();
                    console.log('Submission was successful.');
                    console.log(data);
                },
                error: function (data) {
                    alert('Error!');
                    console.log('An error occurred.');
                    console.log(data);
                },
            });
        });
</script>

如果我在成功函数 $("#successmessage").show(); 中添加 ajax 代码 我只在页面的第一个表单中显示消息，而不是当前提交的表单

如何仅在提交表单的地方显示/添加所需条目的图像或文本？

标签： javascriptjqueryhtmlajax

解决方案

在success函数中，可以定位触发表单提交的元素。我假设有一个提交按钮。所以代码可以是这样的。

$(e.target).parents('tr').find('#successimageid').show();

此外，在一个页面中多次使用相同的 id 是一个错误的想法。id 是唯一标识符，因此页面中应该只有一个。

推荐阅读