0

index.html contains:

<div class="result">{{ result|safe }}</div>

I have a list of inputs for 4 separate checkboxes that looks like this:

    <ul class="filterSection">
    <li>
        <strong>Show:</strong>
        <input checked="true" type="checkbox" name="check" value="value1"/>
        <label>First</label>
    </li>
    <li>
        <input checked="true" type="checkbox" name="check" value="value2"/>
        <label>Second</label>
    </li>

     <li>
        <input checked="true" type="checkbox" name="check" value="value3"/>
        <label>Third</label>
    </li>
     <li>
        <input checked="true" type="checkbox" name="check" value="value4"/>
        <label>Fourth</label>
    </li>
    </ul>

This is the part I need help with. In javascript, I need to get these 4 values every time a checkbox is checked or unchecked and send all 4 values to server without page refresh. Then I will do something to data based upon these 4 values, and then send new data back. I need to retrieve value1, value2, value3, value4 in flask and know if they are checked/unchecked. Here's what I attempted so far:

$(function() {
    $.getJSON('/_filter', {
        b: $('input[name="check"]').val(),
      }, function(data) {
        $('.result').html(data.result)
    return false;
    });
    });

Lastly, in my flask app, I have:

@app.route('/_filter')
def filter_results():
    value = request.args.get('b') ## I don't know how to get all 4 values
    ##compare the 4 values  
    ##update index page with newdata based upon the values of the checkboxes            
    return jsonify(result=newdata)
wormyworm
  • 179
  • 8
  • None of which explain how to handle within flask environment which is specific to my question. – wormyworm Nov 05 '19 at 06:56
  • Yeah, sorry, I have a lot of questions. So confused, didn't know where to start. Links are helping though. – wormyworm Nov 05 '19 at 07:24
  • http://jsfiddle.net/mplungjan/Lg84r6en/ - you can even use `JSON.stringify(res)` – mplungjan Nov 05 '19 at 07:36
  • 1
    I have issues with JSFiddle. Here is the code `$(function() { $("[name=type]").on("click", function() { var res = {}; var vals = $("[name=" + this.name + "]").each(function() { res[this.value] = this.checked; }).get(); console.log(JSON.stringify(res)) }); });` – mplungjan Nov 05 '19 at 07:38

1 Answers1

0

You can use onclick event with checkbox.In onclick event fire a function in which you can store the value of associated checkbox in some array to get the values of all checkboxes.

Saima Haji
  • 185
  • 1
  • 5
  • Thanks for all the links @mplungjan I'm going to sort through them all and see if I can get further. Can you please give me an example of an onclick event with checkbox? I'm playing with this http://jsfiddle.net/dp2g79no/ , but haven't got the onclick event to work. – wormyworm Nov 05 '19 at 07:20