Question

How can i get the content of the selected rows in any table and submit their values in a post array using JQuery ?

Here’s my table :

            <?php if(isset($products)){ ?>
            <?php foreach( $products as $product){ ?>
                <tr id="<?php echo $product['order_product_id']; ?>">
                    <td class="center"><input checked="checked" type="checkbox" name="selected-p[]" value="<?php echo $product['order_product_id']; ?>" /></td>
                    <td class="left"><input type="text" name="order_id" value="<?php echo $product['order_id']; ?>"/></td>
                    <td class="left"><input type="text" name="product_id" value="<?php echo $product['product_id']; ?>"/></td>
                    <td class="left"><input type="text" name="name" value="<?php echo $product['name']; ?>"/></td>
                    <td class="left"><input type="text" name="price" value="<?php echo $product['price']; ?>"/></td>

                    <td class="left"><input type="text" name="cost" value="<?php echo $product['cost']; ?>"/></td>
                    <td class="left"><input type="text" name="product_cost" value="<?php echo $product['product_cost']; ?>"/></td>
                    <td class="left"><input type="text" name="logistics_cost" value="<?php echo $product['logistics_cost']; ?>"/></td>
                    <td class="left"><input type="text" name="inventory_cost" value="<?php echo $product['inventory_cost']; ?>"/></td>

                    <td class="left"><font  dir="ltr"><?php echo $product['date_added']; ?></font></td>
                </tr>
            <?php } ?>
        <?php } ?>

Rendered HTML by question’s author:

<tr id="39118"><td class="center"><input type="checkbox" name="selected-p[]" value="39118"></td> <td class="left"><input type="text" name="order_id" value="10141"></td> <td class="left"><input type="text" name="product_id" value="881"></td> <td class="left"><input type="text" name="name" value="أساور الصداقة"></td> <td class="left"><input type="text" name="price" value="30.0000"></td> <td class="left"><input type="text" name="cost" value="9.0000"></td> <td class="left"><input type="text" name="product_cost" value="9.00"></td> </tr>

Answer 1

Try this…

var data = [];

$("#table1 tr").filter(function() {
    return $("td:eq(0) input[type=checkbox]", this).attr("checked");
}).each(function() {
    data.push({
        order_id: $("input[name=order_id]", this).val(),
        product_id: $("input[name=product_id]", this).val(),
        name: $("input[name=name]", this).val(),
        price: $("input[name=price]", this).val(),
        cost: $("input[name=cost]", this).val(),
        product_cost: $("input[name=product_cost]", this).val(),
        logistics_cost: $("input[name=logistics_cost]", this).val(),
        inventory_cost: $("input[name=inventory_cost]", this).val()
    });
});

console.log(data);

if (data.length > 0) {
    $.ajax({
        url: "http://www.webpage.com",
        type: "POST",
        data: data,
        success: function(data) {
            console.log("Success!! " + data);
        }
    });
}

It creates an array called data and populates it with objects that represent each row of the table that is ticked. (Console.log will show you what it gets).

It then performs an ajax call, posting the data and showing any resulting data that is returned.

(I’ve made 1 assumption that you need to change to suit. I’ve assumed the table has an id of table1 – see the 2nd line of code.)

Here’s a working jsfiddle