Коли ви будуєте веб-форму з кількома кнопками, кожна кнопка може потребувати відправлення форми на різні URL. Наприклад:

• Одна кнопка для завантаження PDF.
• Інша кнопка для завантаження зображень.

Є два способи вирішення цієї задачі:

1. Використовувати JavaScript з onclick, щоб змінити дію форми.
2. Використовувати HTML атрибут formaction для кожної кнопки.

Розглянемо обидва варіанти і вирішимо, який з них кращий.

Метод 1: Використання onclick та JavaScript

Ось приклад:

<form id="myForm" method="POST">
  <button type="submit" onclick="changeAction('download-pdf.php')">Завантажити PDF</button>
  <button type="submit" onclick="changeAction('download-images.php')">Завантажити зображення</button>
</form>

<script>
  function changeAction(url) {
    document.getElementById('myForm').action = url;
  }
</script>

Як це працює

• Функція onclick змінює action форми (URL, куди вона надсилається).
• Коли кнопка натискається, форма відправляється на новий URL.

Позитивні моменти

1. Гнучкість: Ви можете динамічно задавати URL за допомогою JavaScript.
2. Повторне використання: Одна функція JavaScript може обробляти кілька кнопок або форм.

Негативні моменти

1. Труднощі з читанням: Змішування HTML та JavaScript робить код складнішим для розуміння.
2. Більше помилок: Невеликі помилки в JavaScript можуть зламати форму.
3. Додаткова робота: Вам потрібен JavaScript навіть для простих завдань.

Метод 2: Використання formaction

Ось та сама форма з використанням formaction:

<form method="POST">
  <button type="submit" formaction="download-pdf.php">Завантажити PDF</button>
  <button type="submit" formaction="download-images.php">Завантажити зображення</button>
</form>

Як це працює

• Кожна кнопка має атрибут formaction, який вказує, куди відправляється форма, коли ця кнопка натискається.
• Не потрібно JavaScript.

Позитивні моменти

1. Простота та чистота: Не потрібно JavaScript — тільки HTML.
2. Легкість в налагодженні: Менше шансів на помилки, оскільки action знаходиться безпосередньо в кнопці.
3. Краще для початківців: Легше зрозуміти і використовувати.

Негативні моменти

1. Менше гнучкості: URL потрібно задати в HTML і їх не можна змінювати динамічно.
2. Повторення: Якщо кілька кнопок мають однакову дію, URL буде повторюватися.

Який підхід кращий?

| Функція | onclick (JavaScript) | formaction (HTML) |
| ------- | ---------------------- | ------------------- |
| Легкість використання | Складніше | Легше |
| Динамічні URL | Так | Ні |
| Чистота коду | Ні | Так |
| Схильність до помилок | Так | Ні |

Коли використовувати кожен з підходів

• Використовуйте onclick, коли:

  • Потрібно задати URL на основі чогось, що змінюється (наприклад, введення користувача).
  • У вас складна форма з багатьма умовами.

• Використовуйте formaction, коли:

  • URL є фіксованими і не потребують змін.
  • Ви хочете простий, чистий код, який легко підтримувати.

Краща практика

Якщо можливо, використовуйте formaction. Це простіше, менш схильне до помилок і зручніше у використанні. Використовуйте onclick, лише якщо вам дійсно потрібно змінювати дію динамічно.

Перекладено з: Title: Using onclick vs formaction for Forms with Multiple Buttons