循环多个表单答案

【问题标题】：Looping through multiple forms循环多个表单
【发布时间】：2014-01-19 02:10:02
【问题描述】：

我正在将 sql 数据提取到另一个用于站点的 php 表中。对于表中的每一行，我都有一个按钮来删除或编辑该特定行。编辑按钮工作正常，但删除按钮一直有问题。截至目前，删除按钮仅删除表的第一行，而不是已选择删除的行。

这是一个表格示例：

while($row = mysqli_fetch_array($result)){
  <tr>
    <td>'.($row['some_data']).'</td>
    <td>
      <form action="meeting_update_milestone.php" method="POST">
        <input type="hidden" name="mile_id" value="'.$row['id'].'" />
        <input type="submit" value="EDIT" />
      </form>
    </td>
    <td>
      <form id="meeting_delete_item">
        <input type="hidden" name="mile_id" value="'.$row['id'].'" />
        <input type="button" onclick="delete_meeting_item()" value="DELETE" />
      </form>
    </td>
  </tr>';
}

此数据正在发送到 ajax 调用：

function delete_meeting_item(){
  var x = confirm("Are you sure you want to permanetly delete this item?");
  if (x){
    $.ajax({
      type: "POST",
      url: "meeting_delete_item.php",
      data: $('#meeting_delete_item').serialize(),
      cache: false,
      success: function(result){
        alert(result);
      }
    })//end ajax
  }
  else{
    return false;
  }
}

您可以告诉我，我循环遍历创建具有相同 id 的多个表单的行。我认为这是在这里制造问题？如果是这样，我该如何通过保持相同的格式来修复它。我相信表单必须有一个唯一的名称，但我不确定如何将它实现到 ajax 数据字符串中。

【问题讨论】：

标签： php jquery mysql sql ajax

【解决方案1】：

我无法评论您的 php 代码的有效性，但正如您所说，id 值必须是唯一的。在这种情况下，我认为 ID 对您想要实现的目标并没有太大的影响。

删除id 和内联onclick 事件：

while($row = mysqli_fetch_array($result)){
  <tr>
    <td>'.($row['some_data']).'</td>
    <td>
      <form action="meeting_update_milestone.php" method="POST">
        <input type="hidden" name="mile_id" value="'.$row['id'].'" />
        <input type="submit" value="EDIT" />
      </form>
    </td>
    <td>
      <form>
        <input type="hidden" name="mile_id" value="'.$row['id'].'" />
        <input type="button" class="delete" value="DELETE" />
      </form>
    </td>
  </tr>';
}

并使用 jQuery 绑定它。我添加了一个类，以便能够为删除按钮获取选择器。

$(document).ready(function(){
    $('.delete').click(function(){

      var x = confirm("Are you sure you want to permanetly delete this item?");
      if (x){
        $.ajax({
          type: "POST",
          url: "meeting_delete_item.php",
          data: $(this).closest(form).serialize(),
          cache: false,
          success: function(result){
            alert(result);
          }
        })//end ajax
      }
      else{
        return false;
      }
    }
}

单击删除按钮后，我们会获取最近的表单并序列化该表单的数据。

【讨论】：

【解决方案2】：

你的问题来了

$('#meeting_delete_item').serialize()

您应该使用其他东西来确定当前行是。

用于删除的 HTML 表单部分

  <form id="meeting_delete_item">
    <input type="button" onclick="delete_meeting_item('.$row['id'].')" value="DELETE" />
  </form>

function delete_meeting_item(deleteId){
  var x = confirm("Are you sure you want to permanetly delete this item?");
  if (x){
    $.ajax({
      type: "POST",
      url: "meeting_delete_item.php",
      data: {mile_id: deleteId},
      cache: false,
      success: function(result){
        alert(result);
      }
    })//end ajax
  }
  else{
    return false;
  }
}

【讨论】：

【解决方案3】：

在循环之外，您可以保留一个计数器：$x = 0，并在生成表单时使用它：<form id="meeting_delete_item"'.$x.'>。在循环结束时，为下一次迭代增加计数器++$x。在您的 javascript 中，您可能会根据按下的按钮检索 id。

示例表格：

  <form id="myForm1">
    <button>Click me!</button>
  </form>
  <form id="myForm2">
    <button>Click me!</button>
  </form>

示例 JavaScript：

$('form button').click(function(e) {
  var $form = $(this).closest('form');
  console.log($form.attr('id'));
  return false; //stop form submission
});

Live demo (click).

此外，内联 js（如 html 中的 onclick）从来都不是好的做法。相反，请按照我的示例代码中的示例并将 click 函数与 javascript 绑定。有关此主题的更多信息，请阅读其中一些结果：https://www.google.com/search?q=Why+is+inline+js+bad%3F

【讨论】：