Question

我一直在寻找过去2周的答案。我的问题是我有一个PHP foreach循环，在我的foreach循环中，我有div标签作为从数据库中提取的每个数据的一行。每个div行都有HTML输入元素和一个按钮，用于通过ajax请求将这些输入值提交给DB。当我提交任何div行的输入值时，问题开始，只有第一行值得到更改

现在，为了调试问题，我检查每个div行的输入元素是否具有唯一ID。事实证明我的输入元素具有唯一的ID。

<input type="text" name="id" value='.$id.'>

最后，当我在ajax调用之前调用console.log（）时，事实证明无论我点击哪个按钮，我只点击了第一个div行id通过ajax请求。

 function launchAjax() {
 console.log($("[name=id]").val());       // debug to check the value of id
 $.post(
 "inbetween.php/",
 {

要解决此问题，我通过删除按钮的提交输入并在按钮上传递onclick（）设置以调用ajax请求来更改我的代码。

现在，当我点击按钮调用ajax函数时，没有任何反应，我在控制台窗口中收到说startAjax（（）未定义的错误。

我的完整代码：

 <?php
$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()" class="btn">SUBMIT</button>
</div>
}
?>

我的完整ajax代码：

 $(document).ready(function(){

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

我想要实现的只是保存点击的div行输入元素的值而不刷新网页。

请帮助我，我现在试图在过去2周内完成这项工作。

先谢谢你

Answer 1

您正在将onclick称为

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

当我们按上述方式调用函数时，应该全局定义它们。当我们在document ready内声明任何函数时，范围不是全局的。

要将它们全局删除$(document).ready

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

编辑：如果您想让它在文档准备就绪，您需要调用click，如下所示

如下所示在按钮中添加ID

<button onclick="launchAjax()" class="btn" id="submitBtn">SUBMIT</button>

  $(document).ready(function() {
      $("submitBtn").on('click', function(){
          //Do Your Ajax here
      })
  })

编辑2：我尝试调试您的代码，发现您没有使用serialize()方法来获取所有表单数据。我已经更新了以下代码

$(document).ready(function(e) {
  //Call submit of the form
  $("#myForm").submit(function(e) {

    e.preventDefault();
    //HERE YOU HAVE ALL YOUR FORM DATA using serialize() method
    var form_data = $(this).serialize();
    console.log(form_data);
    // Send this form_data wit your ajax post request
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- added FORM here-->
<form method="post" action="/echo/html/" ajax="true" id="myForm">
  <div>
    <input type="hidden" name="id" value="10"><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>
    <!-- Reomved you function call on click -->
    <button class="btn" type="submit">SUBMIT</button>
  </div>

</form>

查看该功能是否正在调用。希望这会有所帮助。

通过ajax传递唯一的输入值不起作用

1 个答案: