Как показать элемент в строке таблицы, если у меня есть несколько форм

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

эй, это может быть вашей проблемой, пожалуйста, не используйте один и тот же идентификатор для нескольких форм, потому что он уникален, если вы используете один и тот же, если для многих формы или 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>

использовать классы для переопределения кода идентификатор вопроса . Проверить приведенный ниже код.

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

Answer 2

В функции успеха вы можете выбрать элемент, который вызвал отправку формы.Я предполагаю, что есть кнопка отправки.поэтому код может быть чем-то вроде этого.

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

Кроме того, использование одного и того же идентификатора несколько раз на странице - неправильная идея.id является уникальным идентификатором, и поэтому на странице должен быть один и только один.