There are multiple issues here. As mentioned in the comments, I recommend working slowly and breaking the problem down into small pieces. Check that each piece works before rushing ahead and accumulating many errors that are hard to unravel.
Most of the problems are on the front-end, so you'll want to use the browser console to inspect errors. You can also use an HTML validator tool to make sure your HTML makes sense and catches typos like land=en
.
Since it sounds like you want to POST without a page refresh and you're using jQuery, many properties on your form are unnecessary:
onsubmit='letsgo()' action='/path/' method='post'
can all be removed. While you're at it, remove any unused noise like:
var test = document.getElementById('hey').value;
const xhr = new XMLHttpRequest();
and unnecessary ids and classes. These are just adding to the confusion. When things don't make sense and aren't working, try stripping out code rather than adding it.
"{{'https://file-encrypter.ashwinchera.repl.co/path/'}}"
should just be /path
so that it'll work on any domain such as a localhost. If you're working cross-origin, that's another story, but I don't think you are.
In the $.ajax
call, datas
is a typo. That should be data
.
const data = document.getElementById("hey").value
isn't necessary. If you're bothering to import jQuery, you might as well use it all the way: $("#hey").val()
. #hey
and letsgo
are unclear names that don't make it any easier to debug the app.
Use event.preventDefault()
to prevent the form submission.
On the backend, once again, remove any cruft and noise like the file read and import pdfkit, time
. It seems strange to add GET
to the list of accepted verbs for the /path
route (which is too generically-named, as is go
).
Since you're using form data, request.get_data()
can be request.form.get("data")
where "data"
is the key you want to retrieve from the parsed form.
Here's a minimal AJAX example to get you moving:
templates/index.html
:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>Welcome!</h1>
<p>Type to search the database.</p>
<form>
<input id="search-term">
<input type="submit" value="search">
</form>
<div id="result"></div>
<script>
$("form").submit(function (event) {
event.preventDefault();
var data = $("#search-term").val();
$.ajax({
type: "POST",
url: "search",
data: {data},
success: data => $("#result").text(data),
error: res => console.error(res),
});
});
</script>
</body>
</html>
app.py
:
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route("/search", methods=["POST"])
def search():
data = request.form.get("data")
print(data)
return data
@app.route("/")
def index():
return render_template("index.html")
if __name__ == "__main__":
app.run(host="127.0.0.1", port=8080, debug=True)
If you want to submit and render a new page, you don't need jQuery:
templates/index.html
:
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Welcome!</h1>
<p>Type to search the database.</p>
<form action="/" method="post">
<input name="search-term">
<input type="submit" value="search">
</form>
<div>{{search_term}}</div>
</body>
</html>
app.py
:
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route("/", methods=["GET", "POST"])
def index():
search_term = request.form.get("search-term", "")
return render_template("index.html", search_term=search_term)
if __name__ == "__main__":
app.run(host="127.0.0.1", port=8080, debug=True)
Or point to another page:
templates/index.html
:
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Welcome!</h1>
<p>Type to search the database.</p>
<form action="/search" method="post">
<input name="search-term">
<input type="submit" value="search">
</form>
</body>
</html>
templates/search.html
:
<!DOCTYPE html>
<html lang="en">
<body>
<p>You searched: '{{search_term}}'</p>
</body>
</html>
app.py
:
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route("/search", methods=["POST"])
def search():
search_term = request.form.get("search-term", "")
return render_template("search.html", search_term=search_term)
@app.route("/")
def index():
return render_template("index.html")
if __name__ == "__main__":
app.run(host="127.0.0.1", port=8080, debug=True)