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                             


        

Answer 1

It is not so hard, for this HTML:

    

        

            
Mark
            
Name
            
Qty
            
Price
        
    
    

        

            

            

            

            

        
        

            

            

            

            

        
        

            

            

            

            

        
        

            

        
    

Post data:
click Submit...

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 . '
';
    echo 'Name: ' . $_POST['name'][$id] . '
';
    echo 'Qty: ' . $_POST['quantity'][$id] . '
';
    echo 'Price: ' . $_POST['price'][$id] . '
';
    echo '
';
};

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" }
});