Consider the following sample html template,
<html><body><input type="radio" name="x">x</input><br><input type="radio" name="y">y</input><br><form name="form1"> Form1... </form><form name="form2"> Form2... </form></body>
</html>
The flask code for rendering the template,
from flask import (Flask, render_template)app = Flask(__name__)@app.route('/')
def main():return render_template('sample.html')
Once the template is rendered by flask, I would like to show form1 if x radio button is checked and form2 if y radio button is check. Is it possible to do so using jinja templates syntax ?
Something similar to this
<html><body><input type="radio" name="x">x</input><br><input type="radio" name="y">y</input><br>{% if x %}<form name="form1"> Form1... </form>{% elif y %}<form name="form2"> Form2... </form>{% else %}Something...{% endif %}</body>
</html>
Also is there something similar to document.getElementById() in jinja templates ?
Templating languages like Jinja work with backend input only. They serve to render the initial HTML.
To do active control of the page after it has been loaded, you will want to use javascript (and a tiny bit of css).
First you will need a css class that tells a form to stay out of view until you decide to show it with the display: none property. Lets call this class "hidden". Your css would look something like
.hidden {display: none;
}
Secondly, for both forms to start hidden, you will need to add that class to their HTML declaration, like:
<form class="hidden" name="form1"> Form1... </form>
<form class="hidden" name="form2"> Form2... </form>
You will then want to add Javascript listeners to each of the radio buttons. The onchange event is ideal for this situation. You will want to remove or add that "hidden" class to the correct form when either of the radio buttons changes state. Here I use the "checked" property of the buttons to see if they were just changed to the ON state or the OFF state:
radioX.addEventListener('change',(event)=>{if (event.target.checked){form1.classList.remove("hidden");form2.classList.add("hidden");} else {form1.classList.add("hidden");form2.classList.remove("hidden");}
});
Finally your whole HTML file would look something like :
<html>
<head><style>.hidden{display:none;}</style>
</head>
<body><input id="radio-x" type="radio" name="form-toggle">x</input><br><input id="radio-y" type="radio" name="form-toggle">y</input><br><form class="hidden" name="form1"> Form1... </form><form class="hidden" name="form2"> Form2... </form><script>const form1 = document.querySelector("form[name='form1']");const form2 = document.querySelector("form[name='form2']");document.querySelector('#radio-x').addEventListener('change',(event)=>{if (event.target.checked){form1.classList.remove("hidden");form2.classList.add("hidden");} else {form1.classList.add("hidden");form2.classList.remove("hidden");}});document.querySelector('#radio-y').addEventListener('change',(event)=>{if (event.target.checked){form1.classList.add("hidden");form2.classList.remove("hidden");} else {form1.classList.remove("hidden");form2.classList.add("hidden");}});</script>
</body>
</html>