Неактивна кнопка відправки форми

Раніше ми вже розглядали скрипт, який робить кнопку форми неактивною. Суть скрипта полягала в тому, що деякі поля форми обов'язково повинні бути заповнені користувачем перед відправкою форми на сервер, інакше кнопка відправки форми залишиться неактивній.

У даній темі ми хочемо Вам запропонувати схожий скрипт, але основною відмінністю якого від розглянутого раніше є те, що кнопка відправки форми стає активною тільки після того, як користувач ввів в поле textarea текст, довжина якого перевищить вказане в настройках значення.

Протестувати пропонований скрипт Ви можете прямо на даній сторінці, трохи нижче. Для цього введіть у поле textarea більше восьми символів, і кнопка Надіслати форму! стане активною.

Для отримання такого скрипта, який перевіряє довжину тексту в поле textarea Вам знадобиться ось така форма:

onchange = "change_status ()"></ textarea><br><br> <input type = submit value = "Отправить форму!" name = "start"><br></ form></p>
<p>Якщо у Вас на сайті вже підключена бібліотека jQuery, то перевірку довжини тексту в поле textarea можна здійснювати за її допомогою. У цьому випадку форма відправки тексту буде виглядати трохи простіше:</p>
<p><form method = "POST" name = "registration" action = "URL"><br> <textarea cols = "50" rows = "5" name = "textarea_text"></ textarea><br><br> <input type = submit value = "Отправить форму!" name = "start"><br></ form></p>
<p>А який саме спосіб використовувати, вибирати Вам, але на наш погляд, код на jQuery трохи більше краще, тому що його можна зробити більш універсальним для застосування до всіх наявних форм на сайті.</p>
<p>Спробуйте Скрипт, який робить кнопку форми неактивною. або такий:<br> <form method="POST" name="registration" action="URL"><br> <input tupe="text" id="input_1" onkeyup="change_status()" onchange="change_status()"><br> <input tupe="text" id="input_2" onkeyup="change_status()" onchange="change_status()"><br> <input tupe="text" id="input_3" onkeyup="change_status()" onchange="change_status()"><br> <input type=submit value="Отправить форму!" id="start"><br> </form></p>
<p>Якщо Ви хочете задати будь-яке питання, то краще зробіть це на нашому форумі.<br> Таким чином, Ви зможете швидше отримати відповідь на Ваше запитання.</p></div>
<div class="extra">

