Неактивная кнопка отправки формы
Ранее мы уже рассматривали скрипт, делающий кнопку формы неактивной. Суть скрипта заключалась в том, что некоторые поля формы обязательно должны быть заполнены пользователем перед отправкой формы на сервер, иначе кнопка отправки формы останется неактивной.
В данной теме мы хотим Вам предложить схожий скрипт, основным отличием которого от рассмотренного ранее является то, что кнопка отправки формы становится активной только после того, как пользователь ввел в поле текст, длина которого превысит указанное в настройках значение.
Протестировать предлагаемый скрипт Вы можете прямо на данной страничке, чуть ниже. Для этого введите в поле textarea более восьми символов, и кнопка Отправить форму! станет активной.
Для получения такого скрипта, проверяющего длину текста в поле textarea Вам понадобится создать вот такую форму:
<form method="POST" name="registration" action="URL">
<textarea cols="50" rows="5" name="textarea_text" onkeyup="change_status()"
onchange="change_status()"></textarea><br>
<input type=submit value="Отправить форму!" name="start">
</form>Добавить JavaScript код, который будет в зависимости от введенной длины текста, делать кнопку отправки формы либо активной, либо нет:
<script type="text/javascript">
var f = document.registration;
function change_status(){
f.start.disabled = (f.textarea_text.value.length > 8) ? false : true;
}
change_status();
</script>Если у Вас на сайте уже подключена библиотека jQuery, то проверку длины текста в поле можно осуществлять при ее помощи. В этом случае форма отправки текста будет выглядеть немного проще:
<form method="POST" name="registration" action="URL">
<textarea cols="50" rows="5" name="textarea_text"></textarea><br>
<input type=submit value="Отправить форму!" name="start">
</form>А jQuery код, хоть и выглядит немного тяжелее, но работает ни чуть не хуже выше приведенного JavaScript кода:
<script type="text/javascript">
var submit_name = $('[name="start"]');
submit_name.attr('disabled','disabled');
$('[name="textarea_text"]').keyup(function () {
if ($(this).val().length>8) submit_name.removeAttr('disabled');
else submit_name.attr('disabled','disabled');
});
</script>Какой именно способ использовать, выбирать Вам, но на наш взгляд, код на jQuery немного более предпочтительнее, т.к. его можно сделать более универсальным для применения ко всем имеющимся формам на сайте.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
<form method="POST" name="registration" action="URL">
<input tupe="text" id="input_1" onkeyup="change_status()" onchange="change_status()">
<input tupe="text" id="input_2" onkeyup="change_status()" onchange="change_status()">
<input tupe="text" id="input_3" onkeyup="change_status()" onchange="change_status()">
<input type=submit value="Отправить форму!" id="start">
</form>
<script type="text/javascript">
function change_status(){
var num = 0;
for (i=1; i<=3; i++) if ( document.getElementById("input_"+i).value.length==0) num++;
if (num!=0) document.registration.start.disabled = true;
else document.registration.start.disabled = false;
}
change_status();
</script>