HTML+CSS+JavaScript

Нужно сделать кнопку с 4 состояниями: неактивная, по умолчанию, наведение, нажатие.rnНикаких текстовых сообщений и т.д. ненужно. Просто пока поля не заполненыкнопка неактивна, только заполнили и стала по умолчанию и тут начинает работать и hover и active.rnСледующий код идеально подходит, но проблемка с hover и active.rnПожалуйста дополните этот, ну или другой вариант, только в js я плуг если что и сам не доделаю:)

<form method="post" action="#" name="form">               <p><label for="login">Логин</label><input type="text" name="login" onkeyup="changeButtonStatus()" onchange="changeButtonStatus()"></p>     <p><label for="pass">Пароль</label><input type="password" name="pass" onkeyup="changeButtonStatus()" onchange="changeButtonStatus()"></p>     <p><button class="button" name="start" type="submit">Вход</button></p> </form>

var f=document.form; function changeButtonStatus(){ f.start.disabled=(f.login.value && f.pass.value) ? false : true;     } changeButtonStatus();

О каких 4 состояниях кнопки может идти речь:
<button class="button" name="start" type="submit" disabled="1" onmouseover="alert(1)">Вход</button>
обрабатывается на не активной кнопке наведение мыши?

В рамках HTML5 для такого контроля JS уже ну требуется:

<form method="post" action="#" name="form">     <p><label>Логин</label> <input type="text" name="login" required /></p>     <p><label>Пароль</label> <input type="password" name="pass" required /></p>     <p><button class="button" name="start" type="submit">Вход</button></p>  </form>

Для обработки JS лучше обрабатывать события у формы, например:

<form method="post" onchange="здесь">     <p><label>Логин</label> <input type="text" name="login" /></p>     <p><label>Пароль</label> <input type="password" name="pass" /></p>     <p><button class="button" name="start" type="submit" disabled="1">Вход</button></p>  </form>

при этом вызываемая функция должна управлять атрибутом disabled кнопки.

То что про html5 написано не работает.А вот вторая часть сообщения умная, только вот я писал, что я не могу сам реализовать это.

>То что про html5 написано не работает

И в чем же объясняется ее неработоспособность? У вас браузер не древний случаем, поддерживает HTML5?

Если вы ожидали, что html5 код должен сделать кнопку отправки невидимой, то напрасно. Элементы формы в HTML5 могут содержать атрибут required, что делает поле обязательным для заполнения, и если попытаться отправить форму с таким полем не заполненным, то отправка формы будет проигнорирована, и у этого поля будет выведено сообщение. Все это выполняется на уровне браузера.

А теперь задайтесь вопросом - нужно ли делать кнопку отправки неактивной? Для чего это, для красоты, крутости? Учтите, что onchange и onkeyup не хватит на все случаи заполнения формы. Скопируйте в буфер обмена, а потом по правому щелчку мышки вставляйте командой из контекстного меню. Хватает вам этих событий? Есть события возникающие и при вставке в форму, но опять таки в спецификации HTML 4.01 они отсутствуют.

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

function enableSend(e){    return e[0].value && e[1].value ? true : false; } <form method="post" onsubmit="return enableSend(this.elements)">     <p><label>Логин</label> <input type="text" name="login" required=""/></p>     <p><label>Пароль</label> <input type="password" name="pass" /></p>     <p><button class="button" name="start" type="submit">Вход</button></p>  </form>

А то что кнопка изначально доступна и отображает стиль :hover, это так страшно и опасно? Все на клиенте, это сервис дабы напомнить о пропущенном или забытом, серверу все равно это проверять.

PS. Неактивная кнопка более полезна наоборот при отправке формы, а не до нее, чтобы предотвратить повторную отправку.

Кнопка нужна. И цель её сделать disabled или похожей на это визуально, а не обязательные поля, ни о какой безопасности речи не идёт и не какой крутости----просто такое задание.И пожалуйста, мне нужно решение, а не учение. И кнопка должна быть доступна только после разблокировки.

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

<script> function enableSend(e){    e[2].disabled = e[0].value && e[1].value ? false : true; }     </script>     <form method="post" onkeyup="enableSend(this.elements)">     <p><label>Логин</label> <input type="text" name="login" required=""/></p>     <p><label>Пароль</label> <input type="password" name="pass" /></p>     <p><button class="button" name="start" type="submit" disabled="1">Вход</button></p>  </form

Но все-таки, прочтите сами, чтобы не было кивков в мою сторону, о том, что я упоминал выше.

Что-то я не оч там всё понял. Такое чувство что мы на разных языках говорим:)
Мне нужно чтобы hover и active были, но только после разблокировки кнопки. то есть ввёл в поля значения и только потом начали и hover и active."Кнопки формы имеют 4 состояния: по умолчанию, блокированное, наведение, нажатие." Точнее 4 вида оформления должны получится:)

