Question posted in 
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
This was solved by using the target attribute in the form.
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
test_bottom.html –>
remove <script>....</script>flaskapp.py