How can I create a permanent form select element based on values from another form?

Question

Hi,

I am very new to scripting and I am working on my first project after having completed the Python Basics, Flask Basics, Introduction to HTML & CSS, and HTML Forms classes.

I am trying to create a main page that will have a form with select elements in it and a "Create a new thing" link. The "Create" link will take the user to a form that will ask for a bunch of information. When that form is submitted, one of things I would like to have happen is to create a new select element on the main page so that in the future, when someone accesses the main page, they can select that thing that was created and go to a page with information about that thing.

I have most of this in place, but Im struggling with how to automate the creation of the select element based on the form input. The information necessary to create it is in cookies and I can pull it out of the cookies, but my problem is how do I make it permanent, so that if user2 logs into the main page, he sees the select element even though he doesn't have the cookies that created it in the first place? Right now it only works if the cookies are available, but they won't be available except for the person who created it originally and then only when they first created it. The other problem I'm having is that my syntax for creating the option value and the text for the option is being displayed literally instead of pulling in the variables from the cookies.

Here is my code:

awsdc_main.py

import json

from flask import (Flask, render_template, redirect, url_for, request, make_response)

app = Flask(__name__)

def get_saved_data():
    try:
        data = json.loads(request.cookies.get('aws_attr'))
    except TypeError:
        data = {}
    return data

@app.route('/', methods=['POST', 'GET'])
def home():
    return render_template('awsdc_main.html', aws_attributes = get_saved_data())

@app.route('/Create_DirectConnect')
def create_directconnect():
    return render_template('awsdc_make_new.html')

@app.route('/makeitso', methods=['POST'])
def makeitso():
    #getting cookie
    aws_attr = get_saved_data()
    aws_attr.update(dict(request.form.items()))
    #setting cookie
    response = make_response(redirect(url_for('home')))
    #response = make_response(redirect(url_for('awsdc_page',
    #                name='AWS-' + aws_attr.get('company_name')
    #                + '-' + aws_attr.get('vpc_name').upper())))
    response.set_cookie('aws_attr', json.dumps(dict(request.form.items())))
    #setting filename to be AWS-<company_name>-<vpc_name>
    awsdc_name = 'AWS-' + aws_attr.get('company_name') + '-' + aws_attr.get('vpc_name').upper()
    # creating flat file with form values
    with open('{}.txt'.format(awsdc_name), 'w') as file:
        file.write(json.dumps(aws_attr))
    return response

@app.route('/<name>', methods=['GET', 'POST'])
def awsdc_page(name):
    aws_attr = get_saved_data()
    #checking to see if there are any cookies
    if len(aws_attr) >= 1:
        return render_template('awsdc_page.html', aws_attr=aws_attr)
    # if no cookies, generate variable by opening this file and creating them
    else:
        with open('{}.txt'.format(request.args.get('awsdc_name')), 'r') as f:
            data = f.readline()
        aws_attr = json.loads(data)
    return render_template('awsdc_page.html', aws_attr=aws_attr)



app.run(debug=True, port=8000, host='0.0.0.0')

awsdc_main.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>AWS DirectConnect Connections</title>
     <link rel="stylesheet" href="/static/stylesheet.css">
  </head>
  <header>
    <h1>
    AWS DirectConnect Connections
    </h1>
  </header>
  <body>
  <a href="{{url_for('create_directconnect')}}">Create a new DirectConnect.</a>
  <div>
    <form action="{{url_for('awsdc_page', name='')}} method="POST">
      <select name='awsdc_name'>
        <option value="none">None</option>
       <!---The piece below is where Im struggling--->
        <option value="'AWS-' + {{aws_attr.get('company_name')}} + '-' + {{aws_attr.get('vpc_name')}}.upper()">
                     'AWS-' + {{aws_attr.get('company_name')}} + '-' + {{aws_attr.get('vpc_name')}}.upper()
        </option>
      </select>
      <button type="submit">Go!</button>
    </form>
  </div>
</body>
</html>

Welcome to the Treehouse Community

Looking to learn something new?

Jeremy Bradrick

Jeremy Bradrick

How can I create a permanent form select element based on values from another form?