Несколько форм на странице, надо обработать одну ajax

Question

Чего то вроде просто, но и не просто. Знаний не хватает. На странице есть несколько одинаковых форм с разными id. есть один ajax, который форму обработает, и пошлет ответ вместо формы. Не получается их разделить по ID - все сразу выполняются :(

$(".send-review").click(function()
  {
        $.ajax(
            {
            url:  "action.php",
            type: "POST",
            data: { txt: $(".input-text").val(), id: $("#idd").val()},
            success: function (data)
                {
                $(".make-answer-form").html(data);
                }
            });
  
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form class="form-answer" id="1">
  <textarea rows="6" name="txt" maxlength="2500" class="input-text"></textarea>
  <input type="hidden" name="id" value="1" id="idd">
  <a href="javascript:void(0);" class="send-review">Отправить</a>
 </form>
<div class="make-answer-form"></div>

<form class="form-answer" id="2">
  <textarea rows="6" name="txt" maxlength="2500" class="input-text"></textarea>
  <input type="hidden" name="id" value="2" id="idd">
  <a href="javascript:void(0);" class="send-review">Отправить</a>
 </form>
 <div class="make-answer-form"></div>

<form class="form-answer" id="3">
  <textarea rows="6" name="txt" maxlength="2500" class="input-text"></textarea>
  <input type="hidden" name="id" value="3" id="idd">
  <a href="javascript:void(0);" class="send-review">Отправить</a>
 </form>
 <div class="make-answer-form"></div>

Код формы тоже можно править, понатыкал этих Id везде, чтоб уж наверняка :) Решение где то рядом, но блин, тупенький я еще...

Answer 1

Вам в цикле(в jquery это each) нужно пройтись по всем формам, и на кнопку в каждой форме повесить слушатель click вот немного исправлений код:

$(".form-answer").each(function(index, element) {
  $(element).find(".send-review").click(function(){
  console.log($(element).find(".input-text").val());
  console.log($(element).find("#idd").val());
    $.ajax(
        {
        url:  "action.php",
        type: "POST",
        data: { txt: $(element).find(".input-text").val(), id: $(element).find("#idd").val()},
        success: function (data)
            {
            $(element).next(".make-answer-form").html(data);
            }
        });
  
  });
})

Answer 2

Удалите одинаковый ID. На то он и ID, чтобы быть уникальным
Замените тег a на submit (input, button)
Нет необходимости в циклах. Просто на submit форм вешаете обработчик, и получаете нужные форму в `this

$(".form-answer").on('submit', function(e) {
  e.preventDefault();
  var $form = $(this); /* получаете текущю форму*/
  var data = {
    txt: $form.find("[name='txt']").val(), 
    id: $form.find("[name='id']").val(), 
  }
  console.log(data)       
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form class="form-answer" id="1">
    <textarea rows="6" name="txt" maxlength="2500" class="input-text"></textarea>
    <input type="hidden" name="id" value="1">
    <button type="submit" class="send-review">Отправить</button>
</form>
<div class="make-answer-form"></div>

<form class="form-answer" id="2">
    <textarea rows="6" name="txt" maxlength="2500" class="input-text"></textarea>
    <input type="hidden" name="id" value="2">
    <button type="submit" class="send-review">Отправить</button>
</form>
<div class="make-answer-form"></div>

<form class="form-answer" id="3">
    <textarea rows="6" name="txt" maxlength="2500" class="input-text"></textarea>
    <input type="hidden" name="id" value="3">
    <button type="submit" class="send-review">Отправить</button>
</form>
<div class="make-answer-form"></div>

БЛОГ НА HUSL

Несколько форм на странице, надо обработать одну ajax

Ответы (2 шт):