How to update a wtf-form state upon UI state change?

Question

Here is my flow so far working with WTF forms and updating their state upon user activity:

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 correct way of working with WTF forms and updating variables such as form.colors in this case? I was wondering if I could simply update form.colors directly inside the "onchange" piece of js code.

Answer 1

I don't think there is one "correct" way in this case - correct way depends on what do you want to achieve.

A. If - for example - you do not want to mess with JavaScript for some reason and you don't mind reloading the page then you can do it as you did in your code example.

B. On the other hand if you just want to reload the page to change the form color then I would say it's an overhead and simple JS script would be more elegant and user-friendly in that case.

EDIT TO ANSWER COMMENT QUESTIONS:

Can you explain that thing about 'reload the page'?

When your browser communicates with server using standard HTTP methods (like GET and POST) to exchange data, then it must reload the page after obtaining response (which is an answer to your request) from the server.
On the other hand, if your page use AJAX (asynchronous JavaScript and XML) then it's not the case. Citing Wikipedia on the topic:

With Ajax, Web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows for Web pages, and by extension Web applications, to change content dynamically without the need to reload the entire page.

What do I loose in option 'A' if I decide to use JS and I don't reload the page?

Either way has its advantages and drawbacks and it's up to you to decide which is the way to go.

Citing this article:

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

Major Disadvantages of Ajax:
1. Bookmarking problem.
2. Very bad for SEO.
3. Screen readers can’t access ajax.
4. Only the modern browsers supports it and if javascript is not enabled at the user end, your site will look ugly.

Does using JS means it won't reload the page?
If you use Ajax to exchange data with server and JS to put results on your website, then yes - reload is not needed.

Going back to your code example - if you just want to change the form color for presentation reasons and it doesn't really matter for your application which color the form has, then there is no reason to do it server-side.