Как Вы преодолеваете ограничение вложения HTML-формы?

Я знаю, что XHTML не поддерживает вложенные теги form, и я уже прочитал другие ответы здесь на Переполнении стека относительно этого предмета, но я все еще не выяснил изящное решение проблемы.

Некоторые говорят, что Вам не нужен он и что они не могут думать о сценарии, были, это будет необходимо. Ну, лично я не могу думать о сценарии, что мне не был нужен он.

Давайте посмотрим очень простой пример:

Вы делаете приложение блога, и у Вас есть форма с некоторыми полями для создания нового сообщения, и панель инструментов с "действиями" любят, "Сохраняют", "Удаляют", "Отмена".

Наша цель состоит в том, чтобы записать форму способом, которая не требует JavaScript, просто старая HTML-форма и кнопки отправки.

Так как URL действия определяется в Теге form а не в каждой отдельной кнопке отправки, наша единственная опция состоит в том, чтобы отправить на универсальный URL и затем запуститься, "если... затем... еще" определить название кнопки, которая была отправлена. Не очень изящный, но наш единственный выбор, так как мы не хотим полагаться на JavaScript.

Единственная проблема состоит в том, что нажатие "Delete", отправит ВСЕ поля формы на сервере даже при том, что единственной вещью, необходимой для этого действия, является Скрытый вход с постидентификатором. Не очень грандиозное предприятие в этом небольшом примере, но у меня есть формы с сотнями (так сказать) полей и вкладок в моих Приложениях отделов организации, которые (из-за требований) должны отправить все сразу, и в любом случае это кажется очень неэффективным и отходы. Если бы вложение формы поддерживалось, то я, по крайней мере, смог бы перенести "Удалить" кнопку отправки в своей собственной форме только с постидентификационным полем.

Можно сказать, "Просто реализуют "Удаление", поскольку ссылка вместо отправляет". Это было бы неправильно на таком количестве уровней, но самое главное потому что действиям Побочного эффекта нравится, "Удаляют" здесь, никогда не должен быть ПОЛУЧИТЬ запрос.

Таким образом, мой вопрос (особенно тем, которые говорят, что не должны были формировать вложение) - то, Что ВЫ делаете? Есть ли какое-либо изящное решение, которое я пропускаю, или нижняя строка, действительно "Или потребовать JavaScript или отправляют все"?

196
задан Peter Mortensen 14 July 2019 в 11:01
поделиться

5 ответов

Я реализовал бы это точно, как Вы описали: отправьте все серверу и сделайте простое, если/еще проверить, какая кнопка была нажата.

И затем я реализовал бы вызов JavaScript, набрасывающийся на onsubmit событие формы, которое проверит, прежде чем форма была отправлена, и только отправьте, соответствующие данные к серверу (возможно через вторую форму на странице с идентификатором должен был обработать вещь как скрытый вход или обновить местоположение страницы с данными, в которых Вы нуждаетесь, передал как ПОЛУЧИТЬ запрос, или сделайте сообщение Ajax к серверу, или...).

Этот способ, которым люди без JavaScript в состоянии использовать форму очень хорошо, но загрузка сервера смещается, потому что люди, у которых действительно есть JavaScript, только отправляют единственную часть необходимых данных. Получение себя сфокусировало только на поддержке той или другого действительно пределы Ваши опции излишне.

, С другой стороны, если Вы работаете позади корпоративного брандмауэра или чему-то и все отключили JavaScript, Вы могли бы хотеть сделать две формы и работать некоторое волшебство CSS сделать, это быть похожим на удалить кнопку является часть первой формы.

53
ответ дан One Crayon 23 November 2019 в 05:19
поделиться

Если Вы действительно не хотите использовать несколько форм (как Jason предполагает), то используйте кнопки и onclick обработчики.

<form id='form' name='form' action='path/to/add/edit/blog' method='post'>
    <textarea name='message' id='message'>Blog message here</textarea>
    <input type='submit' id='save' value='Save'>
</form>
<button id='delete'>Delete</button>
<button id='cancel'>Cancel</button>

И затем в JavaScript (я использую jQuery здесь для легкости) (даже при том, что это - симпатичное излишество для добавления некоторых onclick обработчиков)

$('#delete').click( function() {
   document.location = 'path/to/delete/post/id'; 
});
$('#cancel').click( function() {
   document.location = '/home/index';
});

Также я знаю, это сделает половину страницы не, работают без JavaScript.

-1
ответ дан Pim Jager 23 November 2019 в 05:19
поделиться

Одним путем я сделал бы, это без JavaScript должно будет добавить ряд переключателей, которые определяют действие, которое будет взято:

  • Обновление
  • Удаляет
  • Безотносительно

Тогда, сценарий действия принял бы различные меры в зависимости от значения набора переключателя.

Иначе должен был бы поместить две формы на странице, как Вы предположили, просто не вложенный. Расположением может быть трудно управлять хотя:

<form name="editform" action="the_action_url"  method="post">
   <input type="hidden" name="task" value="update" />
   <input type="text" name="foo" />
   <input type="submit" name="save" value="Save" />
</form>

<form name="delform" action="the_action_url"  method="post">
   <input type="hidden" name="task" value="delete" />
   <input type="hidden" name="post_id" value="5" />
   <input type="submit" name="delete" value="Delete" />
</form>

Используя скрытое поле "задачи" в сценарии обработки для ветвления соответственно.

2
ответ дан Tim Cooper 23 November 2019 в 05:19
поделиться

Я думаю право Jason. Если Ваш "Удалять" действие минимальный, заставьте это быть в форме отдельно и выровняйте ее с другими кнопками, чтобы заставить интерфейс быть похожим на объединенную форму того, даже если это не.

Или, конечно, перепроектируют Ваш интерфейс и позволяют людям удалить где-то в другом месте полностью, который не требует, чтобы они видели enormo-форму вообще.

4
ответ дан AmbroseChapel 23 November 2019 в 05:19
поделиться

у Вас могут быть формы рядом на странице, но не вложенные. тогда используйте CSS для составления всей симпатичной строки кнопок?

<form method="post" action="delete_processing_page">
   <input type="hidden" name="id" value="foo" />
   <input type="submit" value="delete" class="css_makes_me_pretty" />
</form>

<form method="post" action="add_edit_processing_page">
   <input type="text" name="foo1"  />
   <input type="text" name="foo2"  />
   <input type="text" name="foo3"  />
   ...
   <input type="submit" value="post/edit" class="css_makes_me_pretty" />
</form>
16
ответ дан Paul D. Waite 23 November 2019 в 05:19
поделиться
Другие вопросы по тегам:

Похожие вопросы: