使用其复选框包装一些输入并发送到数据库 [英] Wrap some inputs with its check-box and send to database

问题描述

关键是如何选中与选中复选框相同的行中的所有输入元素？

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.

推荐答案

这个HTML并不是那么难：

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>

完整的jQuery代码段将是：

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!');
    });
});

查看操作中的代码。

在PHP中，发布的变量是数组：

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
    )

你可以这样浏览它们：

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 />';
};

输出：

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

请注意：在某些设备上，您需要关闭jQuery缓存，一般来说：

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

$.ajaxSetup({ cache: false });

或特定职位：

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

这篇关于使用其复选框包装一些输入并发送到数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！