Datatables Jquery can not submit the POST from table

Question

I'm using a datatables jquery as a table plugin to show the data list from mysql. its all fine, the script running well. But when iam try to submit the data form from each row, the page doesn't load anything.

This is my source page.

    <div id="product-grid" class="col-lg-6">
        <div class="txt-heading"><h3> Services </h3></div>
         <table class="table table-striped table-bordered table-hover " id="dataTables-example">
         <thead>
                <tr>
                    <th><strong>Name</strong></th>
                    <th><strong>Price</strong></th>
                    <th name="kategori"><strong>Kategori</strong></th>
                    <th><strong>Quantity</strong></th>
                    <th><strong>Action</strong></th>
                </tr>   
        </thead>
        <?php
        $product_array = runQuery("SELECT * FROM menu ORDER BY id ASC");
        if (!empty($product_array)) { 
            foreach($product_array as $key=>$value){
        ?>
        <form class="form-group" method="post" action="?action=add&code=<?php echo $product_array[$key]["code"]; ?>">
<tbody>
            <tr>
                <td><strong><?php echo $product_array[$key]["name"]; ?></strong></td>
                <td class="product-price"><?php echo $format->angka($product_array[$key]["price"]); ?></td>
                <td>    <?php echo $product_array[$key]["kategori"]; ?> </td>
                <td>    <input type="text" name="quantity" value="1" size="2" /> </td>
                <td> 
                    <input type="submit" value="Submit" class="btn btn-primary" />
                </td>
            </tr>
        </form>
        <?php }
        }?>
</tbody>
        </table>
    </div>

these code i load from admin.php through index.php page..

<link href="<?php echo ASSETS.'bootstrap/dataTables/dataTables.bootstrap.css';?>" rel="stylesheet">  
<script src="<?php echo ASSETS.'bootstrap/js/bootstrap.min.js';?>"></script> 
<script src="<?php echo ASSETS.'bootstrap/dataTables/jquery.dataTables.js';?>"></script> 
<script src="<?php echo ASSETS.'bootstrap/dataTables/dataTables.bootstrap.js';?>"></script>

What i want is, when the user click submit, the form is post to the action.php to handle a script.

Thankyou..

Answer 1

You can try the following code:

<form action="" method="POST">
  <table border="1">
    <tr>
      <td>
        <input type="text" name="usrname" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" name="email" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="password" name="password" />
      </td>
    </tr>
    <tr>
      <td colspan="3">
        <input type="submit" name="submit_btn" value="login">
      </td>
    </tr>
  </table>
</form>

Answer 2

Getting help form @nana answer, you can so do this

Form is invalid child of , but it is valid under

<tr>
<td> some field
<td> some other field
<td> **<form method="post">**somefield, some hidden field**</form>**
</td>

This way you have form element inside which is valid. You can include hidden element that you need and thus form can be submitted from inside jQuery DataTable.

Answer 3

A form is not allowed to be a child element of a table, tbody or tr.

You can have an entire table inside a form. You can have a form inside a table cell. You cannot have part of a table inside a form.

Use one form around the entire table. Then either use the clicked submit button to determine which row to process (to be quick) or process every row (allowing bulk updates).

Everything fine. Put your <form> & </form> outside table.

<table></table> should be inside <form></form>

For Example : (Correct Way)

<form method="POST">
    <table id="mytable">
        <tr>
          <td>
            <input name="s1" type="text" />
          </td>
          <td>
            <input name="s2" type="text" />
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="submit" name="submit" value="insert" />
          </td>
        </tr>
    </table>
</form>

And, This is wrong Approach.

<table id="mytable">
    <form method="POST">
        <tr>
            <td>
                 <input name="s1" type="text" />
            </td>
            <td>
                 <input name="s2" type="text" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                 <input type="submit" name="submit" value="insert" />
            </td>
        </tr>
    </form>
</table>

For more info, check Can't put PHP form in a table & Form doesn't accept all inputs rows in my form

Since OP Asked The way to do.

My opinion will be, use <table></table> for only displaying data. Because you can't use <form></form> inside <table></table>. Make One Column Action, where you pass value to other page with that row id. And, In that page (Other page as i wrote), Display data (if required) of that product including Quantity to submit. It's just a suggestion. Hope You Understand.

<div id="product-grid" class="col-lg-6">
    <div class="txt-heading"><h3> Services </h3></div>
        <table class="table table-striped table-bordered table-hover " id="dataTables-example">
            <thead>
                <tr>
                <th><strong>Name</strong></th>
                <th><strong>Price</strong></th>
                <th name="kategori"><strong>Kategori</strong></th>
                <th><strong>Action</strong></th>
                </tr>   
            </thead>
            <tbody>
            <?php
            $product_array = runQuery("SELECT * FROM menu ORDER BY id ASC");
            if (!empty($product_array)) { 
                foreach($product_array as $key=>$value) {
                ?>
                    <tr>
                        <td><strong><?php echo $product_array[$key]["name"]; ?></strong></td>
                        <td class="product-price"><?php echo $format->angka($product_array[$key]["price"]); ?></td>
                        <td><?php echo $product_array[$key]["kategori"]; ?> </td>
                        <td>
                            <a href="Edit-Somepage.php?id=<?php echo $product_array[$key]["id"]; ?>">Edit</a>
                        </td>
                    </tr>
                <?php }
            }?>
            </tbody>
        </table>
    </div>
</div>

Edit-Somepage.php

<?
$id=$_GET['id'];
$product_array = runQuery("SELECT * FROM menu WHERE id='$id'");
foreach($product_array as $key=>$value) {
    $product_name=$product_array[$key]["name"];
    $product_price=$format->angka($product_array[$key]["price"]);
}
?>
<form class="form-group" method="post" action="submit-SomePage.php">
    <?echo $product_name;?><br>
    <?echo $product_price;?><br>
    <input type='hidden' value="<?echo $id;?>" name='ProductId'>
    <input type="text" name="quantity" value="1" size="2" /> <br>
    <input type="submit" value="Submit" class="btn btn-primary" />
</form>

submit-SomePage.php

<?
$product_id=$_POST['ProductId'];

using this $product_id save/update/submit product.
//Update Query.
?>