I am building a system meant for internal employee use. On the page in question, I have a form on the left side and empty space on the right side which will be populated with a table of costs once the user submits the form to request a "price quote".

My problem is that I don't know how to indicate success while at the same time not reloading the page, since this is an ajax request and I do value speed.

While having no feedback system is fine for the 1st submit since the empty div will be populated, on subsequent submits the previous div will simply be replaced, and I imagine this will cause problems for users who perhaps fail to click the button and think they have received a new quote. I'm also concerned about users who will spam the submit button and cause unnecessary queries to be run. I currently have a loading animation on the submit button, but getting the quote is too fast to even see it unless the user's internet is slow.

The image below demonstrates what I'm talking about, sorry for the censoring.enter image description here

My current idea is to briefly flash some kind of green checkmark animation that flashes briefly at the middle of the screen. I'm having trouble searching up how to implement this since I don't even know what to call it. But I was also curious as to what you guys think and what is the standard for these kinds of operations. Should I just move the result of the query into a modal? Display a green flash message at the top of the screen that dissapears after 3 seconds? Change the text of the "Get Quote" submit button to say "Success!" or something like that?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.