skip to Main Content

This is a simple webpage with an input form in the top frame. On submission, the inputs are processed by a python program and the outputs are displayed back to the user. the output should be displayed in the bottom frame but it is currently being displayed in the the frame where the submission form is loaded. I need the top frame to keep showing the submission form and the results displayed in the bottom frame.

index form html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DB Query Page</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .frame-container {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .top-frame {
            background-color: #f0f0f0;
            padding: 10px;
            text-align: center;
        }
        .bottom-frame {
            display: flex;
            flex: 1;
        }
        .bottom-left-frame {
            width: 200px;
            background-color: #d3d3d3;
        }
        .bottom-right-frame {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .bottom-top-frame {
            flex: 20%;
            background-color: #bdbdbd;
        }
        .bottom-bottom-frame {
            flex: 80%;
            background-color: #a8a8a8;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>
    <div class="frame-container">
        <div class="top-frame">
            <h1> </h1>
        </div>
        <div class="bottom-frame">
            <div class="bottom-left-frame">
                <iframe src="test_left.html"></iframe>
            </div>
            <div class="bottom-right-frame">
                <div class="bottom-top-frame">
                    <iframe src="animal_top.html" name="bottomTopFrame"></iframe>
                </div>
                <div class="bottom-bottom-frame">
                    <iframe name="outputFrame" src="test_bottom.html"></iframe>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

submission form html

type here<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 10px;
            text-align: center;
        }
        h1 {
            margin-bottom: 20px;
        }
        h2 {
            margin-bottom: 15px;
        }
        .input-container {
            display: flex;
            justify-content: space-between;
            padding-left: 80px;
            padding-right: 80px;
            margin-bottom: 20px;
        }
        input {
            width: calc(20% - 10px); /* 20% width for each input box with 10px spacing */
        }
        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>


<body>
    <div class="container">
        <h2>Sample test page</h2> 
        <br>
        <br>
        <form class="input-container" id="myForm" action="{{ url_for('submit_form') }}" method="post">
            <input type="text" id="name" name="name" placeholder="John">

            <select id="animal" name="animal" placeholder="dogs">
                <option value="dogs">dogs</option>
                <option value="cats">cats</option>
                <option value="birds">birds</option>
            </select>
            <input type="submit" value="Submit">
        </form>
    </div>
</body>
</html>

left pane html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exchange Links</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            border-left: 4px solid #007bff; /* Adding left border */
            border-bottom: 1px solid #ccc;
            padding: 10px 0;
        }
        li:last-child {
            border-bottom: none; /* Remove border from the last item */
        }
        li a {
            text-decoration: none;
            color: #333;
            padding-left: 10px; /* Adding padding to align text after the border */
        }
        li a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="animal_top.html" target="bottomTopFrame">Animals</a></li>
        <li><a href="places_top.html">Places</a></li>


</body>
</html>

bottom frame html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Output</title>
</head>
<body>
    <div class="container">
        <h2>Form Submission Result</h2>
        <div id="outputFrame" class="output-frame"></div>
    </div>

    <script>
        // Get the result from the query parameter in the URL
        var result = new URLSearchParams(window.location.search).get('result');

        // Display the result in the output frame
        document.getElementById('outputFrame').innerHTML = result;
    </script>
</body>
</html>

flask app

from flask import Flask, render_template, request, redirect, url_for
import subprocess

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("test_index.html")

@app.route("/test_left.html")
def left():
    return render_template("test_left.html")

@app.route("/test_top.html")
def top():
    return render_template("top.html")

@app.route("/test_bottom.html")
def bottom():
    return render_template("test_bottom.html")

@app.route("/animal_top.html")
def momentum_top():
    return render_template("animal_top.html")

@app.route('/submit_form', methods=['POST'])
def submit_form():
    name = request.form['name']
    animal = request.form['animal']
  

    # Call the Python script with the form data as arguments
    result = subprocess.run(['python3', 'query_test.py', name, animal], capture_output=True, text=True)

    # Get the output of the Python script
    output = result.stdout

    return redirect(url_for('output_page', result=output))

@app.route('/output')
def output_page():
    result = request.args.get('output')
    return render_template('test_bottom.html', result=result)


if __name__ == "__main__":
    app.run(debug=True)

backend processing python app


import sys

# Get command line arguments
name = sys.argv[1]
animal = sys.argv[2]


# Process the data
# For demonstration purposes, simply print the received data
print(name, "loves", animal )

currently the output is being loaded in the top frame but need to load it in the bottom frame.

2

Answers


  1. Chosen as BEST ANSWER

    This was solved by using the target attribute in the form.

    <form class="input-container" id="myForm" action="{{ url_for('submit_form') }}" method="post" target="outputFrame">
    

  2. Render template animal_top.html instead of test_bottom.html
    When animal_top.html reloads javascript finds the iframe to show the result

    animal_top.html

    //add this
            <script>
            // Get the result from the query parameter in the URL
            var result = new URLSearchParams(window.location.search).get('result');
            // Display the result in the output frame
            var iframe=window.top.frames.document.getElementById("outputFrame");
            var innerDoc = iframe.contentDocument;
            if (iframe && result) innerDoc.getElementById("outputFrame").innerHTML = result;
        </script>
    </body>
    </html>
    

    test_bottom.html –> remove <script>....</script>

    flaskapp.py

    @app.route('/output')
    def output_page():
        return render_template('animal_top.html')
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search