Estoy tratando de obtener el valor de la casilla de verificación en Flask sin enviar.
Aquí está mi app.py:
from flask import Flask, render_template, request app = Flask(__name__) @app.route('/', methods=['GET', 'POST']) def index(): if request.form.get('c_check')=="0": print('success: 0') checked='' elif request.form.get('c_check')=="1": print('success: 1') checked='checked' return render_template('index.html')Aquí está mi JavaScript que alterna la casilla de verificación:
function hello() { if (document.querySelector('input').value=='0') { document.querySelector('input').value='1' console.log('value 1'); } else { document.querySelector('input').value='0' console.log('value 0'); } }Y aquí está mi index.html:
<form method="post" action=""> <div class="form-check form-switch"> <input class="form-check-input btn-lg" name="c_check" value="0" type="checkbox" role="switch" id="flexSwitchCheckChecked" onclick="hello()" > <label class="form-check-label btn-lg" for="flexSwitchCheckChecked"></label> <input type="submit"> </div> </form> <script src="{{url_for('static', filename= 'js/hello.js')}}"></script>Yo quiero
El código actual solo devuelve 1 cuando hago clic en el botón Enviar. La solución debería ser que elimine el botón de envío por completo y haga que Python escuche el cambio de valor y lo imprima en tiempo real.
Estoy abierto a la solución socketio, pero no sé cómo hacerlo.
Solo necesita cambiar el lado del cliente para esto; Usa AJAX. Aquí está el ejemplo más simple usando JavaScript puro:
function ajaxRequest() { const checked = document.getElementById("mycheckbox").checked; console.log("Sending data to the server that the checkbox is", checked); // Use the XMLHttpRequest API const xhttp = new XMLHttpRequest(); xhttp.onload = function() { console.log("Result sent to server!"); } xhttp.open("POST", "/", true); xhttp.send(); } <label for="mycheckbox">Check or uncheck this box:</label> <input id="mycheckbox" type="checkbox" onchange="ajaxRequest()" />Obviamente, el ejemplo no funcionará porque no hay un servidor, pero este es un ejemplo de AJAX con una casilla de verificación una vez que el usuario hace clic en una casilla de verificación.
Para hacer esto, querrá agregar un oyente a la entrada. El envío de un formulario con una actualización completa probablemente sería una experiencia de usuario deficiente, por lo que enviaremos una solicitud asíncrona con JS para enviar los datos a la ruta y luego leer los datos de la respuesta.
Aquí hay una demostración de prueba de concepto que usa JSON completamente, el estándar para AJAX hoy en día:
index.html : <body> <input type="checkbox" /> <div class="result"></div> <script> document .querySelector("input") .addEventListener("click", e => { fetch("http://127.0.0.1:5000/", { method: "POST", headers: { "Accept": "application/json", "Content-Type": "application/json" }, body: JSON.stringify({ c_check: Number(e.target.checked) }) }) .then(res => { if (!res.ok) { throw Error(res.status); } return res.json(); }) .then(({data: {val}}) => { console.log(val); const res = document.querySelector(".result"); res.innerText = `client got: ${val}`; }) .catch(err => console.error(err)) ; }) ; </script> </body>app.py : from flask import ( Flask, jsonify, render_template, request ) app = Flask(__name__) @app.route("/", methods=["GET", "POST"]) def index(): if request.method == "GET": return render_template("index.html") val = request.json.get("c_check") print(val) return jsonify({"data": {"val": val}}) if __name__ == "__main__": app.run(host="127.0.0.1", port=5000, debug=True)