disabled у кнопки submit

rus · September 30, 2009

Добрый день!

Нужно что бы после заполнения всех (либо выборочно) полей (input type="text") в форме кнопка "submit" стала enabled, а если поля пустые - соответственно disabled, как?

Мне не обязательно готовый вариант, достаточно логику с именами функций

Спасибо!

s0rr0w · September 30, 2009

Добрый день!
Нужно что бы после заполнения всех (либо выборочно) полей (input type="text") в форме кнопка "submit" стала enabled, а если поля пустые - соответственно disabled, как?
Мне не обязательно готовый вариант, достаточно логику с именами функций
Спасибо!

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

var sc_have_default_val = function ( controller, node, scData, execOptions ) {
	try { 

		var isDefVal = true;

		if ( node.nodeName == "SELECT" ) {

			for ( var i=node.options.length; i-- > 0; ) {
				if ( node.options[ i ].selected != node.options[ i ].defaultSelected ) {
					isDefVal = false;
					break;
				}
			}
		}
		else
		{
			if ( node.nodeName == "INPUT" && ( node.type == "checkbox" || node.type == "radio" ) ) {
				if ( node.checked != node.defaultChecked ) isDefVal = false;
			}
			else
			{
				if ( node.value != node.defaultValue ) isDefVal = false;
			}
		};
		if ( !isDefVal ) GSC_setVal(scData.state, false)

	} catch ( e ) { };
}

Примерно вот так

Потом бы выполнил код

GSC_setValAndLaunch("defVal", true, container, {propagation: "INPUT,SELECT,TEXTAREA"} );

button.disabled = GSC_getVal("defVal");

rus · October 1, 2009

s0rr0w:

В принципе по коду логику понял.

Сначала i считывает введено ли хоть что-то в инпут и если это что-то меньше 0, то кнопка - дизэйбл, если больше то соответственно енэйбл.

Но я не понял куда этот код вставляется и где он выполняется:

GSC_setValAndLaunch("defVal", true, container, {propagation: "INPUT,SELECT,TEXTAREA"} );
button.disabled = GSC_getVal("defVal");

Да, и еще..., а SC надо же подключать? все три файла?

А этот код по ходу в хедере прописывается:

var sc_have_default_val = function ( controller, node, scData, execOptions ) {
	try {

		var isDefVal = true;

		if ( node.nodeName == "SELECT" ) {

			for ( var i=node.options.length; i-- > 0; ) {
				if ( node.options[ i ].selected != node.options[ i ].defaultSelected ) {
					isDefVal = false;
					break;
				}
			}
		}
		else
		{
			if ( node.nodeName == "INPUT" && ( node.type == "checkbox" || node.type == "radio" ) ) {
				if ( node.checked != node.defaultChecked ) isDefVal = false;
			}
			else
			{
				if ( node.value != node.defaultValue ) isDefVal = false;
			}
		};
		if ( !isDefVal ) GSC_setVal(scData.state, false)

	} catch ( e ) { };
}

Понимание некоторых вещей на уровне логики есть, но честно говоря знаний нехватает.

Изучаю потихоньку, но пока далеко не ушел

Я вот тут попытался сделать, но получилось немного коряво и только для одного инпута, но работает:

<script>
var min_length=6;
function one_input(form,pole,submit)
{
pole=document.getElementById(pole);
POLEcount=document.forms[form].POLE.value.length;

}

function two_input(form,POLE,submit)
{
POLE=document.forms[form].POLE.value;
POLEcount=document.forms[form].POLE.value.length;

SUBMIT=document.forms[form].submit;



if(POLEcount>=min_length)
{
SUBMIT.disabled=0;
}
else
{

SUBMIT.disabled=1;
}
} 
</script>
<form method="post" action="" name="form">
<input type="password" onkeyup="one_input('form','pole','submit'),two_input('form','POLE','submit')" name="POLE"/>
<input type="submit" disabled="" value="Отправить" name="submit"/>
<br/>
</form>

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

Но это только для одного, а мне нужно для нескольких.

Edited October 1, 2009 by rus

rus · October 1, 2009

Сократил свой код, но опять таки, работает только для одного инпута, а как для нескольких сделать?

<script>
var min_length=6;
function one_input(form,pole,submit)
{
POLEcount=document.forms[form].POLE.value.length;
POLE=document.forms[form].POLE.value;
SUBMIT=document.forms[form].submit;
if(POLEcount>=min_length)
{
SUBMIT.disabled=0;
}
else
{
SUBMIT.disabled=1;
}
} 
</script>

