[Flask][Ajax] How to send and get multiple checkbox values

Question

I'm trying to submit multiple checkbox values using AJAX and then add checked items to div element. Because a number of checkbox varies depending on cases, I don't know a way to send and get such a multiple data. In HTML code below, the length of the list person_name changes depending on users.

HTML:

 {% for name in person_names %}
      <label><input type="checkbox" name="check" value="{{name}}">{{name}}</label>
 {% endfor %}
 <a href=# id="add">Add</a>                                        

 <div id="names">
      Your checked names are: 
      {% for ckname in cknames%}
      <p>{{ckname}}</p>
      {%endfor%}
 </div>

Javascript:

$('a#add').bind('click',function(){
$.ajax({
    url: "/regist",
    type: "GET",
    contentType: 'application/json;charset=UTF-8',
    data: { /* I can't find a way */},
    dataType:"json",
    success: function (data) {
    var div = document.createElement('div');
    document.getElementById('names').appendChild(div);
    } 
});
})

Python:

@app.route("/")
def index():
     return render_template('index.html')

@app.route("/regist")
def register():
    cknames = request.form.getlist('check')
    return cknames %??

In addition I don't want to redirect the page, want to just add div element. Appreciate any helps!

Just captures all the looping checkboxes with an array so you can easily process it. — Muthulakshmi M
– Muthulakshmi M, Commented May 5, 2021 at 2:16
Thanks to quick comment @MuthulakshmiM. I'm unfamiliar with flask and javascript. Could you teach me more details? — user
– user, Commented May 5, 2021 at 2:22
Push values inside array and don't forget to send csrf token as well . — Swati
– Swati, Commented May 5, 2021 at 13:01

Musa · Accepted Answer · 2021-05-05 02:30:59Z

1

You can use $('[name=check]').serialize() to get the data but your request is wrong.
Data received from form.getlist needs to be sent via POST and in form-data format.

$('a#add').bind('click',function(){    
    $.ajax({
        url: "/regist",
        type: "POST",
        data: $('[name=check]').serialize(),
        dataType:"json",
        success: function (data) {
            var div = document.createElement('div');
            document.getElementById('names').appendChild(div);
        },
        error: function(){
            console.log(arguments);
        }
    });    
})

answered May 5, 2021 at 2:30

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user Over a year ago

Thank you for great idea, @Musa. However, I still get stuck... I first rewrote to ck=request.get_json() and cknames=ck['check'] as you mention but any response don't appear. What are my mistakes??

Musa Over a year ago

Did request.form.getlist('check') not work?

user Over a year ago

OMG, I misunderstood your comment... request.form.getlist('check') works well and what I want is obtained. Thank you so much @Musa!!

Collectives™ on Stack Overflow

[Flask][Ajax] How to send and get multiple checkbox values

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related