→ → Что такое submit в html. Множественные submit для формы. Пример: Использование переключателей

Что такое submit в html. Множественные submit для формы. Пример: Использование переключателей

Этот вопрос входит, наверное, в ТОП10 вопросов на форумах:) Скорей всего это требование дизайнера или заказчика.

Итак, решение, на первый взгляд, простое:

<a href = "#" onclick = "document.getElementById("myform").submit(); return false;" > Отправить</ a >

Но тут же возникает (как ни странно:) следующий вопрос это, а если JS будет у посетителя отключен?

Изменим наш код на:

<input type = "submit" value = "Отправить" class = "link" / >

И добавим немного JS:

addEvent(window, "load" , windowLoad) ;

/* Кроссбраузерное добавление обработчика события */
function addEvent(obj, evType, fn) {
if (obj.addEventListener ) {
obj.addEventListener (evType, fn, false ) ;
} else if (obj.attachEvent ) {
obj.attachEvent ("on" + evType, fn) ;
}
}

/* Получаем родительскую форму для элемента */
function getParentForm(obj) {
while ((obj = obj.parentNode ) ) {
if (obj.nodeName == "FORM" ) {
break ;
}
}
return obj;
}

/* Ищем все submit-кнопки с классом link и заменяем их на ссылки */
function windowLoad() {
var buttons = document.getElementsByTagName ("input" ) ;
for (var i = 0; i < buttons.length ; i++ ) {


link.appendChild (document.createTextNode (buttons[ i] .getAttribute ("value" ) ) ) ;
link.setAttribute ("href" , "#" ) ;
addEvent(link, "click" , linkClick) ;

var parent = buttons[ i] .parentNode ;
parent.removeChild (buttons[ i] ) ;
parent.appendChild (link) ;
}
}
}

/* Отправляем форму по нажатию на ссылку */
function linkClick(e) {
var e = window.event || e;
var target = e.target || e.srcElement ;
var parentForm = getParentForm(target) ;
parentForm.submit () ;

if (window.event ) { e.returnValue = false ; } else { e.preventDefault () ; }
}

Теперь, если JS будет отключен, посетитель увидит вместо ссылки кнопку и все равно сможет отправить форму. Но мы на этом не остановимся. Заставим кнопку выглядеть как ссылка даже если отключен JS. Для того чтобы стилизировать кнопку изменим тег на button , а span нужен для того чтобы можно было в Firefox добавить подчеркивание текста.

<button type = "submit" class = "link" > Отправить</ span >

Также изменим соответственно часть JS.

var buttons = document.getElementsByTagName ("button" ) ;
for (var i = 0; i < buttons.length ; i++ ) {
if (buttons[ i] .getAttribute ("type" ) == "submit" && buttons[ i] .className == "link" ) {
var link = document.createElement ("a" ) ;
link.appendChild (document.createTextNode (buttons[ i] .firstChild .firstChild .nodeValue ) ) ;

CSS будет выглядеть следующим образом:

button.link {
/* Первые два свойства нужны чтобы убрать отступы в IE */
overflow : visible ;
width : auto ;

/* Убираем отступы */
margin : 0;
padding : 0;

/* Убираем все элементы оформления кнопки */
background : none ;
border : none ;

/* Обычный для ссылок курсор */
cursor : pointer ;
}

/* Ссылка обычно подчеркнута */
button.link span {
color : #00f ;
text-decoration : underline ;
}

Для Firefox можно еще добавить -moz-user-select: text; чтобы текст кнопки можно было выделять, но я сомневаюсь в такой надобности.

Остальные стили будут уже зависеть от конкретного дизайна.

Несколько примечаний:

  1. К кнопке не удастся применить псевдоклассы active, visited, а для IE6 и hover
  2. В IE6 не будут нормально работать несколько button для одной формы
  3. Без JS можно обойтись. Все зависит от того, насколько вам важна естественность ссылки

UPD
insa , не кроссбраузерный (читайте комментарии).

(обычно, поскольку пользователь нажал кнопку), пользовательский агент пытается отправить форму на сервер.

Стоимость

Если вы решили использовать элементы