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

Question

我有一个包含多行的表，并且在每一行中我都有一个 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>

AJAX：

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

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

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

Answer 1

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

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

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

Answer 2

嘿，这可能是您的问题，请不要对多个表单使用相同的 id，因为它是唯一的，如果您对多个表单或 div 使用相同的，那么只有第一个 div 或表单可以工作。请参考下面的示例，它将为您解释

$('#click').click(function() {
				//select all radio is now checked
        $('#event444').prop('checked', true);
        $('#reset').prop('checked', false);
});

$('#reset').click(function() {
//reset radio is now checked
				$('#click').prop('checked', false);
        $('#event444').prop('checked', false);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a">
  please select any of the radio button
  <input  type="radio" id="click" value="energyRating">select all
  <input  type="radio" id="reset" value="energyRating">reset all
</div>

<div id="b">
  <input  type="checkbox" id="event444"  value="Bike1">I have a bike<br>
  <input  type="checkbox" id="event444" value="Car">I have a car <br>
<input  type="checkbox" id="event444" value="Bike">I have another bike<br>
  <input  type="checkbox" id="event444" value="Car">I have another car
</div>

使用类来覆盖代码id问题。检查下面的代码。

    $('.click').click(function() {
    				//select all radio is now checked
            $('.event444').prop('checked', true);
            $('.reset').prop('checked', false);
    });

    $('.reset').click(function() {
    //reset radio is now checked
    				$('.click').prop('checked', false);
            $('.event444').prop('checked', false);
    });

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="a">
      please select any of the radio button
      <input  type="radio" class="click" value="energyRating">select all
      <input  type="radio" class="reset" value="energyRating">reset all
    </div>

    <div id="b">
      <input  type="checkbox" class="event444"  value="Bike1">I have a bike<br>
      <input  type="checkbox" class="event444" value="Car">I have a car <br>
    <input  type="checkbox" class="event444" value="Bike">I have another bike<br>
      <input  type="checkbox" class="event444" value="Car">I have another car
    </div>