CODEWITHSUNDEEP
javascriptpythonhtmljinja2flask-sqlalchemy
Shobin Parameswaran
Shobin Parameswaran

Reputation: 47

Extracting value of checkbox generated dynamically through flask

Is there a way to read through an HTML page and return the value of the dynamic checkboxes which are clicked?

Now, I know how to get values from static check boxes even without using JS but since I am generating the below check boxes using data from Database I am not sure how to pin point each one and know which one the user checked,

When I went through developer tools in chrome I can see that the value of the generated check boxes changes but when I refer to them it still does not work.

<!DOCTYPE html>
<html lang="en">

 <form action="/test" method="post">
  <button type="submit" id="exporst-btn" class="btn btn-primary">Import Test Data <span class="glyphicon glyphicon-import"></span></button>
  <br>
   <br>
     <div id="table">
        <table class="table table-condensed">
        <thead>
            <tr>
                <th>Selection</th>
                <th>Slno</th>
                <th>Region</th>
            </tr>
        </thead>

    <tbody>
    {% for obj in TD %}
        <tr>
            <td>
                <input type="checkbox" name="chb[]"  > {{obj.OEHR_Mtest_Slno}}
                </td>
            <td>
                {{obj.OEHR_Mtest_Slno}}
                </td>
            <td>
                {{obj.OEHR_Mtest_SF_Part_Number}}
            </td>

        </tr>
    {% endfor %}
    </tbody>

</table>
</div>

  </div>

        <!--<p id="export" name="test"></p>-->
        <input type="hidden" id="exp" name="test">
<button type="submit" id="export-btn" class="btn btn-success">Execute <span class="glyphicon glyphicon-play"></span></button>

</form>


</body>
<script type="text/javascript"><!--
   $('#export-btn').click(function () {
       alert($('#mytable').find('input[type="checkbox"]:checked').length + '      checked');
    });
 </script>


</html>

I can use the above JS to know how many checkboxes have been checked, I want to know the value of the ones checked and I am not able to get that.

Upvotes: 2

Views: 2301

Answers (2)

M. Davis
M. Davis

Reputation: 719

If I'm not mistaken,

var foo = $('#mytable').find('input[type="checkbox"]:checked')

will return an array of html elements which are checkboxes, and are checked. You can then do:

var bar = [];
foo.each(function (index) {
    var baz = this.parentNode.textContent || this.parentNode.innerText;
    if (baz && baz.length > 0)
        bar.push(baz);
});
console.log(bar);

That will make bar an array of the values which were checked. It gets the checkboxes which were checked, finds their parents (<td> tags), and gets the text inside (which skips the <input> tags). This will do it client-side.

Upvotes: 2

Scratch&#39;N&#39;Purr
Scratch&#39;N&#39;Purr

Reputation: 10427

Because you're dynamically generating the checkboxes, it's helpful to also dynamically generate the values for the checkboxes. That way, when you POST the request via the submit button, Flask can determine which checkboxes were checked by reading the values. I would change your HTML to:

{% for obj in TD %}
    <tr>
        <td>
            {# Assuming obj.OEHR_Mtest_Slno is a unique value #}
            <input type="checkbox" name="chkbox" value="{{obj.OEHR_Mtest_Slno}}"> {{obj.OEHR_Mtest_Slno}}
            </td>
        <td>
            {{obj.OEHR_Mtest_Slno}}
            </td>
        <td>
            {{obj.OEHR_Mtest_SF_Part_Number}}
        </td>

    </tr>
{% endfor %}

Then in your backend, you can access the values via:

# Use .getlist if you are using HTML form elements with the same name
chkbox_values = request.form.getlist('chkbox')  # returns a list of values that were checked

Upvotes: 2

Related Questions