表单内部while循环只通过ajax发送第一行数据

Question

我在while循环中有一个表单，我想用它来使用ajax更新数据库。问题是当我使用ID时，无论我点击哪个按钮，都会发送表格的第一个数据或第一行数据。当我将ID更改为CLASSES时，控制台显示未定义。

使用类时控制台出错：

Object {credits：undefined，price：undefined，packId：undefined，type：“savePackage”}

HTML表格：

<div class="content">
        <div class="content table-responsive table-full-width">
          <table class="table table-hover table-striped">
            <tr>
              <th>Credits</th>
              <th>Price</th>
              <th>Action</th>
            </tr>
            <?php while($pack = $package->fetch()){ extract($pack); ?>
              <tr>
                <form method="post" action="">
                  <input type="hidden" value="<?php echo $cp_id; ?>" class="packId">
                  <td><input type="text" class="form-control" class="editCredits" value="<?php echo $cp_credits; ?>"></td>
                  <td><input type="text" class="form-control" class="editPrice" value="<?php echo $cp_price; ?>"></td>
                  <td>
                    <input type="submit" value="Save" class="btn btn-fill btn-info savePackage">
                    <input type="submit" value="Delete" class="btn btn-fill btn-danger deletePackage">
                  </td>
                </form>
              </tr>
            <?php } ?>
          </table>
        </div>
      </div>

AJAX代码

$(document).ready(function() {
  $(".savePackage").click(function() {
    var dataString = {
      credits: $(this).closest('form').find('.editCredits').val(),
      price: $(this).closest('form').find('.editPrice').val(),
      packId: $(this).closest('form').find('.packId').val(),
      type: 'savePackage'
    };
    console.log(dataString);
    var $submit = $(this).parent().find('.savePackage');
    $.confirm({
      title: 'Confirm!',
      content: 'Are you sure you want to add this package?',
      buttons: {
        confirm: function () {
          $.ajax({
            type: "POST",
            //dataType : "json",
            url: "ptc-settings-process.php",
            data: dataString,
            cache: true,
            beforeSend: function(){
              $submit.val("Please wait...");
            },
            success: function(html){
              $.alert(html);
              $submit.val("Save");
            }
          });
        },
        cancel: function(){}
      }
    });
    return false;
  });
});

我在这里使用过$(this).closest('form').find('.editCredits').val()方法，但同一页面上还有其他多种形式。因此，可能在$(this).closest('form')中使用表单元素可能会导致问题。

Answer 1

在你的$(".savePackage").click里面，找不到你用$(this).closest('form')寻找的形式。

我认为这是因为你在<tr>之后的表结构中有你的表单。

您可以做的是将表单移到<table>定义之前：

<form method="post" action="">
  <table class="table table-hover table-striped">

你的class="form-control" class="editCredits"中也有一个重复的类定义<input>。

您可以将其更新为class="form-control editCredits"

而不是使用多个表单，并找到表单，你可以找到最接近的<tr>，然后找到输入和类的<td>。

您的代码可能如下所示：

$(document).ready(function() {
  $(".savePackage").click(function() {
    var dataString = {
      credits: $(this).closest('tr').find('td input.editCredits').val(),
      price: $(this).closest('tr').find('td input.editPrice').val(),
      packId: $(this).closest('tr').find('.packId').val(),
      type: 'savePackage'
    };
    console.log(dataString);
    var $submit = $(this).parent().find('.savePackage');
    $.confirm({
      title: 'Confirm!',
      content: 'Are you sure you want to add this package?',
      buttons: {
        confirm: function() {
          $.ajax({
            type: "POST",
            //dataType : "json",
            url: "ptc-settings-process.php",
            data: dataString,
            cache: true,
            beforeSend: function() {
              $submit.val("Please wait...");
            },
            success: function(html) {
              $.alert(html);
              $submit.val("Save");
            }
          });
        },
        cancel: function() {}
      }
    });
    return false;
  });
});

<div class="content">
  <div class="content table-responsive table-full-width">
    <form method="post" action="">
      <table class="table table-hover table-striped">
        <tr>
          <th>Credits</th>
          <th>Price</th>
          <th>Action</th>
        </tr>
        <?php while($pack = $package->fetch()){ extract($pack); ?>
        <tr>
          <input type="hidden" value="<?php echo $cp_id; ?>" class="packId">
          <td><input type="text" class="form-control editCredits" value="<?php echo $cp_credits; ?>">
          </td>
          <td><input type="text" class="form-control editPrice" value="<?php echo $cp_price; ?>"></td>
          <td>
            <input type="submit" value="Save" class="btn btn-fill btn-info savePackage">
            <input type="submit" value="Delete" class="btn btn-fill btn-danger deletePackage">
          </td>
        </tr>
        <?php } ?>
      </table>
    </form>
  </div>
</div>