javascript - 在ajax调用中传递计数器

Question

我的每个循环都有一个 PHP。在 foreach 循环内，我有 HTML 输入元素。这些输入值通过 ajax 进行处理，然后存储在数据库中。问题是无论我提交哪种表格。仅提交第一个表单。

我发现问题出在提交按钮上。每当我提交时，仅第一行输入值被传递到 ajax 中。令人惊讶的是，当我将输入包装在表单标签中并通过将操作直接调用到表单中来按值包装时，它的工作方式就像冠军一样。但我想提交输入值而不刷新网页。因此，我有一个索引来跟踪表单并在 Submit onlick() 函数中传递索引。但不知道如何通过ajax处理该索引以提交正确的值。

<?php
$index = 0;

$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach ($data as $row) { 
<div>
    <input type="hidden" name="id" value="<?php echo $row['no'] ?>"><br>
    <fieldset>
        <div>
            <label>XYZ Question</label>
        </div>
        <div>
            <input type="radio" name="optradio" value="NO">NO
            <input type="radio" name="optradio" value="YES">YES
        </div>
    </fieldset>
    <fieldset>
        <div>
            <label>XYZ Question</label>
        </div>
        <div>
            <input type="radio" name="optradio1" value="NO">NO
            <input type="radio" name="optradio1" value="YES">YES
        </div>
    </fieldset>
    <fieldset>
        <div>
            <label>XYZ Question</label>
        </div>
        <div>
            <input type="radio" name="optradio2" value="NO">NO
            <input type="radio" name="optradio2" value="YES">YES
        </div>
    </fieldset>
    <button onclick="launchAjax('.$index.')" class="btn">SUBMIT</button>
</div>
$index++;
 }
 ?>

我的ajax代码:

 function launchAjax(index){ 
 $.post(
 "inbetween.php/",
  {
      id: $("[name=id]").val(),
      question: $("[name=optradio]:checked").val(),
      question1: $("[name=optradio1]:checked").val(),
      question2: $("[name=optradio2]:checked").val(),
  }
);
}
 }); 

Answer 1

索引是不必要的。如果您想从当前 DIV 获取值，请将 this 作为参数传递给函数。然后您可以使用 jQuery DOM 遍历函数来查找相关的输入。

<button type="button" onclick="launchAjax(this)" class="btn">SUBMIT</button>


function launchAjax(element) {
  var div = $(element).closest("div");
  $.post(
    "inbetween.php/", {
      id: $("[name=id]", div).val(),
      question: $("[name=optradio]:checked", div).val(),
      question1: $("[name=optradio1]:checked", div).val(),
      question2: $("[name=optradio2]:checked", div).val(),
    }
  );
}

顺便说一句，每次循环时对单选按钮使用相同的名称意味着查询返回的所有行只会有一组单选按钮 - 选中一行中的选项将取消选中相应的选项在所有其他行中。您需要在每次迭代中为它们指定不同的名称。为了使 launchAjax9) 函数正常工作，您还可以为它们提供类，并使用它来代替 [name=optradio]；在每次迭代中使用相同的类没有问题。