Кнопка «Отмена» в HTML-форме

Posted by obzor under HTML

Допустим, в форме есть поля, обязательные для заполнения, и пара кнопок: Сохранить и Отмена. Как реализовать кнопку «Отмена»?

Можно сделать переход на заданный URL без отправки формы, типа так:

<form action="..." method="post">
Обязательное поле: <input type="text" name="example" required autofocus><br>
<input type="submit" value="Сохранить">
<input type="button" value="Отмена" onclick="document.location.href='...'">
</form>

В принципе, такой прием работает. Но что, если при нажатии «Отмена» нам в любом случае надо выполнить некие действия, то есть надо, чтобы нажатая кнопка определялась на самом сервере? Можно сделать две кнопки submit:

<form action="..." method="post">
Обязательное поле: <input type="text" name="example" required autofocus><br>
<input type="submit" name="save" value="Сохранить">
<input type="submit" name="cancel" value="Отмена">
</form>

Теперь на сервере можно понять, какая из кнопок была нажата:

if ( isset($_POST["cancel"] ){
  // отменяем...
} else {
  // сохраняем...
}

Но тут есть проблема, так как у нас имеется обязательное (атрибут required) поле example. Браузер не даст отправить форму, если пользователь не заполнит это поле. И правильно, когда нажимаем кнопку «Сохранить», поле обязано быть заполнено.

НО! Когда нажимаем кнопку «Отмена», поле может быть пустым, тут-то нам проверка уже не нужна. Но браузер все равно не даст даже нажать отмену, пока не заполним это поле.

Так вот в итоге назрел вопрос: а как это обойти? Как сделать, чтобы при нажатии одной кнопки (Сохранить) была проверка обязательных полей, но при нажатии другой (Отмена) проверка не проводилась?

macomics

А если использовать у кнопки «отмена» formnovalidate

Valick

А зачем вообще нужна кнопка Отмена? Опиши саму её сущьность, при каких обстоятельствах её нужно нажимать? Может тут нужен type=»reset»?

Arigato

Да, такое решение устроит. Примерно так будет выглядеть код:

<form action="..." method="post">
Обязательное поле: <input type="text" name="example" required autofocus><br>
<input type="submit" name="save" value="Сохранить">
<input type="submit" formnovalidate name="cancel" value="Отмена">
</form>

reset сбрасывает поля, это другое. А кнопка «Отмена» нужна для отмены действия. Например, открываем какие-либо данные для редактирования и передумали их изменять. Внизу две кнопки: Сохранить и Отмена. Нажимаем «Отмена».

тема на форуме

Случайные статьи

• Использование нетипизированного указателя для передачи массива
• Как настроить адрес без указания на index.php?
• Dynamic
• Как закрепить Body при прокрутке (HTML и CSS)
• Прикрепить файл к письму
• Найти в тексте дату
• made in programmersforum 5
• Учебник по ассемблеру
• Как запретить клик правой кнопкой мыши в Cromium?
• Как сохранить файл из StringGrid без табуляций и переходов?