Combine multiple WTforms output into one JS variable and get it in flask python

Question

I am trying to figure out how to obtain the values of multiple forms, forge them together and get them into python by using flask requests. I would like to have only one submit button. When it is pressed all the chosen options in all the forms would be captured on the flusk's side at once.

Expected result:

In python I should be able to assign to a variable the users choice in each form, together with the user entry name. I expect to capture with flask the output such as the console log message in the JS function. So if the user enters the his/her name, makes a chose in form 1 and form 2, the python variable o should be a list for example ['Mary','1','5']. In addition, it would be better to get a dictionary capturing the name of the forms as well, for example {'name':'Mary', 'form_1':'1','form_2':'6'} would be great.

I use a javascript function to get all the chosen options into one variable score and printing it out to the console.log. This is what I would like to forward and capture in flask.

Here is my flask file

from flask import Flask, render_template, request
import time


app = Flask(__name__)
app.static_url_path='/static'



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


@app.route('/response', methods=['GET', 'POST'])
def response():
        w = request.form['say']
        return render_template('index_2a.html', say=request.form['say'])

@app.route('/page', methods=['GET', 'POST'])
def page():
        # THIS IS WHAT I DON'T KWNO ???
        o = request.form.getlist('options')
        o1= request.form.getlist('submit_it')
        o2= request.form.getlist('design')
        o3 = request.form.getlist('options2')
        o4 = request.form.getlist('footer')
        print(o,o1,o2,o3,o4)
        return render_template('index_2a.html')


if __name__ == "__main__":
        app.run(host='127.0.0.1',port=8899)

and the corresponding index_2a.html template:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    <style type="text/css">

.node circle {
  cursor: pointer;
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node text {
  font-size: 11px;
}

path.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

    </style>
  </head>
  <body>
    <div id="body">
      <div id="footer">

     <form action="{{ url_for('response') }}" method="post">
   <label for="say"> Enter your name:</label><br>
   <input id="say" name="say" ><br>
  </form> 


 <form id="brand" action="{{ url_for('page') }}" method="post" >
  <p>
  <input class="q1" type="radio" name="options" id="option1" value='1'> Option1 
  <input class="q1" type="radio" name="options" id="option2" value='2'> Option2 
  <input class="q1" type="radio" name="options" id="option3" value='3'> Option3 

  </p>

 </form>

 <form id="design" action="{{ url_for('page') }}" method="post" onsubmit="return submitForm(this);">
  <p>
  <input  class="q2" type="radio" name="options" id="option4" value='4'> Option4
  <input  class="q2" type="radio" name="options" id="option5" value='5'> Option5
  <input  class="q2" type="radio" name="options" id="option6" value='6'> Option6
  </p>

  <p><button name='submit_it' onclick="check()" method="post">Submit my scores!</button> </p>
 </form>

    </div>
    <script type="text/javascript">

var score=[];
function check () {
 var users = document.getElementsByName("say");
    var methods = document.getElementsByName("options");
 score.push( users[0].value );
    for (var i=0; i<methods.length; i++) {
         if (methods[i].checked == true) {
             score.push(methods[i].value);
            }
    }
 console.log(score.toString())
 return score.toString()
}

function submitForm() {
  return confirm('Do you really want to submit the form?\n'+ score.toString());
}



    </script>
  </body>
</html>

to get the payload as JSON you could use request.get_json(), alternatives are [here](https://stackoverflow.com/questions/10434599/how-to-get-data-received-in-flask-request) — Andrew Allen, May 03 '19 at 15:41
thank you for the suggestion. if you can write this into an answer in the context of the question, that would be great. — B.Kocis, May 05 '19 at 07:38

Combine multiple WTforms output into one JS variable and get it in flask python

0 Answers0