Робота з формою у 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);
}