Как использовать кнопку отправки для формы на другой странице в формате HTML

Question

Я использую бесплатную версию бассейна в качестве бэкэнда для своей формы, и после отправки она перенаправляет на страницу бассейна, но я хочу перенаправить на страницу счета.Поэтому я хочу создать кнопку отправки на странице счета.

Form.html

<form id="myform" action="https://usebasin.com/code" method="POST">
    <input name="name" />
    <input name="email" />
    <input name="number" />

    <a href="invoice.html">Proceed</a>
</form>

Invoice.html

<p>Invoice details</p>
<button for="myform"  type="submit">Submit</button>

Answer 1

Кнопка отправки в HTML всегда ссылается на форму, в которой она появляется. Таким образом, вы не можете отправить форму с помощью кнопки, которая находится где-то еще на странице или даже на отдельной странице, используя только HTML.

<a href="invoice.html">Proceed</a>, с другой стороны, загружает только новую страницу без отправки данных формы. И после того, как вы загрузили вторую страницу (invoice.html) таким образом, данные формы с первой страницы будут потеряны. (Если invoice.html не был открыт на другой вкладке, таким образом, вы, вероятно, могли бы получить данные формы с первой вкладки, используя JavaScript.)

Если вам нужно разделить форму на несколько страниц, вы можете отправить каждый шаг по отдельности на сервер или сохранить данные формы в локальном хранилище или в хранилище сеанса и отправить данные на сервер с помощью JS на последнем шаге / странице. .

Answer 2

Элемент <button> может иметь атрибут form, который будет соответствовать id из <form>, см .: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

<form id="some-id">
...inputs
</form>

<button form="some-id" type="submit">Submit</button>

Они оба должны быть на одной странице.

Answer 3

Это не тот способ, которым форма должна работать.Прочитайте эту статью в HTML-формах: https://www.w3schools.com/html/html_forms.asp

<form id="myform" action="YOUR_ADDRESS/invoice.html" method="POST">
    <input name="name" />
    <input name="email" />
    <input name="number" />
    <input type="submit" value="Send">
</form>

Таким образом, вы отправляете все параметры в файл invoice.html.