主页 / 问题 / 1334013
Accepted
hibinyru
Asked:2022-10-01 15:43:38 +0000 UTC2022-10-01 15:43:38 +0000 UTC

页面上的几个表单，一个ajax需要处理

  • 772

像简单的东西，但也不简单。知识是不够的。页面上有几个相同的表单具有不同的 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，只是为了确定:) 解决方案就在附近，但该死的，我还是很笨......

jquery

2 个回答

  1. Best Answer

    您需要循环遍历所有表单（在 jquery 中，这是每个表单）并在每个表单的按钮上挂一个侦听器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);
            }
        });
  
  });
})
    • 1
    1. 删除相同的ID. 这就是为什么他ID是独一无二的
    2. 将标签替换a为submit (input, button)
    3. 不需要循环。您只需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>

    • 1

相关问题