Soy nuevo en wtforms y matraz. Estoy tratando de hacer que cuando un usuario cambie los botones de opción, el texto cambie. Sin embargo actualmente no funciona el onchange, onclick tampoco y cuando lo elimino aparece el texto pero no cambia nada cuando se cambian los botones y sigue igual.
{{ wtf.form_field(form.doc, class="form-control", onchange="myFunction()") }} </div> <p id="demo"></p> <script> function myFunction(){ if (document.getElementById('doc-0').checked) { value = document.getElementById('doc-0').value; document.getElementById("demo").innerHTML = "You selected: " + value; } else if ( document.getElementById('doc-1').checked) { rate_value = document.getElementById('doc-1').value; document.getElementById("demo").innerHTML = "You selected: " + value; } else if (document.getElementById('doc-2').checked) { rate_value = document.getElementById('doc-2').value; document.getElementById("demo").innerHTML = "You selected:" + value; } else { document.getElementById("demo").innerHTML = "You selected: NOTHING" ; } } </script>Alguien podría indicarme que estoy haciendo mal y que debo hacer. ¡Muchas gracias por la ayuda!
Ya casi estás ahí.
Un wtforms.RadioField consta de varios campos de entrada. Se debe registrar manualmente un detector de eventos para cada uno de estos campos de entrada. Recomiendo un bloque de script separado para esto.
{% extends "bootstrap/base.html" %} {% import "bootstrap/wtf.html" as wtf %} {% block content %} <div class="container"> <form class="form form-horizontal" method="post" role="form"> {{ form.hidden_tag() }} {{ wtf.form_errors(form, hiddens="only") }} {{ form.doc.label }} {{ wtf.form_field(form.doc) }} </form> <output id="result">You selected nothing.</output> </div> {% endblock %} {% block scripts %} {{super()}} <script type="text/javascript"> (() => { // Select all input fields by name and iterate over them. const elems = document.querySelectorAll('input[name="doc"]'); elems.forEach(elem => { // Register an event listener for the change event. elem.addEventListener('change', evt => { // Update the text as soon as there is a change. const value = evt.target.value; const label = evt.target.parentElement.textContent.trim(); const output = document.getElementById('result'); output.innerHTML = `You selected ${label} (${value}).`; }); }); })(); </script> {% endblock %}