Робота з формою

Публікації

Робота з формою у JavaScript зазвичай можна умовна поділити на два етапи:

  • збір необхідних даних з web-форми і їх перевірка при необхідності
  • відправка зібраних даних на сервер

Звертатися до елементів (полів) форми можна за допомогою document.forms або безпосередньо до елементу за допомогою document.getElenentById, document.getElementsByName.

input і textarea

Для отримання вмісту текстових полів елементів input і textarea використовується властивість value

назва користувача:
<form name="myform"> назва користувача: <input type="text" name="user_name"> </form> var form = document.forms['myform']; var s = form.elements.user_name.value; alert('назва користувача: '+s); var el = document.getElementsByName('user_name')[0]; var s = el.value; alert('назва користувача: '+s);

checkbox & radio

Елементи input type="checkbox" і type="radio" мають властивість checked, яка містить логічне значення true або false.


<form name="myform2"> <input type="radio" name="st" value="man" id="man"><label for="man">чоловік</label><br> <input type="radio" name="st" value="woman" id="woman"><label for="woman">жінка</label> </form> var form = document.forms['myform2']; var el = form.elements.st[0]; alert( el.checked ); var el = document.getElementById('man'); alert( el.checked );
<form name="myform3"> <input type="checkbox" name="pravula" id="pravula"><label for="pravula">я приймаю правила сайту</label> </form> var form = document.forms['myform3']; var el=form.elements.pravula; alert( el.checked ); var el = document.getElementById('pravula'); alert( el.checked );

select

Щоб отримати вибраний пункт в елементі select використовується властивість value або selectedIndex.

<form name="myform4"> <select name="pr" id="el_pr"> <option value="2017">2017</option> <option value="2018">2018</option> <option value="2019">2019</option> <option value="2020">2020</option> <option value="2021">2021</option> </select> </form> var form = document.forms['myform4']; var el = form.elements.pr; alert( el.value ); var el = document.getElementById('el_pr'); alert( el.value ); var el = document.getElementById('el_pr'); alert( el.selectedIndex );

Якщо у елемент select вказано атрибут multiple який включає множинний вибір тоді необхідно перевіряти кожний список елементу через властивість options:

<form name="myform5"> <select id="sl_st" multiple> <option value="малий">малий</option> <option value="середній">середній</option> <option value="великий">великий</option> </select> </form> var el = document.getElementById('sl_st'); var s=''; for(i=0;i<el.options.length;i++){ if(el.options[i].selected==true) s+=' '+el.options[i].value; } alert('вибрано: '+s);

Перевірка даних (валідація)

Перед відправкою даних на сервер, їх можна перевірити на наявність заповнених полів форми, кількість введених символів і т.п.

HTML форма дозволяє вказувати обов'язкові поля для заповнення, мінімальне і максимальне значення і т.п. без JavaScript.

HTML дозволяє вказати основні параметри заповнення форми, для більш складніших перевірок даних краще використовувати JavaScript.

Якщо Вам необхідно перевірити заповненні дані форми за допомогою JavaScript і при необхідності перервати відправку даних - використовуйте подію onsubmit. Щоб перервати відправку використовуйте метод Event.preventDefault() або return false.

Приклад перевірки даних форми за допомогою HTML:

<form action="/ajax.php?act=test_post" method="post"> Ім'я: <input type="text" name="name" minlength="3" maxlength="12" required> Прізвище: <input type="text" name="surname" minlength="3" maxlength="12" required> <input type="submit" value="відправити"> </form>
Ім'я: Прізвище:

Приклад перевірки даних форми за допомогою JavaScript:

Ім'я: Прізвище:
<form action="/ajax.php?act=test_post" method="post" id="st_form"> <div id="st_form_er" style="color:red"></div> Ім'я: <input type="text" name="name"> Прізвище: <input type="text" name="surname"> <input type="submit" value="відправити"> </form> document.getElementById("st_form").onsubmit=function(){ var valid=true, er=''; if(this.name.value.length<3){valid=false; er='Ім\'я має менше 3 символів.';} if(this.name.value.length>12){valid=false; er='Ім\'я має більше 12 символів';} if(this.surname.value.length<3){valid=false; er+=' Прізвище має менше 3 символів.';} if(this.surname.value.length>12){valid=false; er+=' Прізвище має більше 12 символів';} document.getElementById('st_form_er').innerText=er; return valid; }

Відправка даних

Відправка даних форми на сервер можна виконати двома способами:

  • стандартним HTML способом відправки
  • за допомогою AJAX

При стандартному способі відправлення даних виникає подія onsubmit.

Стандартний спосіб дозволяє відправити дані на сервер навіть коли JavaScript виключений у вашому браузері. Хоча цей параметр зараз не є важливий так як JavaScript технологія практично не виключається у браузерах.

Для відправки даних за допомогою JavaScript використовується технологія AJAX, яка дозволяє відправляти дані без перезавантаження веб-сторінки.

Приклад відправки даних стандартним способом HTML:

Назва:
<form name="pr_html" action="http://xn--80adth0aefm3i.xn--j1amh/ajax.php?act=test_post" method="post"> Назва: <input type="text" name="user_neme"><br> <input type="radio" name="pr_html_st" value="mone" id="pr_html_stmone"><label for="pr_html_stmone">чоловіча</label> <input type="radio" name="pr_html_st" value="womone" id="pr_html_stwomone"><label for="pr_html_stwomone">жіноча</label> <input type="submit" value="відправити"></form>

Приклад відправки даних за допомогою JavaScript:

Назва:
<form id="pr_ajax"> Назва: <input type="text" name="user_name"><br> <input type="radio" name="pr_ajax_st" value="mone" id="pr_ajax_stmone"><label for="pr_ajax_stmone">чоловіча</label> <input type="radio" name="pr_ajax_st" value="womone" id="pr_ajax_stwomone"><label for="pr_ajax_stwomone">жіноча</label> <input type="submit" value="відправити"></form> document.getElementById('pr_ajax').onsubmit=function(e){ var xhr= new XMLHttpRequest(); xhr.open('post','/ajax.php?act=test_post'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function(){ if(xhr.readyState==4 && xhr.status==200){ alert( 'Відповідь від сервера: '+xhr.responseText ); } } var form=document.getElementById('pr_ajax'); var dani='user_name='+form.elements.user_name.value+'&pr_ajax_st='; if(form.elements.pr_ajax_st[0].checked==true)dani+='man'; else dani+='woman'; xhr.send(dani); e.preventDefault(); //перериваємо стандартну відправку даних форми }

Якщо Вам потрібно щоб відправляти дані на сервер лише за допомогою JavaScript тоді формою можна і не користуватися а лише необхідними елементами:

<input type="text" id="forums_username"> <input type="radio" name="forums_st" id="forums_st_man"><label for="forums_st_man">чоловік</label> <input type="radio" name="forums_st" id="forums_st_woman"><label for="forums_st_woman">жінка</label> <button id="forums_button">відправити</button> document.getElementById('forums_button').onclick=function(){ var xhr=new XMLHttpRequest(); xhr.open('post', 'http://xn--80adth0aefm3i.xn--j1amh/ajax.php?act=test_post'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function(){ if(xhr.readyState==4 && xhr.status==200){ alert( 'Відповідь від сервера: '+xhr.responseText ); } } var dani='user_name='+document.getElementById('forums_username').value+'&st='; if(document.getElementById('forums_st_man').checked==true)dani+='man'; else dani+='woman'; xhr.send(dani); }
Адмін 2017-10-12 05:30:00

Тільки зареєстровані користувачі можуть писати коментарі.