У кнопки отправки формы не может быть псевдоселектора :active, вернее вы можете его и прописать, только толку от этого не будет (если только не удерживать для любопытства). Что касается :hover, то все и будет работать, что вам еще нужно?

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

А вы тз тоже так же обсуждаете? сказали сделать active, hover, блокирование и по умолчанию, и hover c active работают, когда поля пустые, а не должны

Я делаю работу для заказчиков только ту, что мне интересна. А тем более я ни когда не возьму работу, если у меня на это нет знаний. Так что могу только посоветовать в этом плане - не знаете и не можете, не беритесь.
Я вам уже упоминал о HTML5, вас это не устраивает. Думаю о и CSS3 в таком случае не стоит говорить, а на нем можно решить проблему. Иначе обрабатывайте эти события с помощью JS.

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

Я не знаком с вашим ТЗ, поэтому:
1. псевдоселектор :hover в IE8 работает только с DOCTYPE, до IE8 вообще не работает.
2. HTML5 и CSS3 в мозгах вашего заказчика витает или нет не знаю, поэтому опускаем
3. решать с помощью обработки события onmouseover, в котором проверяйте состояние атрибута disabled кнопки, и в зависимости от этого состояния разрешайте/запрещайте соответствующие стили. onmouseout - для возвращения стилей по умолчанию. Проще не прописывать стили в обработчике, а добавлять/удалять класс их описывающий.

Здесь нужна имитация кнопки с присвоением этому объекту события submit() по клику на нем: http://api.jquery.com/submit/

Здесь нужна имитация кнопки с присвоением этому объекту события submit() по клику на нем: http://api.jquery.com/submit/
что-то похожее у меня есть, но я не могу сам подключить ещё и стили.

Ща накидаем эгзампл.

http://jsbin.com/umomEfE/2/edit?html,js,output
Ну, вот, примерно такая вышла штукенция. Идет проверка на количество символов в полях по keyup - если их меньше шести, кнопка остается неактивной.
Но есть пара нюансов.
Мне лень было назначать обработчик событий каждому полю отдельно, поэтому в IE при клике или keypress теряется фокус.
И второе - зачем там лэйбл??
То есть, я просто показал, принцип манипуляции классами и действие псевдоселекторов CSS3.

Учите JS. Все что вы написали, это слишком много, для jQ тем более.

Ой, неохота. Ну просто физически противно читать JS-синтаксис, все эти getElementById... Не могу!
Есть такое понятие - идиосинкразия - немотивированная неприязнь к чему-либо.

И просьба к модератору: уберить эту хрень про детей и HTML5, написанную выше!

А писать дилетантский код на jQuery не противно? Ваша беда как раз в том, что вы не знаете первоисточника, а он требует размышления. А размышлять видимо вы и не хотите, а не потому, что противно.
Нельзя так - один берется за работу не зная как ее делать, другой предлагает такое, что... )

Да хорош, confirm!
Все нормально. Я не программист, и даже не верстальщик.
А в данном случае, показал кому-то, кто знает даже меньше моего, конкретный пример по конкретному вопросу - как переключить стили кнопки. А функции у него свои.
А вам лично посоветовал бы на неправильное, с вашей точки зрения, решение предложить свое правильное. К чему эти наставления о "необходимости думать"? Лучшего закрепления знаний, чем разбор "эталонного" кода не придумаешь.
Не так ли?

Я объяснял почему, и как можно, показывал примеры. Так что "обвинения" в мой адрес беспочвенны. А именно конкретно как сделать, то не я исполнитель, конкретного задания не знаю, а посему готового, а тем более "эталонного" кода писать не буду.

Что касается вашего примера, то в нем столько лишнего, что выудить что либо полезного из него незнающему, думаю трудно. Так какая от него польза? Вот к примеру:

Идет проверка на количество символов в полях по keyup - если их меньше шести, кнопка остается неактивной

А почему не 7 или 4? А для логина выбирать один символ, к примеру "Я", запрещено Законом? А почему пароль не менее шести? Если уж и считать символы пароля, то как сервис показывающий пользователю "слабый пароль", "сильный пароль"... Но обратите внимание на текст кнопки, ну явно речь не о регистрации, о каком подсчете может идти речь?

Да что с вами такое???
Просто, проверка на количество символов чтобы хоть как-то сымитировать некую функцию, некое условие, по которому будет меняться оформление кнопки. Абстрактный пример, confirm. И мне все равно, что написано в исходнике на этой кнопке.
Что вы пишете???
Какая разница, о регистрации идет речь или о чем-то другом?! Человек просил показать, КАК ИЗМЕНИТЬ СТИЛЬ ОФОРМЛЕНИЯ КНОПКИ.
И все.
"Закон", "текст кнопки"...
Спокойной ночи :)

Ну вот, то есть я дуру гоню, не показывая "эталона", а вы пишите некую абстракцию, которая ему совсем не нужна, и это в порядке вещей?
Однако странная логика )