0

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://www.reddit.com/r/learnpython/comments/6w7sd8/how_do_i_pass_data_through_multiple_forms_in_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

https://stackoverflow.com/questions/58653240/python-flask-wtforms-dynamic-selectfield-returning-not-a-valid-choice

https://stackoverflow.com/questions/44218904/how-to-send-multiple-input-entries-into-flask-in-order-to-make-web-calculator

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.

0

Is the problem in datainput form here: <form action="" class="form" id="webapp-form">?

There is no action so it doesn't go anywhere. There is no method defined so it will default to GET, but the logic in datainput() seems to be in the POST branch. Which will likely give an error since the route does not "accept" a POST request (it would need a methods argument)

3
  • Thank you very much. That was a silly oversight. I have added the POST method to the form. Now I am getting "405 - Method not allowed error". – EddyBeor Dec 9 '20 at 17:21
  • perhaps you forgot to add the methods argument to the route? – DinoCoderSaurus Dec 9 '20 at 17:55
  • You are a genius @DinoCoderSaurus! I cannot believe I made such silly mistakes; battling the errors for three days. I know get the the rows of input fields with each one having a submit button. I will see if this will return the data I want. Thanks so much. Will now mark this as solved. – EddyBeor Dec 9 '20 at 18:25

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .