---
title: "Penyesuaian JavaScript di admin"
version: 4.2
locale: id
source: https://docs.djangoproject.com/id/4.2/ref/contrib/admin/javascript/
canonical: https://djangodocs.dev/id/4.2/ref/contrib/admin/javascript/
---
# Penyesuaian JavaScript di admin

## Peristiwa-peristiwa formulir berderet

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.

> **Changed in Django 4.1**
>
> In older versions, the event was a `jQuery` event with `$row` and
> `formsetName` parameters. It is now a JavaScript `CustomEvent` with
> parameters set in `event.detail`.

Dalam cetakan `change_form.html` penyesuaian anda, perpanjang blok `admin_change_form_document_ready` dan tambah kode pendengar kejadian:

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

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

*`app/static/app/formset_handlers.js`*

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

Dua poin untuk diingat:

- Kode JavaScript harus berada di blok cetakan jika anda mewarisi `admin/change_form.html` atau itu tidak akan dibangun dalam HTML akhir.
- `{{ block.super }}` ditambahkan karena blok `admin_change_form_document_ready` Django mengandung kode JavaScript untuk mengangani beragam tindakan dalam formulir rubah dan kami butuh itu dibangun juga.

### Supporting versions of Django older than 4.1

If your event listener still has to support older versions of Django you have
to use jQuery to register your event listener. jQuery handles JavaScript events
but the reverse isn't true.

You could check for the presence of `event.detail.formsetName` and fall back
to the old listener signature as follows:

```javascript
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)
    }
})
```