индикатор загрузки, поля и кнопка формы задизейблены

BleSSeD · 28.07.2008, 19:43

У меня есть форма,в которой есть 2 текстовых поля,и сабмит.Надо,чтобы когда нажать сабмит,то чтобы форма 2 секунды показывала индикатор загрузки, поля и кнопка формы были задизейблены. как ето реализовать?

kost · 29.07.2008, 03:47

По сабмиту формы делать disable нужным полям и делать видимым div с индикатором.
Ждать две секунды, div убрать.

Что тут непонятного?
:-)

Асмодиан · 29.07.2008, 12:23

каков вопрос...
kost, жжёшь.

kost · 29.07.2008, 16:08

Изучите, для начала, действие onsubmit.

Добавлено через 1 час 41 минуту

Не претендую на идеал, но написал пример: http://demo.wd2.ru/form-disable.html

Как видите, ничего сложного.

BleSSeD · 29.07.2008, 19:35

А почему етот код не работает?

Цитата:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body { margin:2em; font: normal 120% arial, sans-serif}
form {position:relative;}
input { font-size:120%; width:200px;}
label {display:block}
form div {margin: 1em 0}
#loader {position:absolute; top:0; left:-5000px;padding: 40px 70px;}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Авторизация</title>

</head>
<body>
<form action="#" method="get" id="testform" onsubmit="disablator(); return false;" >
<div><label for="name">E-mail:</label>
<input type="text" id="email" name="email" /></div>

<div><label for="email">Password:</label>
<input type="password" id="pass" name="pass" /></div>

<div><input type="submit" value=" Submit! " id="submit-buton" /></div>

<div id="loader"><img src="loader.gif" alt="Loading" width="32" height="32" /></div>
</form>

<script type="text/javascript">

function disablator () {
document.getElementById('email').disabled = true;
document.getElementById('pass').disabled = true;
document.getElementById('submit-buton').disabled = true;
document.getElementById('loader').style.left = "0";
setTimeout(proverka, 2000);
}

