How to update wtf form state when user interface state changes?

Question

Here my stream still works with WTF forms and updates their state when the user is active:

In my template.html , I have:

<form action="{{ url_for('page') }}" method="POST"> <select id="sel_id" name="name1" onchange="this.form.submit();"> ... </select> </form> 

... And in views.py I got:

 @app.route('/') @app.route('/process', methods=['GET', 'POST']) def process(): form = NoNameForm() if request.method == 'POST': if 'name1' in request.form: form.colors = int(request.form['name1']) 

Is this the right way to work with WTF forms and updating variables like form.colors in this case? I was wondering if I can just update form.colors directly inside the " onchange " js piece of code.

Answer 1

I do not think that in this case there is a correct one . The right way depends on what you want to achieve.

A. If - for example, you don’t want to somehow mess with JavaScript, and you don’t mind reloading the page, then you can do it the same way as in the code example.

B. On the other hand, if you just want to reload the page to change the color of the form, I would say that the overhead and a simple JS script will be more elegant and user-friendly in this case.

EDIT COMMENT QUESTIONS:

Can you explain this thing about "page reloading"?

When your browser interacts with the server using standard HTTP methods (for example, GET and POST) to exchange data, it should reload the page after receiving a response (which is the answer to your request) from the server.
On the other hand, if your page uses AJAX (asynchronous JavaScript and XML), then this is not the case. Quoting Wikipedia on the topic:

With Ajax, web applications can send and retrieve data from asynchronously (in the background) without interfering with the display and behavior of an existing page. By decoupling the data sharing layer from the presentation layer, Ajax allows Web pages and advanced web applications to change content dynamically, without having to reload the entire page.

What am I missing in option “A” if I decide to use JS and I do not reload the page?

In any case, it has its advantages and disadvantages, and you decide which way.

Quoting this article :

The main advantages of Ajax:
1. It makes things short and fast.
2. Get rid of page reloading. 3. Very useful for real-time applications.
4. Reduces server load and bandwidth.

The main disadvantages of Ajax:
1. Problems with the bookmark.
2. Very bad for SEO.
3. Screen readers cannot access ajax.
4. Only modern browsers are supported, and if javascript is not enabled at the end of the user, your site will look ugly.

Using JS means it won’t reload the page?
If you use Ajax to exchange data with the server and JS to post the results on your website, then yes - no reboot is required.

Returning to your code example - if you just want to change the color of the form to explain the presentation, and for your application it doesn't really matter for the color having the form, then there is no reason to do it on the server side.