[Answered ]-Bootstrap Table not sending selected checkbox values in POST request in Django app

by

1👍

✅

You can’t rely on your HTML because it is dynamically replaced by BootstrapTable.

So you need to use its API to retrieve the values. The simplest way is to add script to the page which will get values from table and assign on some (hidden) element in the form.

Then – on Python side you will read this field and process the data.

See example (uses JQuery but can be converted to plain JS):

<script>
    $(document).ready(function () {
        $('#product-form').on('submit', function () {
            const table = $('#products').bootstrapTable('getSelections')
            $('#checkboxes').val(JSON.stringify(table))
        })
    })
</script>

Some corrections to the template:

  1. Add ID to form
  2. Include product ID as hidden column
  3. Add hidden element which will pass content via form

html template:

<form method="post" id="product-form">
    {% csrf_token %}
    <table id="products" class="table-striped" data-toggle="table">
        <thead>
        <tr>
            <th data-field="product_check" data-checkbox="true"></th>
            <th data-field="product_id" data-visible="false">ID</th>
            <th data-field="product">Product</th>
        </tr>
        </thead>
        <input id="checkboxes" name="product_checkboxes" style="display: none">
        {% for product in product_list %}
            <tr>
                <td><input type="checkbox" data-id="{{ product.id }}" value="{{ product.id }}"></td>
                <td>{{ product.id }}</td>
                <td>{{ product.short_name }}</td>
            </tr>
        {% endfor %}
    </table>
    <button id="select-products" onclick="location.href='{% url 'process-products' %}'">Select Products</button>
</form>

And finally – getting the data in views.py:

def post(self, request):
    products = json.loads(request.POST.get('product_checkboxes'))
    # process the chosen products
    return redirect('product-list')

Note that in this case products will be a list of objects. Each object has values that are correspondent to columns

👤Egor Wexler

Leave a comment