Finance - Quote: Toggle visibility between submit button and table

Question

I'm happy that my finance website finally works properly!!!

The thing is that I'm trying to make it look like the staff's solution website and I can't seem to get quote.html to behave like theirs (https://finance.cs50.net/quote). On this website, they only show the submit button and after it's been hit, it disappears and the quotation appears instead, but it's all happening on the same "/quote" site.

Here's my HTML:

{% block title %}
    Quote
{% endblock %}

{% block main %}
    <form action="/quote" method="post" id="form" style="visibility: visible">
        <div class="mb-3">
            <input autocomplete="off" autofocus class="form-control mx-auto w-auto" name="symbol" placeholder="Symbol" type="text">
        </div>
        <button class="btn btn-primary" type="submit" onclick="showTable()">Search</button>
    </form>
    <p></p>
    <table class="table" id="table" style="visibility: hidden">
        <thead>
            <td>Symbol</td>
            <td>Name</td>
            <td>Price</td>
        </thead>
        <tbody>
            <td>
                {{ symbol }}
            </td>
            <td>
                {{ name }}
            </td>
            <td>
                {{ price }}
            </td>
        </tbody>
    </table>
    <script>
        function showTable(){
            document.getElementById("table").style.visibility = "visible";
            document.getElementById("form").style.visibility = "hidden";}
    </script>

{% endblock %}

Here I added an onclick event to change the visibility between the submit button and the table, but it doesn't work. I believe it is because each time I hit the submit button my python code is rendering the page all over again, so it's resetting... But I don't know how to solve this issue.

I also tried to add an if statement to my jinja, so that if "symbol" was null it should change the visibility style of the table/button, but still not working.

Here's the python part:

@app.route("/quote", methods=["GET", "POST"])
@login_required
def quote():
    if request.method == "GET":
        return render_template("quote.html")
    else:
        # Ensure symbol exists.
        quote = lookup(request.form.get("symbol"))
        if quote == None:
            return apology("Please enter a valid stock symbol.", 403)

        # Return stock data.
        else:
            return render_template("quote.html", name=quote['name'], symbol=quote['symbol'], price=quote['price'])

Could somebody please set me on the right path?

Thx :D

Answer 1

I solved this issue this way:

Python:

return render_template("quote.html", name=quote['name'], symbol=quote['symbol'], price=quote['price'], isQuote=True)

HTML

{% if not isQuote %}
form code
{% else %}
table code
{% endif %}