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*.

[![The Forms](https://i.stack.imgur.com/JPKUz.png)](https://i.stack.imgur.com/JPKUz.png)

**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: 
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.
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](https://i.stack.imgur.com/49vTy.png)](https://i.stack.imgur.com/49vTy.png)

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