php - 搜索结果页面具有相同字段 ID 名称时的 Ajax 函数

Question

我正在编写一个脚本，该脚本根据搜索结果从 SQL 表打印 HTML 表。如果特定字段的值不为 1，表格将打印一个按钮。因此，在不同的搜索结果中，表格上可能会打印各种按钮。当您按下按钮时，该字段的值应通过 AJAX 调用更新为 1。

这是打印表格的 PHP 代码:

echo "<title>Search Results</title>";
     if (!$query->rowCount() == 0) {
        echo '<table style=\"width:100%\"><tr>
            <th class="text-left">Name</th>
        <th class="text-left">Paper 1 Signed?</th>
        <th class="text-left">Paper 2 Signed?</th>
        <th class="text-left">Paper 3 Signed?</th>
            </tr><br>';
      while ($results = $query->fetch()) {
                      $ID         = $results['ID'];
                      $Name       = $results['Name'];
                      $paper1     = $results['paper1'];
                      $paper2     = $results['paper2'];
                      $paper3     = $results['paper3'];

            echo '<tr>', //print the first column
          '<td class="text-left">',$Name,'</td>'

   //print the 3 remaining columns, depending on their values in the SQL table. If 1, show text. If not 1, print a submit button.

          if ($question1 == '1') {echo "<td class=\"text-left\">Signed!</td>";}
          else {echo "<form id=\"update\" method=\"POST\" action=\"\" ><td class=\"text-left\">
          <input type=\"hidden\" id=\"field_update\" value=\"paper1\"/>
          <input type=\"hidden\" id=\"ID\" value=\"" . $ID . "\"/>
          <input type=\"submit\" id=\"submit\" onclick=\"saveData()\" value=\"Mark as Signed\"></form></td>" ;} // 

          if ($paper2 == '1') {echo "<td class=\"text-left\">Signed!</td>";}
          else {echo "<form id=\"update\" method=\"POST\" action=\"\" ><td class=\"text-left\">
          <input type=\"hidden\" id=\"field_update\" value=\"paper2\"/>
          <input type=\"hidden\" id=\"ID\" value=\"" . $ID . "\"/>
          <input type=\"submit\" id=\"submit\" onclick=\"saveData()\" value=\"Mark as Signed\"></form></td>" ;}

          if ($paper3 == '1') {echo "<td class=\"text-left\">Signed!</td>";}
          else {echo "<form id=\"update\" method=\"POST\" action=\"\" ><td class=\"text-left\">
          <input type=\"hidden\" id=\"field_update\" value=\"paper3\"/>
          <input type=\"hidden\" id=\"ID\" value=\"" . $ID . "\"/>
          <input type=\"submit\" id=\"submit\" onclick=\"saveData()\" value=\"Mark as Signed\"></form></td>" ;}

            echo "</tr>" ;
             ;   
   } 
   echo '</tbody></table></body></html>';  
    } else {
        echo 'Nothing found';
    }

请注意最后三个部分:这是我打印表格的最后 3 列的地方，显示纸 1、纸 2 和纸 3 是否已签名。如果是 (=1)，那么我会显示文本“已签名!”如果没有 (!=1)，那么我打印一个更新按钮。

更新(提交)按钮连接到用 JQuery/AJAX 编写的 saveData() onclick 函数。

<!-- function update -->
<script type="text/javascript">
    function saveData(){
        var field_update = document.getElementById("field_update").value; 
        var ID = document.getElementById("ID").value;
        var dataString = 'field_update=' + field_update + '&ID=' + ID;
        $.ajax({
          type: "POST",
          url: "update-ajax.php",
          data: dataString,
          cache: false,
          success:function( html ) {
           alert( html );

          }
         });
    }

我的问题如下:函数中的 var 值总是转到值的第一行......这是因为表中每个列元素的字段 ID 相同......所以函数总是使用第一组结果。

我可能会运行一个循环来为每一行和每个单元格打印不同的 javascript 函数……但那会非常低效。

我知道一定有更好的方法，但在这里挠头。任何帮助将不胜感激。

Answer 1

它采用第一行值的原因是因为您使用的 ID 不是唯一的。由于您使用的是 jquery，因此您可以这样做。

$('input[type=submit]').on('click',function() {

});

这会将此回调函数附加到页面中的所有提交按钮。现在要知道在回调函数中使用什么值，我建议您使用 jQuery 的 data() 函数和 data-* 属性。像这样。

      "<input type=\"submit\" id=\"submit\" onclick=\"saveData()\" value=\"Mark as Signed\" data-id=\". $ID. \"></form></td>" ;}

注意 data-id=$ID 位。现在您可以在回调函数中使用

访问此 id

$(this).data('id')

这将自动为您获取 data-id 属性的值。不需要唯一的 ID 也不需要跳来跳去!