Im getting the request at the backened but unable to know the value. i tried many variations of request but nothing grants me the value of cars.
my flask file
import ssl
from flask import Flask, redirect, url_for, render_template, jsonify, request
from flask_dance.contrib.facebook import make_facebook_blueprint, facebook
from flask_dance.contrib.google import make_google_blueprint, google
app = Flask(__name__, static_folder='app', static_url_path="/app")
app.secret_key = "secret" # Replace this with your own secret!
@app.route('/appoint', methods=['GET', 'POST'])
def appoint(name='appoint'):
if request.method == 'POST':
data = request.get_data(as_text=True)
print(data)
return render_template("appoint.html")
if __name__ == '__main__':
context = ssl.SSLContext()
context.load_cert_chain('/etc/letsencrypt/live/annastudio.beauty/fullchain.pem', '/etc/letsencrypt/live/annastudio.beauty/privkey.pem')
app.run(host="0.0.0.0", port=443, ssl_context=context)
my ajax call and the inputs
<html>
<head>
</head>
<body>
<label for="cars">Choose a car:</label>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit" value="Submit" onclick="loadDoc()">
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("cars").innerHTML = this.responseText;
}
xhttp.open("POST", "https://www.annastudio.beauty/appoint", true);
xhttp.send();
}
</script>
</body>
</html>
I was expecting to get value of one of the cars.`I was able to use form but it has a refresh on page.
Edit: Thank you Jaromanda x this solves it
<html>
<head>
</head>
<body>
<label for="cars">Choose a car:</label>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit" value="Submit" onclick="loadDoc()">
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
const data = document.getElementById("cars").innerHTML;
xhttp.open("POST", "https://www.annastudio.beauty/appoint", true);
xhttp.send(data);
}
</script>
</body>
</html>
now it gets me all the options! how do I get only what the user selects?
edit:
<script>
var sel = document.getElementById("cars");
var text = sel.value;