<div class="clear"></div>
</div>
</article>
</div>
</div>
</div>
</div>
<div id="sidebar" class="col-1-3">
<div class="wrap-col">
<div class="box">
<div class="content">
<ul>
<li><a href="/articles/7-sposobiv-zav-jazati-topsajderi-shnurki-mamini.html">7 Способів зав’язати топсайдери (шнурки), мамині шпаргалочкі</a></li>
<li><a href="/articles/nanesennja-poboiv.html">нанесення побоїв</a></li>
<li><a href="/articles/jak-na-zemli-z-javljajutsja-ozera.html">Як на землі з’являються озера</a></li>
<li><a href="/articles/divchatka-dopomozhit-jak-zupiniti-rannju-sivinu.html">Дівчатка! Допоможіть! Як зупинити ранню сивину (((((, форум</a></li>
<li><a href="/articles/ja-shhasliva-chogo-i-vam-bazhaju.html">Я щаслива, чого і вам бажаю</a></li>
<li><a href="/articles/grusha-dlja-osobi.html">Груша для особи</a></li>
<li><a href="/articles/pershe-pobachennja-i-pershij-pocilunok-cholovik.html">Перше побачення і перший поцілунок - чоловік цілується на першому побаченні</a></li>
<li><a href="/articles/povtorna-katarakta-pislja-zamini-krishtalika.html">Повторна катаракта після заміни кришталика лазерна дісцізія</a></li>
<li><a href="/articles/specifika-ljudskoi-dijalnosti.html">Специфіка людської діяльності</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="wrap-footer pominodiko">
<div class="row">
<div class="col-1-1">
<div class="wrap-col">
<div class="box">

<div class="content">
<ul>
<li><a href="/articles/ne-svjati-gorshki-lipljat.html">Не святі горшки ліплять</a></li>
<li><a href="/articles/divchatka-hto-probuvav-maslo-vid-rozriviv.html">Дівчатка, хто пробував масло від розривів промежини weleda, мітки масаж, Веледа, дамський, damm,</a></li>
<li><a href="/articles/natjurmort-shkilne-priladdja-roboti-ditej-kraina.html">Натюрморт - шкільне приладдя - (роботи дітей), країна майстрів</a></li>
<li><a href="/articles/visokij-tisk-z-pohmillja-pislja-zapoju-shho-robiti.html">Високий тиск з похмілля після запою що робити</a></li>
<li><a href="/articles/portret-na-zamovlennja-jak-organizuvati.html">Портрет на замовлення як організувати прибутковий бізнес</a></li>
<li><a href="/articles/microsoft-excel-ogljad-mozhlivostej-programi.html">Microsoft excel - огляд можливостей програми, освітній центр истра в ітамак</a></li>
<li><a href="/articles/jak-pereviriti-radar-detektor-samostijno.html">Як перевірити радар-детектор самостійно</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>

</div>
<div class="copyright">
<p>Copyright © 2026</p>

<ul>
<li><a href="/articles/shheplennja-ce.html">Щеплення - це</a></li>
<li><a href="/articles/tanec-jak-predmet-filosofskogo-doslidzhennja.html">Танець як предмет філософського дослідження</a></li>
<li><a href="/articles/zberigannja-morkvi-v-pogrebi-vzimku.html">Зберігання моркви в погребі взимку</a></li>
<li><a href="/articles/vid-kavi-tovstijut-abo-hudnut.html">Від кави товстіють або худнуть</a></li>
<li><a href="/articles/osoblivosti-dogovoriv-z-derzhkompanijami.html">Особливості договорів з держкомпаніями</a></li>
</ul>
</div>
</footer></div>
<style>
#cookieNoticeOverlay{position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:20px}#cookieNoticeBox{width:100%;max-width:520px;background:#fff;border-radius:18px;padding:28px 24px;box-shadow:0 20px 60px rgba(0,0,0,.35);font-family:Arial,sans-serif;text-align:center}#cookieNoticeBox h2{margin:0 0 14px;font-size:24px;line-height:1.25;color:#111}#cookieNoticeBox p{margin:0 0 22px;font-size:16px;line-height:1.5;color:#333}#cookieNoticeOk{display:inline-block;width:100%;max-width:240px;border-radius:12px;padding:14px 22px;background:#111;color:#fff;font-size:17px;font-weight:700;text-decoration:none;box-sizing:border-box;cursor:pointer}#cookieNoticeOk:hover{background:#333}body.cookie-notice-locked{overflow:hidden}
</style>

<div id="cookieNoticeOverlay">
  <div id="cookieNoticeBox" role="dialog" aria-modal="true">
<h2>Cookie на сайті</h2>

<p>Ми використовуємо cookie для коректної роботи сайту та покращення сервісу.</p>

</div>
</div>
<script>
(function(){var storageKey='cookie_notice_ok_until';var showAgainAfter=24*60*60*1000;var now=Date.now();function getAcceptedUntil(){try{return Number(localStorage.getItem(storageKey))||0}catch(e){return 0}}
function setAcceptedUntil(value){try{localStorage.setItem(storageKey,String(value))}catch(e){}}
if(getAcceptedUntil()>now){return}
var overlay=document.getElementById('cookieNoticeOverlay');var okLink=document.getElementById('cookieNoticeOk');if(!overlay||!okLink){return}
function showNotice(){overlay.style.display='flex';document.body.classList.add('cookie-notice-locked')}
function closeNotice(){overlay.style.display='none';document.body.classList.remove('cookie-notice-locked')}
okLink.addEventListener('click',function(event){event.preventDefault();setAcceptedUntil(Date.now()+showAgainAfter);var rawHref=(okLink.getAttribute('href')||'').trim();if(rawHref==='#'||rawHref===''){closeNotice();return}
var targetUrl=new URL(rawHref,window.location.origin).href;window.open(targetUrl,'_blank','noopener,noreferrer');closeNotice()});overlay.addEventListener('click',function(event){event.stopPropagation()});document.addEventListener('keydown',function(event){if(overlay.style.display==='flex'&&event.key==='Escape'){event.preventDefault();event.stopPropagation()}},!0);showNotice()})()
</script></body>
</html>