Как будет выглядеть скрипт сабмита формы?

Question

[Денис Букреев]

Есть форма с id="login__form"
Кнопка у нее по дизайну специфическая, поэтому использовать <input type="submit"> не получится.
Поэтому хочу сделать кнопку через тег <a>, при клике на которую будет происходить сабмит формы.

Т.е. мне надо прописать скрипт на сабмит формы через ее id в атрибут onclick="" тега <a>.

Как будет выглядеть такой скрипт?

Пока я представляю его себе таким:

<a href="#" class="form__submit" onclick="document.getElementById('login__form').submit()">

Верно ли это?

Comments

[VZVZ]

> Кнопка у нее по дизайну специфическая, поэтому использовать <input type="submit"> не получится.
Почему?
Гляньте хоть на Тостере, да и много где еще. Почти везде используют и не жалуются.
При этом, если AJAX, то обрабатывают onsubmit формы, а не клик, иногда стоит оставлять возможность сабмитнуть форму и через кнопку enter.

> Верно ли это?
Любое решение должно соответствовать задаче. Работает, значит верно.
Я могу сказать, что не помешало бы избавиться от inline onclick и заюзать jQuery (где аж несколько вариантов алгоритма сабмита формы), но не факт, что оно того стоит в случае вашей задачи.

[VZVZ]

Еще могу сказать, что document.getElementById('login__form') лучше бы заменить на конструкцию через this, тогда данный код можно будет копипастить в другие формы с другими id, или менять id этой формы не лазя в кнопку.

[Денис Букреев]

VZVZ: кнопка содержит два цвета в тексте, у инпута нет псевдоэлементов - никак не использовать мне инпут.

Вот про сабмит через Enter я позабыл, так что, видимо, мое решение - не решение

[Денис Букреев]

Денис Букреев: хотя можно поставить невидимый input type=submit, тогда проблема решается, но какой-то костыль уже получается

[VZVZ]

Денис Букреев: вам не кажется, что вы чрезмерно заморачиваетесь? Неужели вам кто-то оплачивает все это? Я бы с моими заказчиками на одном дошираке бы сидел, если бы так заморачивался бы.

[Денис Букреев]

VZVZ: когда заказчик хорошо платит, а дизайн высокого уровня, я подхожу тщательно к работе)
мне важно, чтобы сайт не был говном, как 99% существующих, поэтому все должно быть идеально, просто и чисто до мельчайших деталей. Ну и чтобы поддержка верстки была достаточно проста и интуитивно понятна

[VZVZ]

Денис Букреев: "мне важно, чтобы сайт не был говном" - слишком широкое понятие. Проработанность в деталях - это не всегда антоним к "говну". А иногда (если не довольно часто) даже синоним.

[Денис Букреев]

VZVZ: у меня нет слова проработанности
там написано "идеально, просто и чисто") захламленность сюда не входит

Answer 1

[devstudent]

button можно превратить во что угодно, как и тег "а" через цсс

Comments

[Денис Букреев]

button меня не устраивает)
я поставил себе именно эту задачу и ее обходы мне не нужны

[Михаил Чирский]

Денис Букреев: onclick прошлый век, конечно вы можете использовать чистый JS, ну мне кажется, лучше использовать всеми привычную библиотеку jquery и ее валидатор jquery.validate.

[Михаил Чирский]

devstudent не согласен с вами, попробуйте добавить к иконку от FontAwesome или псевдоклассы ::after, ::before, кроме обычного background, который уже используют редко, только в случаях когда это действительно необходимо, а так все делается кодом, и в данном случае, если у него дизайн как он написал, нестандартный и кнопка спефицифическая, то не всегда прокатит

[devstudent]

Михаил Чирский: ну насчет фона поспорю, ничего плохого в этом не вижу. в остальном - да

[Денис Букреев]

Михаил Чирский: у button и input разное поведение и поэтому мне нужен именно input

[Михаил Чирский]

Денис Букреев: что вы имеете ввиду?

[devstudent]

вроде сначала было button теперь инпут

Answer 2

[Михаил Чирский]

В чем проблема?
Есть у вас форма
<form id="login__form"></form>
и есть
<a class="btn js-submit">Отпрвить</a>

// Вешаем обработчик click на вашу кнопку
$('.js-submit').on('click', function() {
$('#login__form').submit(); // Сабмитим форму
});

P.S. Это просто пример, под каждую задачу скрипт будет своим.

Comments

[Денис Букреев]

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

Выписывать мелочные скрипты в файл - дробит и захламляет целостность и чистоту фронт-енда

[Михаил Чирский]

Денис Букреев: Вы можете как суровые программисты написать
onclick="$('form').submit()"
ну лично я против такого решения, по поводу захломления, смотря какие задачи и что используете, обычно юзают framefork для разделения логики от представления и там все красиво и аккуратно, я просто пример привел, как засабмитить форму, в вашем случае.