通过ajax传递唯一的输入值无效

I have been looking for the answer from the past 2 weeks now.My Problem is I have a PHP foreach loop, In my foreach loop I am having div tags as a row of each data fetched from the database. Each div rows has HTML input elements and a button to submit those input values to a DB through an ajax request. The problem starts when I submit the input values of any div row, only the first row values get changes

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

Now, to debug the problem I an checking whether my input elements of each div row is having the unique id or not. It turns out that my input elements have a unique id.

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

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

At last, when I console.log() before the ajax call, It turns out that no matter which submits button I clicked only the first div row id is passing through the ajax request.

最后，在ajax调用之前，当我console.log()时，发现无论我单击哪个提交按钮，只有第一个div行id通过ajax请求。

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

To fix this I changes my code by removing the submit input to a button and passing setting onclick() on button to call the ajax request.

为了解决这个问题，我修改了代码，将提交输入删除到一个按钮，并在按钮上传递设置onclick()来调用ajax请求。

Now when I click on the button to call the ajax function nothing happens, and I get the error in console window of saying launchAjax(() not defined.

现在，当我单击按钮来调用ajax函数时，什么也没有发生，我在控制台窗口中得到一个错误，说launchAjax()没有定义。

My full code:

我的完整代码:

 <?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>
}
?>

My full ajax code:

我的完整的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(),
  }
);
}
 });

All I am trying to achieve is to save the value of the clicked div row input elements without refreshing the web page.

我所要做的就是保存已单击的div行输入元素的值，而不刷新web页面。

Please help me I am trying to do this from the past 2 week now.

请帮我从过去的两周开始我一直在努力做这件事。

Thank you in Advance

提前谢谢你

1 个解决方案

#1

You are calling the onclick as

您正在调用onclick as

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

<按钮onclick = " launchajax()" class=" btn "> < /按钮>提交

When we call the function as above way, they should be defined globally. When we declare any function inside the document ready the scope is not global.

当我们像上面那样调用函数时，它们应该被全局定义。当我们声明文档中的任何函数时，范围都不是全局的。

To make them global remove $(document).ready

要使它们全局化，请删除$(文档).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(),
      }
    );
  }

EDIT: If you want to get it working in document ready, you need to call click even as below

编辑:如果您想让它在文档中工作，您需要调用click，甚至如下所示

Add an id to the button as bellow

向按钮添加一个id为bellow

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

<按钮onclick = " launchajax()" class=" btn " id=" submitBtn "> < /按钮>提交

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

EDIT 2: I tried debugging your code and found you are not using serialize() method to get all the form data. I have updated the code as below

编辑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>

See if the function is calling now. Hope this helps.

看看函数是否正在调用。希望这个有帮助。

#1