Here is my Python file
import random
from flask import Flask, render_template
from captcha.image import ImageCaptcha
from captcha.audio import AudioCaptcha
app = Flask(__name__)
@app.route('/')
def generateCaptcha():
return render_template('main.html')
@app.route('/getCaptcha', methods=['POST'])
def getCaptcha():
result_str_image = ''.join(
(random.choice('ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789') for i in range(5)))
image = ImageCaptcha(width=280, height=90)
imageData = image.generate(result_str_image)
image.write(result_str_image, result_str_image + '.png')
return result_str_image
if __name__ == "__main__":
app.run(debug=True)
And my HTML file
<!DOCTYPE HTML>
<html>
<head>
<title> Example </title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<link rel="shortcut icon" href="#">
</head>
<body>
<h1> Captcha Example </h1>
<div id="Captcha"></div>
<label> Enter the text from Captcha above </label>
<input type="text" id="CaptchaInput">
<br> <br>
<input type="button" value="Enter" id="CaptchaSubmit">
<input type="button" value="Reset" id="CaptchaReset">
<input type="button" value="Audio" id="CaptchaAudio">
<script>
var captchaValue;
$.ajax({
type: "POST",
url: "/getCaptcha",
data: captchaValue,
contentType:"application/text; charset=utf-8", // Declare the type of the data we're sending. Without this, Flask will misinterpret it as some other kind of data.
success: function(data){
console.log(captchaValue);
}
});
</script>
</body>
</html>
However, the captchaValue is always undefined, where am I messing up? This is my first time trying this. I am using a piece of code from Github to help but since they're doing something else, I'm confused as to where I messed up.
I am expecting
data: captchaValue
to update the value of captchaValue.
First of all you are not capturing the value you enter in your inputs, so please take a look on https://flask.palletsprojects.com/en/2.0.x/quickstart/ specially read The Request Object section. Basically all data you enter in your Flask app can be captured using the request.form object (which is a kind of read-only dict). However before you can do this work you must first enclose all your inputs inside a form tag, something like this:
<label> Enter the text from Captcha above </label>´
<form method="POST">
<input type="text" id="CaptchaInput">
...
</form>Note you should add the method parameter to make it work as it simplest way possible.
Then you must add a name parameter in all your inputs, you can use the same name you used in your id as
<input type="text" id="CaptchaInput" name="CaptchaInput">
Then in your Python code you can now call request.form['CaptchaInput'] (don't forget to import request library at the top!) to capture the value in Flask.
As per your Javascript code, you have never read the value from the input, so you must do something like: var captchaValue = document.getElementById("CaptchaInput").value;