0

I have the following multiple selection form which is rendered by a flask app:

<form method="POST" action="">
    <label for="sports">Sports:</label>
    <select id="sports" name="sports" multiple>
        <option value="Basketball">Basketball</option>
        <option value="Football">Football</option>
        <option value="Baseball">Baseball</option>
        <option value="Golf">Golf</option>
        <option value="Soccer">Soccer</option>
    </select>
    <input type="submit" name="send" onclick="var selected_sports = project.getSelectedValues(document.querySelector('#sports'));">
</form>

I'm trying to send the data in the form of a list to the server / python code.

For example, if you select Basketball, Football and Golf the list will be ["Basketball", "Football", "Golf"] and if you select only Football the list will be ["Football"].

I'm able to create the list using javascript (code below) but I'm not sure how to pass this created list to the server (the server is receiving only the first selected option).

JS code to create list of selected values (called in HTML form when submit button is clicked):

project = {};

project.getSelectedValues = function (selectTag) {
    var result = [];
    var options = selectTag && selectTag.options;

    for (var = 0; i < options.length; i++) {
        if (options[i].selected) {
            result.push(options[i].value || options[i].text);
        }
    }
    return result;
}
Johnny Metz
  • 5,977
  • 18
  • 82
  • 146
  • How is your form in the server side? – ettanany Dec 20 '16 at 21:18
  • It's not. The form resides in a template which is rendered by the flask app. – Johnny Metz Dec 20 '16 at 21:20
  • You have some python code where you handle your form. In some view for example, right? – ettanany Dec 20 '16 at 21:31
  • Yes but I don't think the python code affects anything here. The data must be pushed into a list before it reaches the server, correct? I'm basically using the sports list to consult a database and project some data to the front-end. – Johnny Metz Dec 20 '16 at 21:45
  • You have to insert the data into the actual form, a random javascript variable is not going to travel with posted form data. Try to add a hidden element to the form, then use the event handler to set the value of that element. – abigperson Dec 20 '16 at 21:46
  • Also, rather than use the click event, which might be unpredictable, I'd use the submit event like the answer here: http://stackoverflow.com/questions/14241980/in-jquery-how-to-run-code-with-callback-before-submit – abigperson Dec 20 '16 at 21:48
  • How about you just try submitting the form without any javascript using your browser. What's the behavior then? Can you show your server side code? What's the exact problem you're having right now? – sytech Dec 20 '16 at 22:05

1 Answers1

2

the server is receiving only the first selected option

You can submit the <select id="sports" name="sports" multiple> normally (without using JS to create a list) and reference all of the selected options in your python code by using getlist()

sports = request.form.getlist('sports')
Mike
  • 1,675
  • 1
  • 18
  • 26
  • Great thank you! Is there documentation explaining this method? I'm curious what other methods exist for `flask.request.form` – Johnny Metz Dec 20 '16 at 22:03
  • The `getlist()` is a part of the `MultiDict` data structure http://werkzeug.pocoo.org/docs/0.11/datastructures for more info on the request object see the Flask quickstart guide http://flask.pocoo.org/docs/0.11/quickstart/ – Mike Dec 20 '16 at 22:10