<form method="post" action="" name="form">
<input type="text" onkeyup="one_input('form','pole','POLE','submit')" />
<input type="submit" disabled="" value="Отправить" name="submit"/>
<br/>
</form>

Edited October 1, 2009 by rus

Kel-Tanas · October 1, 2009

<script type="text/javascript" src="http://ermin.ru/jquery.js"></script>
<script type="text/javascript">
var Obl_Class = {
	status: false,
	Keyup: function() {
		Obl_Class.status = true;
		$("input.obligatory").each(function(){
			if ( $.trim( $(this).val() ) == "" ) {
				Obl_Class.status = false;
			}
		});
		if ( Obl_Class.status ) {
			$("#submit_button").removeAttr("disabled")
		}
		else {
			$("#submit_button").attr("disabled", "disabled");
		}
	},
	Init: function() {
		Obl_Class.Keyup();
		$("input.obligatory").keyup(Obl_Class.Keyup);
	}
}
$(function(){
	Obl_Class.Init();
})
</script>

<form id="some_form">

	<input type="text" class="obligatory">
	<input type="text" class="obligatory">

	<input type="submit" id="submit_button" value="send this">
</form>
<div id="debug"></div>

Edited October 1, 2009 by Kel-Tanas

Great Rash · October 1, 2009

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

Я бы написал функцию которая циклом бежит по всем элементам формы и проверяет введено ли что-либо в них или нет. И если во всех все введено функция вернет true, что-то типа такого:

for (var i = 0; i < inputs.length; i++) {
	if (inputs[i].value == '') {
		return false;
	}
}

return true;

Повесить ее можно на событие onkeydown например.

Или еще:

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

rus · October 1, 2009

s0rr0w

Kel-Tanas

Great Rash

Спасибо вам огромное за помощь и примеры, они очень мне помогли!

По крайней мере есть над чем подумать и куда копать.

s0rr0w · October 1, 2009

Код писать лень (может потом напишу, задачка пригодится). Так что расскажу логику (хз насколько она верна, но на вскидку должно работать).
Я бы написал функцию которая циклом бежит по всем элементам формы и проверяет введено ли что-либо в них или нет. И если во всех все введено функция вернет true, что-то типа такого:
for (var i = 0; i < inputs.length; i++) {
	if (inputs[i].value == '') {
		return false;
	}
}

return true;
Повесить ее можно на событие onkeydown например.
Или еще:
можно на onkeydown вешать функцию которая будет записывать в некий массив значение (неважно какое, пускай "1") если в поле что-то введено. А потом проверять если длина массива равна количеству элементов в форме значит все поля заполнены и можно включать кнопку.

Охо-хоо....

Проблема номер 1. На странице может быть больше элементов, чем требуется для проверки.

№2. На странице может быть две разные формы, которые могут проверяться отдельно. Поэтому скрипт должен уметь понимать множественные области проверок.

№3. Кроме текстовых полей есть еще и чекбоксы, радиобатоны, селекты простые и мультиселекты. Проверка value не катит.

№4. Проверять на пустое значение value нельзя, так как может стоять не пустое значение по умолчанию. Например <input type="text" value="01.10.2009">

№5. На keydown вешать функцию проверки в чистом виде не желательно, так как будет идти флуд проверок, который не всегда полезен. У некоторый полей будет onclick, у некоторых - onchange, у некоторых должна быть фукнция, которая делает проверку через секунду после окончания набора.

Массив зачем использовать? У вас есть уже массив элементов в DOM, с ним и работайте.

Great Rash · October 1, 2009

Проблема номер 1. На странице может быть больше элементов, чем требуется для проверки.
№2. На странице может быть две разные формы, которые могут проверяться отдельно. Поэтому скрипт должен уметь понимать множественные области проверок.
№3. Кроме текстовых полей есть еще и чекбоксы, радиобатоны, селекты простые и мультиселекты. Проверка value не катит.
№4. Проверять на пустое значение value нельзя, так как может стоять не пустое значение по умолчанию. Например <input type="text" value="01.10.2009">
№5. На keydown вешать функцию проверки в чистом виде не желательно, так как будет идти флуд проверок, который не всегда полезен. У некоторый полей будет onclick, у некоторых - onchange, у некоторых должна быть фукнция, которая делает проверку через секунду после окончания набора.
Массив зачем использовать? У вас есть уже массив элементов в DOM, с ним и работайте.

