How to apply add/save from modal window

Question

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.

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?

Answer 1

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.

Answer 2

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.

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