Кнопка submit вне формы

[hike]

Здравствуйте! Хотелось бы получить ответ на вопрос, как с помощью стилей или других средств поместить кнопку submit в самом низу страницы по центру (над футером), но так, чтобы при ее нажатии на сервер отправлялись данные, введенные в форму в правой колонке страницы (двухколонный фиксированный макет). Никак не могу сообразить, пожалуйста, подскажите.

[Быколай]

Можно яваскриптом инициализировать событие отправки формы, привязать его к клику по любому элементу, в т.ч. и к кнопке вне формы.

[Searcher]

Еще вариант для html5: http://htmlbook.ru/html/button/form

[Быколай]

Еще вариант для html5: http://htmlbook.ru/html/button/form

Прикольно. Жаль только поддержка пока слабовата. Всё равно фикс придётся писать на js.

[Searcher]

Да, IE как всегда отстает и портит жизнь!

[Switch74]

если на странице имеется только одна форма, можно не париться и использовать form как wraper для всего сайта

но самое простое сделать js: обработчик onclick="form.submit();"

[hike]

Действительно, очень жаль, IE и Safari не поддерживают атрибут form тега button.

JavaScript пока знаю слабо, а вот сделать form оберткой - отличный выход. Спасибо.

Большое спасибо всем за ответы!

[br3t]

Попробуйте вариант со связкой невидимого сабмита и <label for="">

[hike]

Вариант со связкой через атрибут for не удался, а жаль.

[br3t]

hike, возможно, с данной вёрсткой не очень: http://jsfiddle.net/zgXUY/ - лучше скопипастить и запустить отдельно, но по перезагрузке странице видно, что отправка формы происходит

[Catherine]

hike, возможно, с данной вёрсткой не очень: http://jsfiddle.net/zgXUY/ - лучше скопипастить и запустить отдельно, но по перезагрузке странице видно, что отправка формы происходит

А насколько вообще такой вариант правильный? Я думала, что тег <label> должен размещаться внутри <form>, но валидацию пример с <label> вне контейнера <form> проходит.

[Justnewone]

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

[br3t]

Catherine, не нашёл упоминаний о том, что label обязательно должен находиться внутри form. Полагаю, что трюк с for придумали специально для тех случаев, когда label и связываемый элемент формы находятся далеко друг от друга. Вобщем, если работает, думаю, не стОит особо заморачиваться, баг это или фича

[Catherine]

Catherine, не нашёл упоминаний о том, что label обязательно должен находиться внутри form. Полагаю, что трюк с for придумали специально для тех случаев, когда label и связываемый элемент формы находятся далеко друг от друга. Вобщем, если работает, думаю, не стОит особо заморачиваться, баг это или фича

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

[SelenIT]

По общей логике, инпуты, а значит и лейблы, не обязаны находиться в форме - они могут быть частью чисто клиентского приложения, данные которого никуда сабмитить не надо (как минимум, в HTML4 это разрешалось - "The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces"). Так что решение не только остроумное, но и вполне надежное. Но лучше, конечно, продумывать логику страницы так, чтобы оторванных от родной формы контролов было как можно меньше!

[Catherine]

Спасибо за подробное объяснение!

[hike]

Вариант со связкой через атрибут for не удался, а жаль.

Да, получилось, но не всё.. IE8 не хочет прятать кнопку свойством opacity, а IE7 не дает оформлять метку. Только IE9 делает все как надо.

[hike]

Попробуйте вариант со связкой невидимого сабмита и <label for="">

hike, возможно, с данной вёрсткой не очень: http://jsfiddle.net/zgXUY/ - лучше скопипастить и запустить отдельно, но по перезагрузке странице видно, что отправка формы происходит

Скажите, а в этом варианте можно сделать, чтобы форма отправлялась по нажатию Enter, а не только по щелчку мыши?

[alexandr_v-vich]

Попробуйте вариант со связкой невидимого сабмита и <label for="">

hike, возможно, с данной вёрсткой не очень: http://jsfiddle.net/zgXUY/ - лучше скопипастить и запустить отдельно, но по перезагрузке странице видно, что отправка формы происходит

Скажите, а в этом варианте можно сделать, чтобы форма отправлялась по нажатию Enter, а не только по щелчку мыши?

По-моему это на автомате стоит.

Если нет, то JS

[alexandr_v-vich]

JS - Может не совсем точно, но по логике, вроде, так -

document.forms['name'].onkeypress=function(event){
    event = event || window.event;
    if(event.which == "13") {document.forms['name'].submit()}
}

Кстати, если добавить ещё на мышку, можно только этим и обойтись - без label и атрибута form.

Хотя, если на автомате (а по-моему это скорее всего так), можно и вообще без кнопки. Ну смотря от дизайна, конечно, как там всё. На край - дописать, чтоб жмякали Enter...

Edited March 20, 2012 by alexandr_v-vich

[br3t]

hike, отправка по Ентеру работает, конечно, если форма в фокусе

Для старых ИЕ прозрачность можно пофиксить методом тут, внизу

Также не забывайте про http://htmlbook.ru/css/visibility

[hike]

Да, вы правы, работает, но, увы, фокус на метку не попадает, либо tabindex - метка в фокусе, но enter не срабатывает. А как еще спрятать кнопку, кроме opacity?

hike, отправка по Ентеру работает, конечно, если форма в фокусе

Для старых ИЕ прозрачность можно пофиксить методом тут, внизу

Также не забывайте про http://htmlbook.ru/css/visibility

Спасибо за ответ.

[hike]

Решение моей проблемы (см. заголовок темы) на javascript подробно описано здесь

http://www.intuit.ru/department/internet/js/5/4.html

Edited May 4, 2012 by hike