№1. Это как это?

№2. Можно передавать скрипту как параметр id формы которую надо проверить или массив айдишников элементов которые надо проверить (если проверять надо только обязательные поля).

№3. Я цикл лишь для примера написал, ясен пончик, что с разными элементами по разному надо работать.

№4. Раз значение есть значит поле заполнено, неважно значением по умолчанию или введенным пользователем.

№5. См. пункт 4.

Короче надо попробовать написать такой скриптец.

UPD:

Кстати, можно каждому полю формы сделать соответствующий хидден и на onchange запихивать в него значение, а уж потом проверять хиддены.

Edited October 1, 2009 by Great Rash

rus · October 1, 2009

Основа задумки в следующем:

1) Так как на сервере не установлен апач, то приходится обрабатывать данные из формы вообще на другом хосте.

2) В связи с этим проверка (даже не столько проверка, сколько подсказка) на правильность и валидность заполненных данных в форме должна выполняться на странице с формой через ajax на лету.

3) А что бы не было "злого умысла" нажать на кнопку даже при неправильном заполнении формы, кнопка должна быть не активна до тех пор, пока во всех формах (в основном инпут и текстареа) не будет введено больше, или равно 5-6 символов (можно даже в каждой форме разное количество символов).

4) Когда все ровно, все соблюдено, то происходит отправка в обработчик, который открывается в новом окне без тулбара, скроллбара и т.п. и без адреса (что у меня к стати не получилось сделать, хотя стоит location=no) и сообщает что сообщение успешно отправлено и можно закрыть окно.

ZoNT · October 1, 2009

3) А что бы не было "злого умысла" нажать на кнопку даже при неправильном заполнении формы, кнопка должна быть не активна до тех пор, пока во всех формах (в основном инпут и текстареа) не будет введено больше, или равно 5-6 символов (можно даже в каждой форме разное количество символов).

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

s0rr0w · October 1, 2009

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

Делать проверку дополнительную по onchange или onblur

Я все проверки на онблюр вешаю, потому что пока пользователь топчет данные, его полное право это делать сколь угодно долго и каким угодно способом.

Kel-Tanas · October 1, 2009

Основа задумки в следующем:
1) Так как на сервере не установлен апач, то приходится обрабатывать данные из формы вообще на другом хосте.

Думаю, браузеру нет дела до того, какой веб-сервер у Вас установлен

2) В связи с этим проверка (даже не столько проверка, сколько подсказка) на правильность и валидность заполненных данных в форме должна выполняться на странице с формой через ajax на лету.

Через ajax не получится, так-как на другой сервер ajax-запрос не пошлешь.

3) А что бы не было "злого умысла" нажать на кнопку даже при неправильном заполнении формы, кнопка должна быть не активна до тех пор, пока во всех формах (в основном инпут и текстареа) не будет введено больше, или равно 5-6 символов (можно даже в каждой форме разное количество символов).

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

В противном случае, тот, у кого установлен firebug сможет отправить форму при любом раскладе.

4) Когда все ровно, все соблюдено, то происходит отправка в обработчик, который открывается в новом окне без тулбара, скроллбара и т.п. и без адреса (что у меня к стати не получилось сделать, хотя стоит location=no) и сообщает что сообщение успешно отправлено и можно закрыть окно.

А как отправка-то происходит, расскажи ?

Edited October 1, 2009 by Kel-Tanas

ZoNT · October 1, 2009

Делать проверку дополнительную по onchange или onblur

При выборе из списка автозаполнения эти события не происходят. Вообще никакие не происходят.

rus · October 1, 2009

Да..., судя по всем ответам все эта проверка шита белыми нитками!

Балин, а что делать-то?

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

Просто нет пыхи на сервере, там перл, а в перле я вообще ни бельмеса.

К сожалению ссылку сюда не могу выложить, а то заспамят (есть у нас тут такие любители, не буду показывать пальцем).

rus · October 1, 2009

Через ajax не получится, так-как на другой сервер ajax-запрос не пошлешь.

Внимательнее читай. Там написано же, что я никуда и ничего через ajax не посылаю, а выполняю проверку на лету, на этой же странице.

А как отправка-то происходит, расскажи ?

В каком смысле?

По событию "onclick" открывается новое окно с заданными размерами, но открывается на другом сервере.

Только вот адрес так и не удалось убрать с адресной строки...

Kel-Tanas · October 1, 2009

