Wrap some inputs with its check-box and send to database

Question

The point is "how can I select all the input elements in the same row as the checked check-box?"

MARK       NAME                   QUANTITY                      PRICE      
--------------------------------------------------------------------------------------
 []     inputForName1         inputForQuantity1             inputForPrice1
--------------------------------------------------------------------------------------
 []     inputForName2         inputForQuantity2             inputForPrice2
--------------------------------------------------------------------------------------
 []     inputForName3         inputForQuantity3             inputForPrice3
--------------------------------------------------------------------------------------
 []     inputForName4         inputForQuantity4             inputForPrice4
--------------------------------------------------------------------------------------
 []     inputForName5         inputForQuantity5             inputForPrice5
--------------------------------------------------------------------------------------
                                                                              [SUBMIT]

(here "[]" is a Check-Box)

When some of the lists in checked, then all on its row (the inputs) is selected.

And then, how to submit the checked box, for example if there are two of checkboxes which are checked, then all input in the two checkboxes are send to a table in database.

Please give me an idea how to do this. Thanks in advance for your help.

Answer 1

It is not so hard, for this HTML:

<table>
    <thead>
        <tr>
            <th>Mark</th>
            <th>Name</th>
            <th>Qty</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="id[1]" /></td>
            <td><input type="text" name="name[1]" /></td>
            <td><input type="text" name="quantity[1]" size="3" /></td>
            <td><input type="text" name="price[1]" size="3" /></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="id[2]" /></td>
            <td><input type="text" name="name[2]" /></td>
            <td><input type="text" name="quantity[2]" size="3" /></td>
            <td><input type="text" name="price[2]" size="3" /></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="id[3]" /></td>
            <td><input type="text" name="name[3]" /></td>
            <td><input type="text" name="quantity[3]" size="3" /></td>
            <td><input type="text" name="price[3]" size="3" /></td>
        </tr>
        <tr>
            <td colspan="4"><input id="save" type="button" value="Submit" /></td>
        </tr>
    </tbody>
</table>
<h3>Post data:</h3>
<div class="submit_data">click Submit...</div>

Complete jQuery snippet would be:

$('input[name^=id]').on('change', function(e) {
    var thisCheckbox = $(this);
    var thisRow = thisCheckbox.closest('tr');
    if ( thisCheckbox.is(':checked') ) {
        thisRow.addClass('row_selected');
    } else {
        thisRow.removeClass('row_selected');
    };
});
$('#save').on('click', function(e) {
    e.preventDefault();
    var toPost = $('.row_selected input').serialize();
    /* Now post and insert into database */
    $.post('insert_into_db.php', toPost, function(data) {
        alert('Success!');
    });
});

See the code in action.

In PHP posted variables are arrays as:

[id] => Array
    (
        [1] => on
        [3] => on
    )

[name] => Array
    (
        [1] => My name 1
        [3] => My name 3
    )

[quantity] => Array
    (
        [1] => 100
        [3] => 50
    )

[price] => Array
    (
        [1] => 23.34
        [3] => 15.23
    )

and you can browse them this way:

foreach( $_POST['id'] as $id=>$on ) {
    echo 'ID: ' . $id . '<br />';
    echo 'Name: ' . $_POST['name'][$id] . '<br />';
    echo 'Qty: ' . $_POST['quantity'][$id] . '<br />';
    echo 'Price: ' . $_POST['price'][$id] . '<br />';
    echo '<hr />';
};

which outputs:

ID: 1
Name: My name 1
Qty: 100
Price: 23.34
------------------
ID: 3
Name: My name 3
Qty: 50
Price: 15.23
------------------

Please note: on some of devices you will need to turn off jQuery caching, in general:

$.ajaxSetup({ cache: false });

or post specific:

$.ajaxSetup({
   type: 'POST',
   headers: { "cache-control": "no-cache" }
});