I've got a web application where I want to be able to add qualifications to a user.

When I open the Edit Employee form there is an Add button and a Delete button. When clicking on the Add button, a Bootstrap modal opens, with another form in it, where you can choose the Qualification as well as a Date Of Issue.

The Forms

Question:

When or how should I save the data? Should/can I use Ajax to add the qualification to the user and refresh only the Qualification field in the main form, without having to submit both forms? Or should I only really add the qualification to the user if he/she clicks the Save button on the main form?

  • Just a hint: For a better user experience swap the Close and the Add button. The positive or more expected button should be the first one. So it is faster to access by keyboard users. – zuluk Oct 11 at 7:53
  • All right, will do, thanks! – Dunrar Oct 16 at 9:26
up vote 1 down vote accepted

You should save when the user knows they are saving the data.

In my experience, users think of forms as hierarchies with the saved data being at the top and the submit button linking to the next level up, so in your case:

Saved data -> Edit Employee -> Add Qualification

Added qualifications are sent to the employee form which can then be saved.

  • Would be nice to have some empirical data backing up that assumption but I agree, when a form is consistent and clear about this hierarchiy, it is very pleasant for the user – Big_Chair Oct 11 at 9:53

In your case I would recommend the following:

The user clicks on the Add button in the modal. Then write the created qualification into the element on your main page by AJAX and Show the user a yellow warning like You have unsaved data at the form. Please save your work.

enter image description here

Here you can find an example for a warning alert with Bootstrap: https://getbootstrap.com/docs/4.1/components/alerts/

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.