Javascript 在ajax调用中传递计数器

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

我发现问题出在提交按钮上。每当我提交时，只有第一行输入值被传递到ajax中。令人惊讶的是，当我将输入包装在表单标记中，并通过将操作直接调用到表单中来按值包装时，它的工作方式就像champ一样。但是我想提交输入值而不刷新网页。因此，我有一个索引来跟踪表单，并在submitonlick（）函数中传递索引。但我不知道如何通过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++;
 }
 ?>

---

索引是不必要的。如果要从当前DIV中获取值，请将

this

作为参数传递给函数。然后可以使用jquerydom遍历函数来查找相关的输入

<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(),
    }
  );
}

提交
函数启动Ajax（元素）{
var div=$（元素）。最近的（“div”）；
美元邮政(
“inbetween.php/”{
id:$（“[name=id]”，div）.val（），
问题：$（“[name=optradio]：选中”，div）.val（），
问题1:$（“[name=optradio1]：选中”，div）.val（），
问题2:$（“[name=optradio2]：选中”，div）.val（），
}
);
}

---

顺便说一句，在循环中每次对单选按钮使用相同的名称意味着查询返回的所有行只有一组单选按钮——选中一行中的选项将取消选中其他所有行中相应的选项。您需要在每次迭代中为它们指定不同的名称。要使

launchAjax9）

函数正常工作，您还可以为它们提供类，并使用这些类代替

[name=optradio]

；在每次迭代中使用相同的类没有问题。

您仍然可以使用表单标记停留在同一页面上，您只需阻止提交人的默认操作谢谢@Barmar为我提供的帮助。

<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(),
    }
  );
}