войти зарегистрироваться

Web-разработка whois

индекс
184,85

Как отправить форму по нажатию на ссылку?

Этот вопрос входит, наверное, в ТОП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++) {
  if (buttons[i].getAttribute('type') == 'submit' && buttons[i].className == 'link') {
   var link = document.createElement('a');
   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>Отправить</span></button>


Также изменим соответственно часть 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 предложил еще один очень хороший вариант, единственный минус которого в том, что label не сможет получить фокус.

<form>
<input type="text" name="a" />
<input type="submit" id="push-me" style="display:none" />
</form>
 
<label for="push-me">fake submit</label>


UPD2
К сожалению, вариант, предложенный insa, не кроссбраузерный (читайте комментарии).

Ссылки по теме:
  1. HTML <button> Test
  2. Styling buttons to look like links


Рабочий пример можно посмотреть здесь.
+16
27 июля 2009, 17:52
108
Tokolist

комментарии (141)

  • Или я чего-то не понял, или вы таки шаманите с js исходя из того, что этот самый js у пользователся отключен?
    • Я вот кстати тоже после строки с addEvent(window, 'load', windowLoad); не понял что хотел сказать автор.
      • Хотел сказать, что этот код сработает только если js включен, а если нет, то будет просто кнопка.
        • А зачем оставлять код, который будет работать только если JS включен если пример с выключенным JS удовлетворяет всем потребностям?
        • Замоскировать средствами CSS кнопку под ссылку и не замарачиваться…
          или эту

          или эту

          • Парсер съел

            < button type = submit > </button >
            < input type = submit / >
          • Вообще, делать кнопки, выглядящие как ссылки (и ссылки, ведущие себя как нопки) − путать пользователя и противоречит всем принципам юзабилити.

            Правильнее предлагать заказчиу или дизайнеру почитать Раскина и Купера прежде чем лепить такие «шедевры».
            • Вы узко мыслите.

              Форма — это не только набор полей ввода. Она может быть целиком невидимой и нужной только лишь для технической реализации задачи (и борьбе со сложным и неудобным решением, которое получается если обойтись без нее).
              • Такая невидимая форма замечательно отправляется методом submit(), для этого 2 страницы кода не требуется.

                К тому же, мое замечание касалось внешнего вида и поведения псевдо-кнопки, а не ее технической реализации.
                • Мне казалось статья про методы БЕЗ включенного Javascript.
    • По умолчанию в html кнопки, а js заменяет их на ссылки. Т.е. если отключен js кнопки так и останутся и не потеряется функционал формы. Но и эти кнопки мы стилизируем под ссылки, чтобы не только не потерять функционал, но и максимально сохранить дизайн.

      Как я написал в конце топика, без js можно и обойтись оставив только стилизированную кнопку, но у пользователей с включенным js не будет настоящей ссылки.

      Я привел все возможные варианты решения. Использовать ли их все вместе или по отдельности уже зависит от конкретной ситуации.
    • Только полный идиот мог составить такое требование… а потом ещё попросить адаптировать под людей без js.

      Нарисуйте ссылку и сделайте type=image!

      А в будущем (ну, когда с деньгами проблем не будет) сразу посылайте таких нахер, т.к. по ходу дальнейшей работы они выдадут не один подобный перл (not perl!).
  • А чего нельзя к этой вашей ссылке из первого примера просто добавить input type=submit и прятать его тем же яваскриптом?
    • Если я правильно понял, то Вы имеете ввиду замену input на button и span?
      Тогда не удастся добавить подчеркивание (если оно необходимо) в Firefox в стандартном режиме.
      • Я имею ввиду (псевдокод)

        Отправить
        <script>
        $('#submit').hide();
        $('#a').show();
        </script>

        С другой стороны, вы где-то так и предлагаете, только усложненно.
        • ну да, парсер-лох
        • Теперь понял :)

          Можно и так, но прописывать в html постоянно и кнопку и ссылку лень (двигатель прогресса) плюс семантика и все такое :), а так за нас все делает js :)
  • Что это входит в топ10 вопросов на форумах — вряд ли. По мне так и в топ100 не войдёт.
    • Возможно я немножко утрировал :), но довольно часто :)
  • я думаю есть решение в тысячу раз элегантнее, чем предложенное :) Я даже почти уверен, что кто-то его напишет в комментах
    • Вы не про событие onsubmit случайненько? :-)
  • Не знаю, уместен ли вопрос о том, часто ли вы взаимодействуете с пользователями у которых отключен JS? Я думаю, скорее это какие нибудь человечки, которые сидят, каким нибудь Web Developer'ом отрубают жс и с ухмылкой говорят: «Аца! Сайт — УГ». Помоему сейчас вопрос о том включен ли JS у пользователя, или же нет, стоит все реже и реже. Хотя конечно стоит уделять внимание и этому аспекту ( хоть и влом=) )
    • Когда я говорю так же, как говорите вы, мой друг меня поправляет, что некоторые пользователи используют мобильные устройства, на которых нет поддержки Javascript или она умышленно отключена. Но что-то мне подсказывает, что таких пользователей довольно мало.
      • Ну в общем то я согласен с Вами. Дело в том, что если у вас даже какой нибудь простенький телефон возрастом не больше года, то скорее всего что он уже что то, да и может. А чтобы зайти почитать /live или баш — особо скриптов не надо. А телефоны, которые выпускают сейчас, да они блин мощнее моего ноутбука=)
      • Для таких случаев, думаю просто нужно делать мобильную версию сайта. Как ни крути, а люди в большей массе все равно не будет использовать телефон для работы со сложными системами. В основном это прочитать свежие новости и оставить пару комментариев. Но опять же, все упирается в «лень», средства и желания разработчиков.
      • очень даже много, и будет ещё больше.
        Например Opera Mini это ~ 7% рунета, а на ней свет клином тоже не сошёлся есть и другие моб. устройства.
        • Opera Mini не выполняет Javascript?
          • ограниченно и почти всё — на стороне сервера.
            т.е. чтоб допустим клик на кнопку «показать комментарии» перезагрузит заново всю страницу и в уже перезагруженной покажет эти комментарии.

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

      Но поставленная задача имеет право жить, поэтому ждем _красивое_ решение :)
      • По-моему правильное решение. Нельзя же в самом деле в наше-то время продумывать варианты мало того под ИЕ6, так еще и без JS и т.д. Пользователь хочет, что бы было красиво и юзабельно, но при этом еще и под мониторы со шрифтом Брайля, консольные браузеры и мобильные устройства всех видов. Нельзя же в самом деле стоять на месте и писать по стандартам 20-и летней давности.

        Впрочем решение приведенное в статье, хотя и хитрый хак, но весьма и весьма :)
        • > Пользователь хочет, что бы было красиво и юзабельно, но при этом еще и под мониторы со шрифтом Брайля, консольные браузеры и мобильные устройства всех видов.

          Пользователь ценит качество, удивительно, правда?
          • Нет, вовсе не удивительно. Но лично я считаю качеством то, что хорошо и просто работает в своей нише, пусть и не мега универсальной, чем аморфное нечто, что открывается даже на терминалах с перфокартами выдавая на выходе печатный вариант своего дизайна и функционала и ожидая на входе перфорированную карту с дырками в позиции 4:8, 15:16 и 23:42, образно выражаясь.

            Адаптироваться под рынок нужно и правильно, но доходить до крайностей убивая на разработку простого продукта в десять раз больше времени, что бы я мог открывать ваш мегасайт на своем полудохлом Сименсе, простите, это загиб.
            • Дык тут многое зависит от уровня разработчика, один верстает кое-как, так что в какой-нибудь Опере все ползет во все стороны, и постоянно все приходится исправлять, а другой нормально. при этом без удорожания в 10 раз, он просто так умеет. И второй вариант оказывается даже иногда выгоднее, так как например с выходом Хрома не придется лазать по всем разделам сайта, чтобы исправить баги. (это такой выдуманный пример :) ).

              Понятно, что специально «писать сайт под перфокарты» не надо, если хотя бы делать все качественно, это имеет свои преимущества. Например, если вы забьете на пользователей без скрипта, вы можете заодно поставить палки в колеса гугловскому боту, ну и так далее.

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

        Приведите пример такой функциональности. Мне кажется Вы прячете свою лень за «невозможностью».
        ps: динамических
    • Есть такая вещь как «Graceful Degradation». Да Вы знаете о ней наверняка. Реализуется проще простого — у кнопки или ссылки есть URL «неаяксового запроса», а при включенном JS на неё вешается событие… В итоге никто не в накладе, теоретически…
      • НЛО прилетело и опубликовало эту надпись здесь.
    • Почему-то в таких случаях всегда говорят про людей, которые отключают у себя js. И про мобильные клиенты еще. А ведь js может по каким-то причинам просто не загрузиться.

      Медленный/нестабильный канал, ошибка в скриптах, неправильное кеширование, кривой прокси-сервер в корпоративной сети и тд. Вот для таких случаев тоже оч полезно иметь сайт, который будет продолжать работать без js.

      Дело в том, что в случаях «отключил js» и «вышел в нет с мобильника» люди делают это осознанно, и как-бы сами виноваты. Поэтому как-бы можно сайт для них не вытачивать, сами разберутся. А вот в случае «js не догрузился» пользователи обычно уже ни в чем не виноваты и поделать ничего не могут, выручить может только предусмотрительный разработчик на белом коне с graceful degradation.

      Поэтому я за то, чтобы не забивать на поддержку людей без js.

      • давайте еще заречемся на людей у которых не то, что js а и сайт недогрузился, будем например сверху страницы большими красными буквами писать «проверяйте наличие контрольной надписи внизу страницы. без наличия контрольной надписи информация на сайте считается недействительной».
      • Но! Я совершенно не говорю о том, что нужно «выбросить» ту часть пользователей, у которых по той или иной причине не срабатывает скрипт. Я говорю лишь о том, что медленные каналы, ошибки или какие бы то ни было причины, прерятствующие выполнению скриптов на странице, уходят потихоньку в прошлое. И, тем более, о каких «ошибках в скриптах, неправильном кешировании» может идти речь, когда мы говорим о«document.getElementById('myform').submit()» =)
        • А как неправильное кеширование зависти от Вашего документ.гет_эдемент_бай_ид?
          Кеширование — это в настройках сервера. Например, отдастся клиенту старая версия странички вдруг. Из-за излишне агрессивно настроенного reverse proxy. Бывает такое на shared-хостингах. Или с http-хидерами перемудрит кто-нибудь. И скрипт какой-нибудь (не обязательно обработчик онСабмит, а что-нибудь еще) завершится с ошибкой из-за несовпадения его ожиданий по части html кода с тем, что есть.

          Он может завершиться с ошибкой и из-за какого-нибудь кривого браузера. Или просто потому, что код кривой и где-то не работает, так тоже бывает, живем мы не в идеальном мире. Выберет, например, getElementById что-нибудь с name=myform вместо id=myform в IE. И у этой фигни с name=myform не будет метода submit(), и все упадет. Гипотетически такая возможность есть даже в этом элементарном примере. Причин ошибок в js может быть куча, от кривых рук разработчика до баннерорезалок, фаерволов и проксей на публичных точках wi-fi. При этом выполнение js на странице остановится. Причем часто не только того скрипта, где ошибка, а вообще всего js.

          Особенность клиентской части в том, что ее ведь не проконтролируешь, и там много всякой дикости случается. Такие ситуации в прошлое вовсе не уходят. Быть может, даже наоборот — чем больше js на странице, тем более вероятно, что где-то в нем ошибка.
    • Я отрубаю JS, часто мне надо просто открыть сайт из гугля и прочесть нужную мне инфу инфу, а ждать дополнительно пока загрузится 120 Кб несжатого jQuery желания нет (каким же надо быть идиотом чтобы совать такие файлы в заголовок стрнаицы). Да и вообще, сайт должен грузиться за 1-2с (как это у меня и происходит), а не дольше, как это бывает у тех кто не умеет настроить свой браузер :)

      Также нет желания смотреть рекламу и убогие попытки студентов-вебмастеров выпендриться, установив какой нибудь эффект к jQuery.

      :)

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

          Ага, у меня тоже иногда ощущение что никому кроме написавших это школьников, это никому не нужно. За флешевые вставки вообще руки отрывать надо, кроме авторов, они никому не нужны. Такие сайты, как например artlebedev.ru как-то умудряются работать без скриптов и флеша.

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

          Зачем нужен яваскрипт, чтобы прочесть текст, или отправить комменатрий? Мне не надо чтобы форма комментария вылетала и переливалась всеми цветами. Жаль что даже авторы того же Хабра этого не понимают, обвешали сайт кучей кое-как написанных скриптов, в результате постоянно надписи типа «Some error. We know», или зависания. Не, если вы говорите о таком «функционале», я как-нибудь без него обойдусь.
          • Зачем нужен яваскрипт, чтобы прочесть текст, или отправить комменатрий?

            Чтобы сделать это с удобством.
            Мне вообще не понятно, на какие это сайты Вы ходите, где сделанные школьниками формы переливаются цветами. Может лучше прямо скажите — мешает popup на порнухе и все встанет на свои места.

            Жаль что даже авторы того же Хабра этого не понимают, обвешали сайт кучей кое-как написанных скриптов, в результате постоянно надписи типа «Some error. We know», или зависания.

            Во-первых, приведите пример кода, написанного «кое-как».
            Во-вторых, Вы за своими эмоциями начинаете говорить чепуху: «Some error» происходит на сервере, причем тут js? Или Вам приятнее уйти на страницу 500?
            • > Во-первых, приведите пример кода, написанного «кое-как».

              загляните в любой хаброJSник — код написан именно «кое-как», особенно там не не скопитырен, а написан самостоятельно.
          • «Только ситхи все возводят в абсолют» =)
            Вы знаете, иногда структурированность и локоничность, безусловно, — отличный способ преподнести контент определенного содержания конечному пользователю. Но иногда бывают такие случаи, вы знаете, от балды пример совершенно, не заходил — не знаю, какой нибудь диснеевский сайт или сайт там, ну не знаю, да майспэйс, с которого у меня сейчас музычка тянется какая то, да любой, более менее развлекательный ресурс, в них во всех есть какой нибудь флэш плэер в котором крутится какая нибудь фановая музычка (без которой конечно же можно обойтись, но так интересней). Или, о точно, пасхалки во флэшках, весело и непринужденно. И ведь без скриптов никуда.

            В общем идея не в том, что эти все флэшки или скрипты «написанные школьниками» — это, не спорю, может в некоторых случаях и мозолит глаз обычных обывателей, как я и Вы, но когда это вписывается в дизайн или удобно по функционалу, признайте, не будьте ханжой, это красиво и удобно=)

            Кстати, возвращаясь к Вашему упоменанию artlebedev'у: у них в бизнес линче вроде постраничная навигация (помимо обычных хтмлных ссылок), скриптово работает, хотя это может и совершенно «не нужно, есть ссылки» (обойдемся без пруфлинков, все и так знают). И более того, даже там создатели не потрудились запихать этот навигационный блок в noscript.

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

              А вот мания ставить флешку в шапку сайта к примеру, «чтоб блестело» — дурь.

              > но когда это вписывается в дизайн или удобно по функционалу, признайте, не будьте ханжой, это красиво и удобно=)

              Понятно, что где-то есть и профессионалы, но их по моему не так много. Опять же, еслди ради флеша мне надо ждать — я его лучше отключу, серьезно, пусть грузят в фоновом режиме или еще как-то.

              У Лебедева навигация сделана в носкрипте видимо для поисковиков.
          • а зачем далеко ходить? вот как вы нормально реализуете систему комментариев аналогичную хабру без JS? под каждым комментарием будет болтаться форма для ответа?
            • Это, кстати, реализуется без JS:
              <a href="/blogs/webdev/65471/?reply_to=1834683#form_reply_1834683">ответить</a>
              На сервере нарисовать форму в нужном месте, в зависимости от reply_to :-P
              • ну я же спрашивал «как нормально реализовать» :) всю простыню комментариев каждый раз дважды перегружать это не гут
                • Когда у меня были зависания этого скрипта, и не отправлялись комменты, да еще и страница начало как то криво перезагружаться — я подумал, лучше бы тут можно было отключить JS и отправлять комменты классическим способом, быстрее бы вышло.

                  Кстати, отдельный луч презрения Хабраразработчикам за тяжеленный код коммента, мало того что там пробелов и HTML кода раза в 4 больше чем полезного текста, так он зараза пока грузится намертво блокирует Оперу. Чтоб у вас там все так же тормозило.

                  :)
                  • опера у меня не блокируется.
                    а на счет глючащего скрипта — дык это же уже недостатки реализации.
  • что-то неясно, если вы придумали решение без js (стилизация кнопки), зачем сюда вязать альтернативу на js?
    • О минусах только стилизации кнопки можно прочитать в примечаниях.

      Эта статья это, можно сказать, ход моих мыслей по поводу решения проблемы :) Хотелось полностью раскрыть тему. Как использовать и что уже зависит от ТЗ.
  • мне одному кажется, что для сабмита лучше использовать кнопку, чем ссылку?
    • Нет, не одному. Автор рассуждает о семантике, однако предложенная замена кнопки отправки на ссылку в форме сама по себе не является семантичной. Разумеется, если у автора есть разъяснения, почему всё-таки ссылка лучше, чем кнопка, то буду рад выслушать.
  • Несколько проще использовать тег noscript:
    <script>
    document.write("<a href=\"#\" onclick=\"document.getElementById('myform').submit(); return false;\">Отправить</a>");
    </script>
    <noscript>
    <input type="submit">
    </noscript>

    Но, если серьезно… автор, вы правда считаете, что подобному топику место на хабре?
    • Пытался быть полезным. Извините, если не получилось…
      • Простите, если задел. Иногда хабр напоминает форум для юных вебмастеров. Таких ресурсов полно, а этот — один.
    • noscript для того и сделали, непонятно почему минусуют комментарий. имхо лучше 4 строчки кода чем целая простыня.
  • По моему автор поставил себе сферическую задачу в вакууме. Не вижу смысла тратить на такую ересь силы.
  • Всё намного проще.

    <form>
    <input type="text" name="a" />
    <input type="submit" id="push-me" style="display:none" />
    </form>

    <label for="push-me">fake submit</label>
    • Тоже вариант…
    • Действительно хороший вариант. Только один минус в том, что label не сможет получить фокус.
      • <label for="push-me"><a href="#">fake submit</a></label>
        • Ухты! Точно! Замечательное элегантное решение. :)
          При тестировании на скорую руку не обнаружил каких-то явных минусов.
          Спасибо!
          • А нет… Извините, ошибся. Ваше решение и решение insa не работает в Опере. В Опере даже display: none; для кнопки не работает, видимо из соображений безопасности. Фактически нормально работает только в Firefox.
            • Ложь или ошибка, в Опере работает display: none для button

              Правда, клик по лабелу для такой кнопки ничего не дает, но это уже другой вопрос.
              • НЛО прилетело и опубликовало эту надпись здесь.
              • Да, работает. Я чуть ниже уже это написал. Видимо где-то ошибся в коде, валидатором не проверил, а так как остальные браузеры прятали кнопку, то грешил на одну только Оперу :)
                • В Опере лучше прятать кнопку через «visibility: hidden; position: absolute;», иначе через «display: none» она с лейблом не свяжется так как вы от нее ожидаете.
                  • У меня в Опере 9.64 даже при видимой кнопке лейб не работает так как ожидается…
    • К сожалению, вариант не кроссбраузерный… Не работает в IE. В Опере не работает display: none; для кнопки (видимо из соображений безопасности). Фактически нормально работает только в Gecko и Webkit.
      • А если у кнопки написать position: absolute; left: -10000px?
        • В Опере и ИЕ label для кнопки не работает вообще, поэтому даже если скрыть кнопку желаемого результата мы не добьемся…

          Кстати, не понимаю в чем проблема, но у меня display: none; в Опере то работает, то не работает. Видимо что-то я перемудрил :)
          • В Опере и IE label просто передает фокус кнопке, если не ошибаюсь, после этого можно нажать пробел, и действие будет выполнено.
            Но в решении этой проблемы такое поведение нам не поможет.
      • Все эти проблемы решаемы — можно использовать input type=«image» c прозрачным пикселем, можно убрать input внутрь label, итд.
  • По-моему неоправданно усложнена задача. Обычно беру button, вкладываю в него span (для удобства стилизации) и оформляю стилями как ссылку. Работает и выглядит одинаково как со скриптами так и без.
    • Мы не ищем легких путей :) Я до этого дошел в конце топика. Минусы только стилизации можно почитать в примечаниях.
  • Забавно, кодинг ради кодинга. Если вы хотите сделать кнопку, похожую на ссылку — используйте CSS. И всё =) Если чуть посложнее — тег button.
    KISS
    • Обратите еще внимание на последний тег топика :)
      • Вы имеете ввиду вариант с? Тоже лишнее, на мой взгляд.
        Обратите внимание, во всех вариантах есть куча проблем
        Напирмер, найдите ошибку в следующих 2х строчках:

        parent.removeChild(buttons[i]);
        parent.appendChild(link);

        (подсказка: buttons[i] не обязательно последний чайлд своего парента)

        + следующий вариант не будет работать сразу по 2м причинам:
        <input type=«submit» name=«add» value=«Отправить» class=«link add» />
        <input type=«submit» name=«remove» value=«Удалить» class=«link remove» />
        1) На сервер не отправляется name нажатой кнопки
        2) Не сработает условие buttons[i].className == 'link'

        Вариант с, как уже было отмечено выше, не кросс-браузерный, и кнопка не получает фокус.

        Повторюсь: ваша статья — хорошая иллюстрация для принципа KISS. Чем сложнее решение, тем больше в нем ошибок.
        • * Вы имеете ввиду вариант с <label>?
        • Я имел в виду тег «ссылка, кнопка, отправить форму, html, javascript, css, извращения» :)))

          Да, спасибо, я погорячился, есть ведь замечательный метод:

          replaceChild(newChild, oldChild)

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

          (^|\s)class(\s|$)

          А name можно отправлять (если есть такая необходимость) создавая по нажатию на ссылку скрытый параметр.
  • пользователей с отключенным js следует уведомлять о необходимости наличия этого js. собственно все нормальные сайты это делают. в отличие от вебдванолных поделок которые так популярны на хабре. а ведь о noscript говорят в любой книге вроде «html for dummies». в 90% случаев сайт который нормально не может работать без js является школьной поделкой.
    • Google maps?
    • да, когда читал подобные книжки лет эдак 7 назад — там так и писалось :)
  • Забыли про пользователей с отключенным CSS ))
    • Почему же? :) У них тоже все должно работать. :)
    • И отключенным HTML =)
      • И отключенным интернетом…
        • И холодильник разморожен, блять
  • имхо зарекаться на пользователей с отключенным JS безсмысленно, проще показать им сообщение, что сайту нужен джаваскрипт. дело ведь никогда не ограничится одной лишь маскировкой ссылок под кнопки, т.к. практически любой сайт сейчас содержит аяксовые приблуды, соответственно функционал надо будет дублировать, писать дополнительный код, тестерам достанется в два раза больше работы — проверить все со включенным js и с отключенным.

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

      Хм, а по моим данным Ваша оценка количества пользователей, у которых что-то не сработало (сотые доли процента) отличается от реальной в сотни раз. И оценка трудозатрат (в 2 раза больше работы на тестирование) тоже излишне завышена.

      Да нет ничего сложного нет в том, чтоб сначала сделать вариант без js, а потом сверху «навесить» что нужно. Это миф какой-то про дублирование функционала. К контроллеру приходит запрос, если он аяксовый — отдается json с данными, если нет — рендерится шаблон. Дублирование функционала — это скорее проблема организации разработки, а не graceful degradation.

      Если есть какой-то сложный интерактивный элемент на js — не нужно его полностью реализовывать в варианте без js, такой фанатизм — зло, конечно. Задача — чтобы сайтом пользоваться можно было нормально, не больше. Разумный компромисс найти всегда можно, и никакого увеличения бюджета это не несет.
      • > и никакого увеличения бюджета это не несет.
        совсем не согласен. написание дополнительного кода — это уже увеличение бюджета.

        > И оценка трудозатрат (в 2 раза больше работы на тестирование) тоже излишне завышена
        вместо «проверить со включенным js» нужно «проверить со включенным js»+«проверить с отключенным js»
        как бы как раз в 2 раза.

        >Это миф какой-то про дублирование функционала
        может я не совсем корректно выразился, но под дублированием я подразумевал как раз вот это — «запрос, если он аяксовый — отдается json с данными, если нет — рендерится шаблон». тут как минимум а) нужно делать дополнительный шаблон и б) делать отдельные контролы (да, да, контрол может быть один, но нужно будет реализовывать два механизма работы, все равно это две задачи вместо одной).

        > оценка количества пользователей, у которых что-то не сработало (сотые доли процента) отличается от реальной в сотни раз
        отличается только если не разделять статистику на пользователей ПК и пользователей мобильных устройств. но даже если ориентироваться и на мобильных пользователей, все равно лучше сделать отдельную версию для таких пользователей, чем заставлять их грузить контент, который у них не будет работать и потому для них бесполезен
        • > может я не совсем корректно выразился, но под дублированием я подразумевал как раз вот это — «запрос, если он аяксовый — отдается json с данными, если нет — рендерится шаблон». тут как минимум а) нужно делать дополнительный шаблон и б) делать отдельные контролы (да, да, контрол может быть один, но нужно будет реализовывать два механизма работы, все равно это две задачи вместо одной).

          это решается грамотной архитектурой + частичными шаблонами.
          • > это решается грамотной архитектурой + частичными шаблонами.
            это решается дополнительными трудозатратами и увеличением бюджета. а грамотная архитектура — в данном случае всего лишь средство уменьшения доп. трудозатрат, но к нулю она их никак не сведет.
            • но в два раза не возрастут трудозатраты.
              • на тестирования — именно в два раза. тестеры проверяют систему в целом. и им пофиг какая там архитектура, какие шаблоны и как реализованы те или иные фичи.
            • Тут есть обратная сторона, например, если увлечься аяксом, поисковик не сможет индексировать страницу, или перестанет работать кнопка «назад», или к примеру, вдруг завтра решат сделать мобильную версию сайта, и если архитектура плохо расширяемая, это выльется в еще большие затраты (и нежелание разработчиков работать с индусокодом).

              Так что экономия на качестве кода имхо подходит для одноразовых проектов, где ничего не будет расширяться или дополняться, чтобы один раз сделать и ничего больше не трогать.
              • плохо расширяется только дичайший индусо-код. вариант «предусмотреть все-все-все что только может захотеть заказчик в будущем» себя не оправдывает в связи опять таки с непомерным увеличением бюджета на начальной стадии. а увеличение трудозатрат на последующее переделывание с лихвой компенсируется быстрым запуском первой версии. почитайте к примеру Спольски, он это все рассказывает гораздо лучше чем я.
  • Не увидел в топике решения проблемы «а если JS будет у посетителя отключен?», дальше идет снова JS. Я что-то не понял?
    • да. советую прочитать статью.
      • Ах да, что-то мне стало не интересно продолжать читать, когда увидел простыню JS, для того, чтобы сделать кнопку ссылкой. В итоге она все равно станет кнопкой у тех, у кого JS отключен… Может тогда просто проверку?
        • Сожрал код… < noscript >
        • как же блин надоели все эти «не читал, но не одобряю». да вся, блин, статья посвящена работе с пользователями у которых скрипт отключен. и альтернативы все разумные в комментариях разобраны. или вы от статей только заголовки читаете?
          • Топик говно, вот и все. Полезности 0. От интересных статей читаю не только заголовки, но и если есть что почитать в теле.
            • Чего-то маловато минусов )
  • в решении через css область реагирования в итоге как у кнопки а не как у ссылки… но сразу этого и не заметишь
  • а как вам такой вариант? и в ие6 работает и валидный

    Submit

    P.S. Не скажу, что вариант самый лучший, просто хочу сказать автору, что вариантов решение проблемы можно найти уйму, даже и не извращаясь с js
    • Submit
      • простите, надеюсь парсер хоть это пропустит
        a style=position:relative
        Link text
        input type=submit style=position:absolute;left:0;opacity:0;filter:alpha(opacity=0)
        /a
  • Я доживу до дня, когда уже люди перестанут верстать под IE6 и предполагать, что так важно оптимизировать сайт под отключенный JS?
    • Почему Вы считаете, что это не важно?
      • Сейчас некторым фагготам это очень важно. Если с каким-то процентом IE6 еще можно смириться и ждать его окончательного ухода в ноль, то параноиков, выключающих JS нужно выжигать огнем и не подпускать к Интернетам, ящитаю.
        • по Вашему «отключение js» это единственные сценарий? вообще я ни разу в жизни не видел человека «выключевшиго js» и конечно ориентироваться на параноиков не стоит.

          но причем тут они? js может не загрузиться, он может не поддерживаться устройством или программой, работающей с сайтом или веб-приложением. это что, тоже херня чтоли?
          • Я писал не про матрицу вероятностей, а про два определенных сценария:
            1. Пользователь-мудак с IE6
            2. Пользователь-мудак с намеренно отлюченными JS
            • Пользователь-мудак с IE6 может быть заказчиком из крупной корпорации, который просматривал ваш канцелярский интернет-магазин с целью закупить стотыщмильёнов новых ручек паркер для топ-менеджмента. Он мудак-с-IE6, а создатель такого сайта мудак-без-денег в иоге :)
        • Особенно учитывая часто обнаруживаемые в новом FF security-дыры по части JS? Многие, кто его юзает предпочитают выставлять Noscript на все сайты, кроме проверенных.

          А выжигать огнём и не подпускать к интернетам надо тех, кто стремится выжигать огнём и не подпускать к интернетам :)
  • Скорей всего это требование дизайнера или заказчика.

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

    Тогда уж проще так: [script] doc.write(код ссылки) [/script][noscript] input type=submit [/noscript], но это на редкость тупое решение.

    • …на редкость тупой задачи.
  • в Кроссбраузерном добавление обработчика событий
    не хватает проверки на obj'екта на null.
  • 1) «а если JS будет у посетителя отключен», то он идёт лесом. У какого процента пользователей и по каким таким причинам может быть отключен JS?
    2) Кончайте закрывать непарные теги, xhtml мёртв.
    • «Кончайте закрывать непарные теги, xhtml мёртв.» — Давно?
    • xhtml еще жив! на нем еще много народу верстает
    • НЛО прилетело и опубликовало эту надпись здесь.
      • Лишь бы не говорили, что «вариант со слешем быстрее парсится»… =)

        На вкус и цвет товарища нет ;)
        • НЛО прилетело и опубликовало эту надпись здесь.
  • а еще ссылку на форму с элементов типа input можно получить так:
    .form

    и становится ненужной конструкция с while
    • Да, точно! :) Спасибо!
  • Автору большое спасибо за статью! Пригодится
    • НЛО прилетело и опубликовало эту надпись здесь.
  • Но тут же возникает (как ни странно :) следующий вопрос это, а если JS будет у посетителя отключен?


    Тогда пишем noscript:

    <noscript>
    />
    </noscript>

    Про какие-то банальности рассказываете. Чудо-пост.
    • Меня выше заминусовали за такое же мнение, идиоты.
      • Я думаю заминусовали за то что, вы уже третий, или четвёртый это предлагаете.
        • И что с того? Мое мнение от этого стало неправильным? Или я должен был перечитать все комментарии чтобы высказаться по поводу идиотской писанины?
          • к сожалению на хабре тут так.
            зы. я не минусовал
            • Да я ничего против тебя не имею. Просто бесит.
Только авторизованные пользователи могут оставлять комментарии. Авторизуйтесь, пожалуйста.