Flask onchange event or need Javascript framework?

I used to build Microsoft Excel apps using VBA, and events like _Change, _Click,… I first switched to JavaScript and frameworks but I got lost with the asynchronous side. So I moved to Python and Flask, and I like it so much. But when I do frontend, it is hard to build dynamic forms because I dod’nt find nativelly my tags (document.getElementsBy in JavaScript) and events (onChange, onClick and other events) I used with VBA.

For instance, yesterday, I wanted to update the options in a SelectField depending on the value enterred by the user in a TextField. I was not able to do it only with Flask and Python, I needed to add a tag and JavaScript snippets:

    <script>

    //Get the controllers:
    let train_number = document.getElementsByClassName('train-number');
    let stops_list = document.getElementsByClassName('stops-list');

    //Add a listener:
    train_number[0].onkeyup = (e) => {
        //Clear stops_list:
        if (train_number[0].value == '') {
            stops_list[0].options.length = 0;
        }
        //If alphanumeric character:
        let charStr = String.fromCharCode(e.which || e.keyCode);
        if (/[a-z0-9]/i.test(charStr)) {
            //Clear stops_list:
            stops_list[0].options.length = 0;
            searched_train = train_number[0].value;
            //Requests for stations:
            fetch('/train/' + searched_train).then((response) => {
                response.json().then((data) => {
                    for (var i = 0; i < data.length; i++) {
                        //Create new option element
                        var opt = document.createElement('option');
                        // create text node to add to option element (opt)
                        opt.appendChild( document.createTextNode(data[i]) );
                        //Set value property of opt
                        opt.value = data[i]; 
                        //Add opt to end of select box (sel)
                        stops_list[0].add(opt); 
                    }
                })
            })
        }
    }

</script>

My question is: is there a way to build dynamic forms and views with only Flask or is it better to move to another framework? If it is better to change the framework, which one do you advice (simple, light, user-friendly, quick to learn, and, if possible, synchronous)?

Answer

You pretty much need JavaScript. (Technically, unless you need to support Internet Explorer, WebAssembly is also an option these days, but I don’t think it plays well with Python yet.)

Advice is not properly in the purview of Stack Overflow, but one possible framework option is Vue if you want something that claims to be less complex.

To learn about event-based JavaScript functions available in the browser, check out the Documents section of MDN’s Events Overview page.

---

In my limited understanding, Node.js is a back-end (ie server-side) technology, and Express is a framework that can be used with it to help with routing among other things (See: https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs). If you want to make a single-page application that handles routing on the front end (ie client side), that’s where something like Vue, React, or Angular might come in (Eg, see: https://www.educative.io/blog/react-angular-vue-comparison.)