Атрибут formaction тега <input> — своя адреса обробника

HTML

<p>Дві кнопки відправлення однієї форми. У першої свій <code>formaction</code>, тож запит піде не туди, куди вказує <code>action</code> форми.</p>

<form id="order" action="/order/pay" method="post">
  <label for="city">Місто:</label><br>
  <input type="text" id="city" name="city" value="Львів"><br>

  <label for="count">Кількість:</label><br>
  <input type="number" id="count" name="count" value="2"><br><br>

  <input type="submit" value="Порахувати доставку" formaction="/order/delivery">
  <input type="submit" value="Оплатити">
</form>

<p id="text">Натисніть кнопку.</p>

CSS

label {
  font-weight: bold;
}

input,
textarea {
  width: 20em;
  padding: 4px;
}

#text {
  margin-top: 16px;
  padding: 8px;
  background: #f1f5f5;
  border-left: 3px solid #99aaaa;
  font-family: monospace;
  white-space: pre-line;
}

JS

// Рамка прикладу має sandbox без allow-forms, тож справжня відправка тут
// неможлива, а подія submit навіть не настає. Скасовуємо відправку на кліку
// і показуємо адресу, яку переглядач узяв би для запиту.
const form = document.getElementById('order');
const out = document.getElementById('text');

form.addEventListener('click', (event) => {
  const button = event.target;
  if (!button.matches('input[type="submit"]')) {
    return;
  }

  event.preventDefault();

  const action = button.getAttribute('formaction') || form.getAttribute('action');
  const data = new URLSearchParams(new FormData(form)).toString();

  out.textContent = form.method.toUpperCase() + ' ' + action + '\n' + data;
});

HTML

<form action="/stattia/zberegty" method="post">
    <p><label>Заголовок <input type="text" name="title" value="Чернетка"></label></p>
    <p><label>Текст <textarea name="body" rows="2" cols="30">…</textarea></label></p>

    <p><button type="submit">Зберегти</button></p>
    <p><button type="submit" formaction="/stattia/vydalyty">Видалити</button></p>
    <p><button type="submit" formaction="/stattia/pereglyad" formtarget="_blank">Попередній перегляд</button></p>
    <p><button type="submit" formaction="/stattia/chernetka" formnovalidate>Зберегти чернетку</button></p>
    <p><button type="submit" formaction="">Порожнє значення</button></p>
    <p><button type="button" formaction="/stattia/vydalyty">Та сама адреса, але type="button"</button></p>
</form>

CSS

form p {
    margin: 0 0 10px;
}

label {
    font-weight: 600;
}

input[type="text"],
textarea {
    font: inherit;
    padding: 4px;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
    vertical-align: top;
}

button {
    font: inherit;
    min-width: 230px;
    padding: 5px 10px;
    border: 2px solid #b9c6d8;
    border-radius: 5px;
    background: #f6f9ff;
    text-align: left;
}

button::after {
    margin-left: 12px;
    font-family: ui-monospace, monospace;
    font-weight: 600;
}

button[type="submit"]:not([formaction])::after {
    content: "піде на адресу форми: /stattia/zberegty";
    color: #5a6472;
}

button[type="submit"][formaction]:not([formaction=""])::after {
    content: "піде на " attr(formaction);
    color: #1b6b33;
}

button[type="submit"][formaction=""]::after {
    content: "піде на адресу цієї ж сторінки, а не форми";
    color: #b06a00;
}

button[type="submit"][formnovalidate]::before {
    content: "без перевірки полів → ";
    color: #884ea0;
    font-family: ui-monospace, monospace;
    font-weight: 600;
}

button[type="button"]::after {
    content: "нікуди не піде: кнопка не надсилає форму";
    color: #d64545;
}