Inline form events

You may want to execute some JavaScript when an inline form is added or removed in the admin change form. The formset:added and formset:removed events allow this. event.detail.formsetName is the formset the row belongs to. For the formset:added event, event.target is the newly added row.

In your custom change_form.html template, extend the admin_change_form_document_ready block and add the event listener code:

{% extends 'admin/change_form.html' %}
{% load static %}

{% block admin_change_form_document_ready %}
{{ block.super }}
<script src="{% static 'app/formset_handlers.js' %}"></script>
{% endblock %}

document.addEventListener('formset:added', (event) => {
    if (event.detail.formsetName == 'author_set') {
        // Do something
    }
});
document.addEventListener('formset:removed', (event) => {
    // Row removed
});

Two points to keep in mind:

• The JavaScript code must go in a template block if you are inheriting admin/change_form.html or it won’t be rendered in the final HTML.
• {{ block.super }} is added because Django’s admin_change_form_document_ready block contains JavaScript code to handle various operations in the change form and we need that to be rendered too.

function handleFormsetAdded(row, formsetName) {
    // Do something
}

$(document).on('formset:added', (event, $row, formsetName) => {
    if (event.detail && event.detail.formsetName) {
        // Django >= 4.1
        handleFormsetAdded(event.target, event.detail.formsetName)
    } else {
        // Django < 4.1, use $row and formsetName
        handleFormsetAdded($row.get(0), formsetName)
    }
})