Submit form with AJAX inside table loop

Question

I have a table and inside this table I run a while loop with a form. I submit this form with Ajax.

For example:

The while loop gave 5 results, so I have 5 buttons with different hidden data. When I press the first button, I get the right data back from Ajax, but when I press the other buttons, I get no result back from Ajax.

I use a table because of the search function, so I want to keep it as a table.

(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>

Himanshu Upadhyay · Accepted Answer · 2019-08-20 05:35:45Z

2

You are using while loop to generate forms but you are using id attribute for the form tag that is wrong. As you said, if there are 5 forms, there will be 5 same id="jobForm" but id should be unique in a page. Use class instead. Check the changes I made in the following piece of code:

<?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);

edited Aug 20, 2019 at 5:35

answered Aug 20, 2019 at 5:20

Himanshu Upadhyay

6,5571 gold badge23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Rico Krouweel Over a year ago

An error on "this" in function jobDetails( this,e ){.

Himanshu Upadhyay Over a year ago

Oh, yes, there was a minor mistake. Try the function now.

Rico Krouweel Over a year ago

I had to change function jobDetails( $this,e ){ and var formData = $this.parents('form:first').serialize() too with '$this' instead of 'this'. I get response from ajax but the POST is empty...

Himanshu Upadhyay Over a year ago

You are saying that POST is empty, means the request parameter using POST is empty??

Rico Krouweel Over a year ago

Yes. The parameter POST is empty

|

Jaymin · Accepted Answer · 2019-08-20 05:48:03Z

1

You know the problem with your code is you cannot have multiple Id with same name. That's the basic rule. So to avoid that class name functionality exists.

This is your html I have made id unique of all the forms, so we can easily pick which needs to be submitted, I have also added Class to button and custom data attribute through which we can get current_id of the form. I am hoping that id is the unique record in all the rows.

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

You dont need parent and other fields, you can simply pass the current id of the form and take that particular form:

Now on Button click:

    $('.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();
    }

answered Aug 20, 2019 at 5:48

Jaymin

1,6612 gold badges20 silver badges42 bronze badges

4 Comments

Rico Krouweel Over a year ago

I dont have an unique id in my row. I changed it too $i and increase it by $i++, but my POST parameter is empty

Jaymin Over a year ago

Post paramter means?

Rico Krouweel Over a year ago

$_POST is empty. It should have all the hidden inputs inside it

Rico Krouweel Over a year ago

var formData = $("#jobForm_".unique_id).serialize() this wil give 'undentified' so I changed it with unique = var+var and var formData = $(unique).serialize()

Collectives™ on Stack Overflow

Submit form with AJAX inside table loop

2 Answers 2

8 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related