function proverka () {
var mail = "[email protected]";
var password = "12345";
if (mail == document.getElementById('email').value && password == document.getElementById('password').value) {
document.write ("<p><img src='avik.jpg' alt='Аватар пользователя'> <br>Ваш мейл:" + mail);
}
else (if mail == document.getElementById('email').value && password == document.getElementById('password').value) {
document.write ("<p>Неправильный мейл,или пароль");
}

</script>
</body>
</html>

kost · 29.07.2008, 20:59

vov4yk, выложите в интернете и дайте ссылку.

Поставьте firebug (плагин к firefox) -- сильно поможет в разработке.

Добавлено через 1 минуту

И если меняете id полей ввода, меняйте и label.

Асмодиан · 29.07.2008, 21:22

А мне всёж намного больше понравился IE Developer Toolbar под IE7...
Но это на любителя, FireBug для FF даже более мощный, нежели IE Dev Toolbar
А вот любители оперы в ....

kost · 29.07.2008, 21:37

У вас там скобки в if else расставленны хер поймет как. Проверяйте.

Добавлено через 11 минут

Makarenya, вот это dev toolbar?
http://i34.tinypic.com/szju5u.png

По мне, так он не очень удобен. Но деваться некуда, у ie есть баги, которых в ff не отловишь. Хотя, с этой штукой у меня не разу, по-моему, не получилось что-то полезное сделать.

А для Opera есть Dragonfly, с подобным функционалом. Правда, я в нем не особо пока разобрался -- в firebug привычнее и удобнее.

**************************

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

И проверьте id полей и обращение к ним в функциях.

И, надеюсь, вы просто тренируетесь, а не собираетесь делать такую авторизацию?

Асмодиан · 29.07.2008, 21:44

Код:

else (if mail == document.getElementById('email').value && password == document.getElementById('password').value) {

меняем на

Код:

else {

А то конструкция у вас получалась:

если (всё ок) то ок
в противном случае (если всё ок) тогда всё плохо...

Добавлено через 4 минуты

ну да, выставлять mail и пароль в коде страницы - их узнает весь интернет!!!

IE Dev Toolbar - это он и есть самый.
Но разумеется, чтоб была отладка скриптов, то лучше параллельно использовать MS Visual Studio 2008 (мне она также нравиться много больше Aptana)
Но мои пристрастия - это привычка.

PS. На FireBug я тоже не сделал ничего прикольного ни разу

А вот самого важного в FireBug и IE DevT - выделение элементов при наведении в сраном Dragonfly нет в принципе...
Opera рулит...

kost · 29.07.2008, 21:55

Цитата:

Сообщение от Makarenya

А вот самого важного в FireBug и IE DevT - выделение элементов при наведении в сраном Dragonfly нет в принципе...

Прям таки и нет: http://i36.tinypic.com/502jbn.png

О, прямо сейчас в песне по радио был Dragonfly упомянут. : )

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
пара штук с поля	Diabolos	Фотография	1	01.09.2009 07:05
Нестандартные динамические поля в форме	Pryamoj	HTML, CSS, JavaScript	4	25.09.2008 10:37
javascript - текстовые поля	dim	ASP, Perl, PHP и MySQL	0	03.10.2007 13:20
Разрешение рабочего поля	Kapral	HTML, CSS, JavaScript	6	10.09.2006 11:57
Максимальная длина поля?	noxx	HTML, CSS, JavaScript	1	30.07.2006 17:53

28.07.2008, 19:43	#1
BleSSeD	У меня есть форма,в которой есть 2 текстовых поля,и сабмит.Надо,чтобы когда нажать сабмит,то чтобы форма 2 секунды показывала индикатор загрузки, поля и кнопка формы были задизейблены. как ето реализовать?

29.07.2008, 03:47	#2
kost	По сабмиту формы делать disable нужным полям и делать видимым div с индикатором. Ждать две секунды, div убрать. Что тут непонятного? :-)

29.07.2008, 12:23	#3
Асмодиан	каков вопрос... kost, жжёшь.

29.07.2008, 16:08	#4
kost	Изучите, для начала, действие onsubmit. Добавлено через 1 час 41 минуту Не претендую на идеал, но написал пример: http://demo.wd2.ru/form-disable.html Как видите, ничего сложного. Последний раз редактировалось kost; 29.07.2008 в 16:08.. Причина: Добавлено сообщение

29.07.2008, 20:59	#6
kost	vov4yk, выложите в интернете и дайте ссылку. Поставьте firebug (плагин к firefox) -- сильно поможет в разработке. Добавлено через 1 минуту И если меняете id полей ввода, меняйте и label. Последний раз редактировалось kost; 29.07.2008 в 21:00.. Причина: Добавлено сообщение

29.07.2008, 21:22	#7
Асмодиан	А мне всёж намного больше понравился IE Developer Toolbar под IE7... Но это на любителя, FireBug для FF даже более мощный, нежели IE Dev Toolbar А вот любители оперы в ....

29.07.2008, 21:37	#8
kost	У вас там скобки в if else расставленны хер поймет как. Проверяйте. Добавлено через 11 минут Makarenya, вот это dev toolbar? http://i34.tinypic.com/szju5u.png По мне, так он не очень удобен. Но деваться некуда, у ie есть баги, которых в ff не отловишь. Хотя, с этой штукой у меня не разу, по-моему, не получилось что-то полезное сделать. А для Opera есть Dragonfly, с подобным функционалом. Правда, я в нем не особо пока разобрался -- в firebug привычнее и удобнее. ************************ vov4yk, проверяйте все внимательно. Даже если допустить, что в функции proverka () вы расставите скобки, логики в ней нет. И проверьте id полей и обращение к ним в функциях. И, надеюсь, вы просто тренируетесь, а не собираетесь делать** такую авторизацию? Последний раз редактировалось kost; 29.07.2008 в 21:38.. Причина: Добавлено сообщение

29.07.2008, 21:44	#9
Асмодиан	Код: else (if mail == document.getElementById('email').value && password == document.getElementById('password').value) { меняем на Код: else { А то конструкция у вас получалась: если (всё ок) то ок в противном случае (если всё ок) тогда всё плохо... Добавлено через 4 минуты ну да, выставлять mail и пароль в коде страницы - их узнает весь интернет!!! IE Dev Toolbar - это он и есть самый. Но разумеется, чтоб была отладка скриптов, то лучше параллельно использовать MS Visual Studio 2008 (мне она также нравиться много больше Aptana) Но мои пристрастия - это привычка. PS. На FireBug я тоже не сделал ничего прикольного ни разу А вот самого важного в FireBug и IE DevT - выделение элементов при наведении в сраном Dragonfly нет в принципе... Opera рулит... Последний раз редактировалось Асмодиан; 29.07.2008 в 21:44.. Причина: Добавлено сообщение