Extracting a list of lists from input box and checkbox values in flask

Question

This is the my index.html

<!DOCTYPE html>
<script>
  function add_field()
  {
    var total_text=document.getElementsByClassName("input_text");
    total_text=total_text.length+1;
    field_div = document.getElementById("field_div");
    new_input = "<li id='input_text"+total_text+
    "_wrapper'><input type='text' class='input_text' name='input_text[]' id='input_text"+
    total_text+"' placeholder='Enter Text'>"+
    "<label><input name='input_text"+total_text+"' id='input_text[]' type='radio' value='1'>1</label>"+
    "<label><input name='input_text"+total_text+"' type='radio' id='input_text[]' value='2'>2</label>"+
    "</li>";
    field_div.insertAdjacentHTML('beforeend',new_input);
  }
  function remove_field()
  {
    var total_text=document.getElementsByClassName("input_text");
    document.getElementById("input_text"+total_text.length+"_wrapper").remove();
  }
</script>
{% extends "bootstrap/base.html" %}
{% block content %}

<div class = "container">
  <h1>Give the words</h1>
  <form action='/results' method="post">
    <div id="wrapper">
      <input type="button" value="Add TextBox" onclick="add_field();">
      <input type="button" value="Remove TextBox" onclick="remove_field();">
      <ol id="field_div">

      </ol>
    </div>
    <input type='submit' value='Select'>
  </form>
</div>
{% endblock %}

My views.py is as follows:

from flask import render_template, request, url_for
from app import app
from .translit import *

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


@app.route('/results', methods = ['GET', 'POST'])
def results():
    if request.method == 'GET':
        return redirect(url_for('/'))
    else:
        values = getperm(request.form.getlist('input_text[]'))
        print(request.form.getlist('input_text[]'))
        return render_template('results.html',
                               values = values)

Right now, I can extract the input from all the input texts as a list? How do I get the values form each <li> as a list thereby creating a list of lists?

As an example, if i type

a 1
b 2

I should be able to extract the result as [[a,1],[b,2]]

arshovon · Accepted Answer · 2017-11-03 14:11:41Z

1

We should manipulate the value attribute of checkbox.

Added checkbox with each textbox.

app.py:

from flask import Flask, render_template, url_for, request

app = Flask(__name__)

@app.route('/')
def search():
    return render_template('dynamic_input.html')

@app.route('/results', methods = ['GET', 'POST'])
def results():
    if request.method == 'GET':
        return redirect(url_for('search'))
    else:
        input_values = request.form.getlist('input_text[]')
        checkbox_values = request.form.getlist('input_checkbox')
        return render_template('dynamic_input_results.html',
                               input_values = input_values,
                               checkbox_values = checkbox_values)

if __name__ == '__main__':
    app.run(debug = True)

dynamic_input.html:

<!DOCTYPE html>
<script>
  function add_field()
  {
    var total_text=document.getElementsByClassName("input_text");
    total_text=total_text.length+1;
    field_div = document.getElementById("field_div");
    new_input = "<li id='input_text"+total_text+"_wrapper'>";
    new_input += "<input type='text' class='input_text' name='input_text[]' id='input_text"+
    total_text+"' placeholder='Enter Text'>";
    new_input += "<input type='checkbox' name='input_checkbox' value='"+total_text+"' id='input_checkbox"+
    total_text+"'";
    new_input += "</li>";
    field_div.insertAdjacentHTML('beforeend',new_input);
  }
  function remove_field()
  {
    var total_text=document.getElementsByClassName("input_text");
    document.getElementById("input_text"+total_text.length+"_wrapper").remove();     
  }
</script>

<div class = "container">
  <h1>Give the words</h1>
  <form action='/results' method="post">
    <div id="wrapper">
      <input type="button" value="Add TextBox" onclick="add_field();">
      <input type="button" value="Remove TextBox" onclick="remove_field();">
      <ol id="field_div">

      </ol>
    </div>
    <input type='submit' value='Select'>
  </form>
</div>

dynamic_input_results.html:

<ul>
{% for value in input_values %}
    <li>{{value}}</li>
{% endfor %}
<hr>
{% for value in checkbox_values %}
    <li>{{value}}</li>
{% endfor %}

</ul>

Output:

answered Nov 3, 2017 at 14:11

arshovon

13.7k9 gold badges54 silver badges72 bronze badges

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

4 Comments

Echchama Nayak Over a year ago

can i return empty when no value is provided?

arshovon Over a year ago

That will be tricky as it is not the purpose of checkbox. But you can manipulate the checked boxes values by iterating from 1 to the textbox list length.

Echchama Nayak Over a year ago

Thanks. Any alternatives that I can use?

arshovon Over a year ago

Here is a blog article based on your scenario: alexandrejoseph.com/blog/… . Hope it helps.

catchiecop · Accepted Answer · 2017-11-03 13:21:31Z

0

probably not what you were hoping for but this might do the trick if your result list is small enough

#assuming your result list is ll

alplhabet = list(string.ascii_lowercase)

if len(ll)<=len(alplhabet):
    res = []
    for i in map(None,alplhabet[:len(ll)],ll):
        res.append(list(i))
    return res

answered Nov 3, 2017 at 13:21

catchiecop

3886 silver badges24 bronze badges

2 Comments

Echchama Nayak Over a year ago

I am sorry, how is this related to flask

catchiecop Over a year ago

sorry my bad I didn't understood you were looking exclusively for a flask solution! If it's not helpful I will delete my answer

Collectives™ on Stack Overflow

Extracting a list of lists from input box and checkbox values in flask

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related