ajax-form | HTML forms on performance-enhancing drugs | Form library

i have a submit button and a JavaScript. On click the button changes the state from active to inactive and a spinner animation is shown. I want to add to the script a timeout function. The button shall stop the animation and go back in active state after 3000 ms and show the normal submit button again. Here is my code:

I want to redirect to detail view after an update that uses ajax form submission.

Urls

i'm trying to show new select input contains (states) options, when user select specific option a (USA) country, and when select another country non (USA) don't show the states select options i want in this case still hidden.

Route

HTML PATCHING FORM

I am trying to send a file and two json objects to my Spring Boot backend with a multipart POST request but I always get a 415 http response. Here is a list of things that I already tried to do:

1. Send each object as a Blob file with an application/json content type as suggested here
2. Send each object as a String as suggested here
3. Add contentType: false and processData: false in the ajax request as suggested here
4. Use @RequestParam instead of @RequestPart in Spring Boot controller

What am I missing?

Here is the request:

I am currently developing a website for which I use a lot of modals with forms in them. The thing is, every time I enter invalid information in a form field and press the submit button, the modal just closes and there is no indication that the form was invalid.

I already know that there is the possibility of making an ajax request which sends the form data to another view which then responds with a JSONResponse that contains errors which can then be displayed(like shown in this article: https://realpython.com/django-and-ajax-form-submissions/). That would work but by doing that I would lose all benefits of django forms. Because I have to submit the form data as JSON, I cant use functions like form.is_valid.

So my question is: Is there a way to not refresh the site when a invalid form is submitted and displaying errors without having to send the data via JSON?

I have a form in a modal (bootstrap4 theme for a wordpress site) in php. After a user submits the form in this modal, the page "reloads" and the "Form submitted successfully" message replaces the form. This means that when a user clicks the button to open the modal again, there is no form there; just a success message. How do I prevent this behaviour? I want to "reset" the form for a user to a clean form so they can submit again and again each time. This is the site code in context: https://github.com/bettersg/mediaspin/blob/master/articlemodal.php

And this is the form itself:

I have reviewed several great Questions along the way, so many that I earned my badge for 40 votes in one day. But, nearly all Questions use a non-Vanilla dependency like jQuery or don't address my specific need. Here are two examples of wonderful, yet to-my-sorrow unrelated, Questions:

• Ajax Form submit with preventDefault (jQuery)

• preventDefault() on $.ajax complete (jQuery, and its pilgrimage of dup dups)

I'm surprised this Question has not been asked because I don't regard myself to be so imaginative. If this Question is already out there, I want to please open a Meta discussion on how to update that Question so searches can find it.

This is Vanilla JS, no dependencies.

The script uses preventDefault() to interrupt a form-submit button identified by id and call AJAX instead. AJAX works and changes content correctly. Then, the problem begins...

This AJAX responds with a replaced div containing the same form that preventDefault() interrupts. But, AJAX doesn't recognize that updated form-submit button after the AJAX response JS-alters the div containing that form with the same id.

1. HTML -> (success)
2. -> AJAX (success, first AJAX call)
3. AJAX -> (success, first AJAX response)
4. -> AJAX (broken, second AJAX call)

Note, I need to process this specific form. Other elements, including possible other forms, may be included in this div that AJAX changes.

index.php:

(AJAX adapted from MDN - Sending forms through JavaScript: Using FormData bound to a form element)

When Object is updated in vue component, the Dom is not updating, even though it is connected with v-bind.