Да..., судя по всем ответам все эта проверка шита белыми нитками!
Балин, а что делать-то?
Ява скрипт действительно можно отключить, да и фаербагом снять к черту все навешаные классы и айди, в результате действительно можно отправить и без всяких проверок.
Просто нет пыхи на сервере, там перл, а в перле я вообще ни бельмеса.
К сожалению ссылку сюда не могу выложить, а то заспамят (есть у нас тут такие любители, не буду показывать пальцем).

Попроси админа поставить Пыха.

Поменяй хостинг.

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

Одно только ограничение, что на своей странице ты данные из этого фрейма обработать не сможешь. Но пользователь то, что во фрейме, сможет увидеть.

И по любому используй какую-нибудь капчу, чтобы не спамили.

2) В связи с этим проверка (даже не столько проверка, сколько подсказка) на правильность и валидность заполненных данных в форме должна выполняться на странице с формой через ajax на лету.

http://ru.wikipedia.org/wiki/AJAX

Так как Вы будете использовать AJAX и ничего не отправлять?

В каком смысле?
По событию "onclick" открывается новое окно с заданными размерами, но открывается на другом сервере.
Только вот адрес так и не удалось убрать с адресной строки...

Круто ))) Админ, который будет на сервере в пасьянс играть, оценит шутку

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

s0rr0w · October 1, 2009

При выборе из списка автозаполнения эти события не происходят. Вообще никакие не происходят.

И что? Это не мешает ловить событие onchange или onblur. Особенно onblur

ZoNT · October 1, 2009

И что? Это не мешает ловить событие onchange или onblur. Особенно onblur

Ну ты бы хоть попробовал что-ли... Я ж тебе не просто так говорю - я протестил, никакого onblur не происходит при выборе из списка автозаполнения, потому как фокус никуда не теряется. onchange тоже не происходит. Тестил в ФФ.

rus · October 1, 2009

Попроси админа поставить Пыха.

Политика компании.

Так как Вы будете использовать AJAX и ничего не отправлять?

Вы меня не поняли, я имел ввиду что на другой сервер не отправляет.

Круто ))) Админ, который будет на сервере в пасьянс играть, оценит шутку
Мм.. а если на сервере не будет графический сервер загружен, то как окно будете показывать, в консоли?

А про это можно поподробнее? Не понял к чему это?

s0rr0w · October 1, 2009

Ну ты бы хоть попробовал что-ли... Я ж тебе не просто так говорю - я протестил, никакого onblur не происходит при выборе из списка автозаполнения, потому как фокус никуда не теряется. onchange тоже не происходит. Тестил в ФФ.

Убирал фокус с элемента?

ZoNT · October 1, 2009

Убирал фокус с элемента?

Бл***, да чего ты тупишь? Зачем мне убирать фокус с элемента???

Вот смотри: есть у меня в форме последнее поле, в котором я выбираю из автозаполнения какое-то значение. события никакого не произошло -> форма не проверилась -> кнопка не раздисейблилась. И что? Заставлять пользователя кликать куда-то чтобы фокус с этого поля ушёл??? Юзабилити на грани фантастики!

s0rr0w · October 1, 2009

Бл***, да чего ты тупишь? Зачем мне убирать фокус с элемента???
Вот смотри: есть у меня в форме последнее поле, в котором я выбираю из автозаполнения какое-то значение. события никакого не произошло -> форма не проверилась -> кнопка не раздисейблилась. И что? Заставлять пользователя кликать куда-то чтобы фокус с этого поля ушёл??? Юзабилити на грани фантастики!

Я туплю? Это ты что-то себе придумал, и пытаешься мне втолковать. Еще раз перечитай мое первое сообщение про onblur.

И что плохого в том, что пользователь куда-то кликнет? Раньше никто не возбуждался по этому поводу... лет 10 назад...

Мало того, автозаполнение можно отключить, если так страшно использовать onblur.

ZoNT · October 1, 2009

Мало того, автозаполнение можно отключить, если так страшно использовать onblur.

То есть пользователям повесить сообщение: "Зайдите в настройки браузера и отключите автозаполнение, а то у нас на сайте форма не валидируется нормально из-за него"???

s0rr0w · October 1, 2009

То есть пользователям повесить сообщение: "Зайдите в настройки браузера и отключите автозаполнение, а то у нас на сайте форма не валидируется нормально из-за него"???

Есть и проще способы.

Sign In

disabled у кнопки submit

Question

Link to comment

Share on other sites

24 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information