EDIT
With the good help of @DinoCoderSaurus, I realised that I overlooked adding a POST method to the datainput form and the routes also lacked GET and POST methods. Adding those modifications helped in generating the datainputnext form in the following manner:
<main>
<div class="container">
<h1>Your Menstrual Cycle Details</h1>
<p>The higher the number of cycles inputted, the more accurate the result will be. It is usually advised to add
at least six or more previous cycles for the calculation.</p>
<br>
<div class="container-fluid">
<div class="box">
<form action="" class=" class="form-inline" id="webapp-form">
<ul>
<li><!-- Onset of flow -->
<i class="fa fa-calendar icon-color">
<label>Select start date of menstrual flow</label>
<input type="date" name="text" class="text-edit" placeholder="Click on date">
</i>
<!-- End of flow -->
<i class="fa fa-calendar icon-color">
<label>Select end date of menstrual flow</label>
<input type="date" name="text" class="text-edit" placeholder="Click on date">
</i></li>
<input type="submit" class="btn btn-default" name="submit" value="Submit">
<li><!-- Onset of flow -->
<i class="fa fa-calendar icon-color">
<label>Select start date of menstrual flow</label>
<input type="date" name="text" class="text-edit" placeholder="Click on date">
</i>
<!-- End of flow -->
<i class="fa fa-calendar icon-color">
<label>Select end date of menstrual flow</label>
<input type="date" name="text" class="text-edit" placeholder="Click on date">
</i></li>
<input type="submit" class="btn btn-default" name="submit" value="Submit">
<li><!-- Onset of flow -->
<i class="fa fa-calendar icon-color">
<label>Select start date of menstrual flow</label>
<input type="date" name="text" class="text-edit" placeholder="Click on date">
</i>
<!-- End of flow -->
<i class="fa fa-calendar icon-color">
<label>Select end date of menstrual flow</label>
<input type="date" name="text" class="text-edit" placeholder="Click on date">
</i></li>
<input type="submit" class="btn btn-default" name="submit" value="Submit">
<li><!-- Onset of flow -->
<i class="fa fa-calendar icon-color">
<label>Select start date of menstrual flow</label>
<input type="date" name="text" class="text-edit" placeholder="Click on date">
</i>
<!-- End of flow -->
<i class="fa fa-calendar icon-color">
<label>Select end date of menstrual flow</label>
<input type="date" name="text" class="text-edit" placeholder="Click on date">
</i></li>
<input type="submit" class="btn btn-default" name="submit" value="Submit">
<li><!-- Onset of flow -->
<i class="fa fa-calendar icon-color">
<label>Select start date of menstrual flow</label>
<input type="date" name="text" class="text-edit" placeholder="Click on date">
</i>
<!-- End of flow -->
<i class="fa fa-calendar icon-color">
<label>Select end date of menstrual flow</label>
<input type="date" name="text" class="text-edit" placeholder="Click on date">
</i></li>
<input type="submit" class="btn btn-default" name="submit" value="Submit">
<li><!-- Onset of flow -->
<i class="fa fa-calendar icon-color">
<label>Select start date of menstrual flow</label>
<input type="date" name="text" class="text-edit" placeholder="Click on date">
</i>
<!-- End of flow -->
<i class="fa fa-calendar icon-color">
<label>Select end date of menstrual flow</label>
<input type="date" name="text" class="text-edit" placeholder="Click on date">
</i></li>
<input type="submit" class="btn btn-default" name="submit" value="Submit">
</ul>
</form>
</div>
</div>
</div>
</main>
========================================================================== Good day to everyone! I am relatively new to programming and to Flask in particular. I just started the CS50 Introductory Course this year. I am currently working on my final project and I am not using WTForms since I could not get how to make it work with the CS50 SQL Library. The essence of the webapp is to register users and collect a list of menstrual cycle dates. The dates will then be used to predict the time for ovulation while monitoring the follicles.
I have been trying for over three days now on how to create rows of datefields on a datainputnext form for users to input start and end date for a cycle. The number of rows to be displayed is to be based on the select value from a dropdown shown in an earlier datainput form. I intend to retrieve the data from the datainputnext form and insert these into a sqlite database before doing further calculations. I have tried to use session data to pass the variable between the two routes without success. I have reviewed the following links for inspiration and ideas:
Links read
https://stackoverflow.com/questions/26954122/how-can-i-pass-arguments-into-redirecturl-for-of-flask
https://stackoverflow.com/questions/22439840/can-i-use-one-route-for-multiple-functions
https://stackoverflow.com/questions/27611216/how-to-pass-a-variable-between-flask-pages
https://stackoverflow.com/questions/17752301/dynamic-form-fields-in-flask-request-form
https://stackoverflow.com/questions/34886565/simple-dynamic-forms-with-flask-flask-wtf
https://stackoverflow.com/questions/56483991/how-to-get-dynamic-fields-with-flask/56487935#56487935
https://stackoverflow.com/questions/12353603/dynamic-forms-from-variable-length-elements-wtforms
How to get a value using flask, from a selected option in a drop down list?
I will like the datainoutnext route to get the select value from the datainput route and output a form with the same number of fields on the form.
This is my code for the routes:
@app.route("/datainput/")
@login_required
def datainput():
if request.method == "POST":
if not request.form.get("cycle_no"):
flash("Invalid no of cycles. Please select from dropdown list")
return redirect(url_for("datainput"))
else:
cycle_no = request.form.get("cycle_no")
session["cycle_no"] = cycle_no
return redirect(url_for("datainputnext"))
else:
return render_template("datainput.html")
@app.route("/datainputnext/")
@login_required
def datainputnext():
# cycle_no = 0
if request.method == "GET":
cycle_no = session.get("cycle_no", None)
return render_template("datainputnext.html", cycle_no = cycle_no)
elif request.method == "POST":
cycle_no = session.get("cycle_no", None)
form_input = request.form.get("datainputnext.html")
for key in form_input.keys():
for value in form_input.getlist(key):
print (key, ":" ,value)
# return pass
else:
return redirect(url_for("result"))
This is the HTML for the datainput form:
{% extends "layout.html" %}
{% block title %}
Data Input
{% endblock %}
{% block main %}
<main>
<div class="container">
<h1>Your Menstrual Cycle Details</h1>
<p>The higher the number of cycles inputted, the more accurate the result will be. It is usually advised to add
at least six or more previous cycles for the calculation.</p>
<br>
<div class="container-fluid">
<div class="box">
<form action="" class="form" id="webapp-form">
<!-- Number of cycles to be used for calculation -->
<div>
<label>Number of cycle(s) that will be used?</label>
<select name="cycle_no">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<input type="submit" name="submit" class="btn btn-default" value="Submit">
</form>
</div>
</div>
</div>
</main>
{% endblock %}
And this is the code for the datainputnext form:
{% extends "layout.html" %}
{% block title %}
Data Input
{% endblock %}
{% block main %}
<main>
<div class="container">
<h1>Your Menstrual Cycle Details</h1>
<p>The higher the number of cycles inputted, the more accurate the result will be. It is usually advised to add
at least six or more previous cycles for the calculation.</p>
<br>
<div class="container-fluid">
{% if cycle_no %}
<div class="box">
<form action="" class=" class="form-inline" id="webapp-form">
<ul>
{% for i in range(cycle_no) %}
<li><!-- Onset of flow -->
<i class="fa fa-calendar icon-color">
<label>Select start date of menstrual flow</label>
<input type="date" name="text" class="text-edit" placeholder="Click on date">
</i>
<!-- End of flow -->
<i class="fa fa-calendar icon-color">
<label>Select end date of menstrual flow</label>
<input type="date" name="text" class="text-edit" placeholder="Click on date">
</i></li>
<input type="submit" class="btn btn-default" name="submit" value="Submit">
{% endfor %}
</ul>
</form>
</div>
{% else %}
<p>No number of cycles entered.</p>
{% endif %}
</div>
</div>
</main>
{% endblock %}
Currently using Visual Studio Code on Linux Mint 18.3 Sylvia since my offline CS50 IDE became corrupted some days ago after updating it.
