Question

我有一个表，并且在此表中，我使用窗体运行while循环。我通过Ajax提交了此表单。

例如：

while循环给出5个结果，所以我有5个按钮具有不同的隐藏数据。当我按下第一个按钮时，我从Ajax获得了正确的数据，但是当我按下其他按钮时，我却没有从Ajax获得任何结果。

由于搜索功能，我使用表格，所以我想将其保留为表格。

(function($) {
  function jobDetails(e) {
    var formData = $('#jobForm').serialize() //serialize data from form
    $.ajax({
      url: 'jobdetails.php',
      dataType: 'json',
      type: 'post',
      data: formData,
      success: function(data, textStatus) {
        // success
      }
    });
    e.preventDefault();
  }
  $('#jobForm').click(jobDetails);
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class="pull-right">
    <input type="text" class="search" placeholder="Wat zoekt u?" onkeydown="onkeypressed(event, this);">
  </div>

  <span class="counter pull-right"></span>

  <table width="100%" class="table table-striped table-bordered table-hover table-bordered results" id="searchTable">
    <thead>
      <tr class="warning no-result">
        <td colspan="4"><i class="fa fa-warning"></i> No result</td>
      </tr>
    </thead>
    <tbody>
      <?php
            if(isset($_GET['search'])){
            $resource_id = ($_GET['machine']);
                $jobs = "SELECT * FROM ";
                $stmt = $pdo->prepare($jobs);
                $stmt->execute();
                while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
                    ?>
        <tr>
          <td>
            <form id="jobForm" method="post">
              <input type="hidden" name="machine" value="<?php echo $resource_id; ?>">
              <input type="hidden" name="base" value="<?php echo $row[" WORKORDER_BASE_ID "]; ?>">
              <input type="hidden" name="lot" value="<?php echo $row[" WORKORDER_LOT_ID "]; ?>">
              <input type="hidden" name="split" value="<?php echo $row[" WORKORDER_SPLIT_ID "]; ?>">
              <input type="hidden" name="sub" value="<?php echo $row[" WORKORDER_SUB_ID "]; ?>">
              <input type="hidden" name="seq" value="<?php echo $row[" SEQUENCE_NO "]; ?>">
              <input type="hidden" name="part" value="<?php echo $row[" PART_ID "]; ?>">
              <button id="jobdetails" type="button" class="btn btn-default col-lg-12">                
                                    <?php echo $row["WORKORDER_BASE_ID"]."/".$row["WORKORDER_LOT_ID"].".".$row["WORKORDER_SPLIT_ID"]."-".$row["WORKORDER_SUB_ID"].":".$row["SEQUENCE_NO"];?>         
                                </button>
            </form>
          </td>
        </tr>
        <?php
                }
            }
            ?>
    </tbody>
  </table>
</body>

Answer 1

您正在使用while循环生成表单，但是您正在为错误的表单标记使用id属性。如您所说，如果有5种形式，则将有5种相同的id="jobForm"，但是id在页面中应该是唯一的。使用类代替。检查我在以下代码段中所做的更改：

<?php
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
                    ?> 
                    <tr>
                        <td> 
                            <form id="jobForm" class="jobForm" method="post"> // added class attribute with form tag.                           
                                <input type="hidden" name="machine" value="<?php echo $resource_id; ?>">
                                <input type="hidden" name="base" value="<?php echo $row["WORKORDER_BASE_ID"]; ?>">
                                <input type="hidden" name="lot" value="<?php echo $row["WORKORDER_LOT_ID"]; ?>">
                                <input type="hidden" name="split" value="<?php echo $row["WORKORDER_SPLIT_ID"]; ?>">
                                <input type="hidden" name="sub" value="<?php echo $row["WORKORDER_SUB_ID"]; ?>">
                                <input type="hidden" name="seq" value="<?php echo $row["SEQUENCE_NO"]; ?>">
                                <input type="hidden" name="part" value="<?php echo $row["PART_ID"]; ?>">
                                <button id="jobdetails" class="jobdetails" type="button" class="btn btn-default col-lg-12">                
                                    <?php echo $row["WORKORDER_BASE_ID"]."/".$row["WORKORDER_LOT_ID"].".".$row["WORKORDER_SPLIT_ID"]."-".$row["WORKORDER_SUB_ID"].":".$row["SEQUENCE_NO"];?>         
                                </button> 
                            </form>                        
                        </td>
                    </tr>   
                <?php
                }



(function($){
        function jobDetails( this,e ){
            var formData = this.parents('form:first').serialize() //// Changed from direct #id to this object so it always refers to the clicked button.
            $.ajax({
                url: 'jobdetails.php',
                dataType: 'json',
                type: 'post',
                data: formData,
                success: function( data, textStatus ){
                    // success
                }
            });
            e.preventDefault();
        }
        $('.jobForm').click( function(){    // Changed from id (#) to class (.)
            $this = $(this);
            jobDetails($this, event);
        });
    })(jQuery);

Answer 2

您知道代码的问题是，不能有多个具有相同名称的ID。这是基本规则。因此，要避免存在类名功能。

这是您的html，我已使所有表单的ID唯一，因此我们可以轻松选择需要提交的ID，我还向按钮和自定义数据属性添加了类，通过它们我们可以获取表单的current_id。我希望id是所有行中的唯一记录。

<?php
            if(isset($_GET['search'])){
            $resource_id = ($_GET['machine']);
                $jobs = "SELECT * FROM ";
                $stmt = $pdo->prepare($jobs);
                $stmt->execute();
                while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
                    ?> 
                    <tr>
                        <td> 
                            <form id="jobForm_<?php echo $row['id']; ?>" method="post">                           
                                <input type="hidden" name="machine" value="<?php echo $resource_id; ?>">
                                <input type="hidden" name="base" value="<?php echo $row["WORKORDER_BASE_ID"]; ?>">
                                <input type="hidden" name="lot" value="<?php echo $row["WORKORDER_LOT_ID"]; ?>">
                                <input type="hidden" name="split" value="<?php echo $row["WORKORDER_SPLIT_ID"]; ?>">
                                <input type="hidden" name="sub" value="<?php echo $row["WORKORDER_SUB_ID"]; ?>">
                                <input type="hidden" name="seq" value="<?php echo $row["SEQUENCE_NO"]; ?>">
                                <input type="hidden" name="part" value="<?php echo $row["PART_ID"]; ?>">
                                <button id="jobdetails" class="buttonsubmit" data-id="<?php echo $row['id']; ?>" type="button" class="btn btn-default col-lg-12">                
                                    <?php echo $row["WORKORDER_BASE_ID"]."/".$row["WORKORDER_LOT_ID"].".".$row["WORKORDER_SPLIT_ID"]."-".$row["WORKORDER_SUB_ID"].":".$row["SEQUENCE_NO"];?>         
                                </button> 
                            </form>                        
                        </td>
                    </tr>   
                <?php
                }
            }
            ?>

您不需要父字段和其他字段，您只需传递表单的当前ID并采用该特定表单即可：

现在单击按钮：

    $('.buttonsubmit').click( function(){    
        var unique_form_id = $(this).data('id');
        jobDetails(unique_form_id);
    });

    function jobDetails(unique_id){
        var formData = $("#jobForm_".unique_id).serialize() //// Changed from direct #id to this object so it always refers to the clicked button.
        $.ajax({
            url: 'jobdetails.php',
            dataType: 'json',
            type: 'post',
            data: formData,
            success: function( data, textStatus ){
                // success
            }
        });
        e.preventDefault();
    }

在表格循环内使用AJAX提交表单

2 个答案: