Getting checkbox value in flask

Question

I'm trying to poll the state of checkboxes (this is done in JS every three seconds). This solution returns "None" (see code below); Both printouts (with 'args' and with 'form') return "None". I'm expecting True/False, depending on the checkbox's boolean state.

index.html:

{% extends "layout.html" %}
{% block content %}
   <div  id="results" class="container">{{data_load|safe}}</div>
   <input id='testName' type='checkbox' value='Yes' name='testName'>
{% endblock %}

and the relevant flask app snippet:

@app.route('/', methods = ['GET', 'POST'])
def index(): 
    return render_template('index.html', data_load=timertry()) 

@app.route('/_timertry', methods = ['GET', 'POST']) 
def timertry():    
    print request.args.get('testName')  
    print request.form.get('testName')
    return "some html going into 'results' div.."

The JavaScript polling function (adapted from here):

$(document).ready(function() {
$.ajaxSetup({cache : false});
setInterval(function() {
    $('#results').load('/_timertry?' + document.location );
}, 3000); // milliseconds!
});

This should be simple enough, but none of the SO solutions I looked into (e.g., using jquery, adapting the flask/ajax example, etc.) worked.

EDIT: following mark's suggestion (including the javascript) and adding print request.values in index.html returns (seen on the console in Aptana):

CombinedMultiDict([ImmutableMultiDict([]), ImmutableMultiDict([])])

Clearly, the request seems empty. The post request is logged (when checkbox is pressed) as:

127.0.0.1 - - [03/Oct/2013 00:11:44] "POST /index HTTP/1.1" 200 -

Any ideas here?

Answer 1

Your javascript does the following every three seconds...

$('#results').load('/_timertry?' + document.location);

In other words, you are using the jQuery load() function. The documentation for that function states that this will, in essence, call an HTTP get request to the URL you provide as the parameter (something like /_timertry?http://www.example.org. In other words, a GET request will be called to /timertry?http://www.example.org, which will be handled by Flask's timertry method.

When you have an HTTP form, and you click the "Submit" button, the browser does some magic to push all of the values to the server in the request. When you just do a simple AJAX request, none of that happens for you. Instead, you need to explicitly state what you want to be passed as data to the server (although there are plugins to help you with "post the values of an HTML form using AJAX").

So, because at no point did you do anything in your Javascript to retrieve the value of checkbox to include it into the AJAX request, the AJAX request has no values specifying that the checkbox was checked. You would need to have jQuery check if the box is checked...

var isChecked = $('#testName').is(':checked');
# Now do something with isChecked...

From what I can tell, however, you are sort of misusing HTTP: the load function will make a GET request, and you probably want something to happen as a request of the request. You probably want to make it do a POST request instead (see here and here). Also, you mentioned that you're looking for something to post when a value is changed. Putting this together, you can do something like this...

// Ensure that the function is called when the DOM is ready...
$(function() {
    // Register an event that should be fired when the checkbox value is changed
    $('#testName').change(function() {
        var data = { isChecked : $(this).is(':checked') };
        $.post('/', data);
    });
})

In this case, we have an event that is called when a checkbox is checked, and that event causes us to make a POST request to the server.

Answer 2

I'm going to answer this question which was found in the comments of the question

"which becomes a question of how to submit a form without a 'submit' button.."

So it is very possible to submit a value when a user clicks on the button

{% block content %}
   <form id="target" action="YourViewName"> 
       <div  id="results" class="container">{{ data_load|safe }}</div>
       <input id='testName' type='checkbox' value='Yes' name='testName'>
   </form>
{% endblock %}

$( "#results" ).click(function() {
    $( "#target" ).submit();
});

If you want to stay on the same page, however, you're going to need to use an ajax call to pass the data back rather then use a standard submit, however This tutorial covers that topic fairly well. but a basic change to send the data back would look like

$( "#results" ).click(function() {
     var request = $.ajax({
         type: "POST",
         url: "/YourViewName",
         data: {'input_value':$('#testName').val()},
         dataType: "html"
         }).done(function(msg) {
              // I don''t know what you want to do with a return value...
              // or if you even want a return value
  }
});

and the flask would look like

@app.route("/YourViewName")
def example():
    list_name = request.args.get("input_value")
    #if you don't want to change the web page just give a blank return
return ""