Skip to content

Commit 325d4a0

Browse files
itmaxxxitmaxxx
committed
form 3
1 parent ce04f1a commit 325d4a0

File tree

2 files changed

+243
-0
lines changed

2 files changed

+243
-0
lines changed

‎JS/02-Using In Browser/05-Forms/03-Формы/index.html‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>Регистрационная форма</title>
7+
<style>
8+
body {
9+
font: 10pt Tahoma;
10+
}
11+
12+
table.form_holder1 {
13+
font: 10pt Tahoma;
14+
background-color: #ddeeff;
15+
}
16+
17+
table.form_holder1 thead {
18+
background-color: #334466;
19+
color: white;
20+
font-weight: bold;
21+
}
22+
</style>
23+
</head>
24+
<body>
25+
<form name="frm1">
26+
<table class="form_holder1" cellspacing="1">
27+
<thead>
28+
<tr>
29+
<td colspan="2" align="center">Регистрация на сервере:</td>
30+
</tr>
31+
</thead>
32+
<tbody>
33+
<tr>
34+
<td>Логин:</td>
35+
<td><input size="26" type="text" name="login" /></td>
36+
</tr>
37+
<tr>
38+
<td>Пароль:</td>
39+
<td><input size="26" type="password" name="text_password1" /></td>
40+
</tr>
41+
<tr>
42+
<td>Подтверждение:</td>
43+
<td><input size="26" type="password" name="text_password2" /></td>
44+
</tr>
45+
<tr>
46+
<td colspan="2" align="center">
47+
<hr />
48+
</td>
49+
</tr>
50+
<tr>
51+
<td>Полное имя (ФИО):</td>
52+
<td><input size="26" type="text" name="fullname" /></td>
53+
</tr>
54+
<tr valign="top">
55+
<td>Пол:</td>
56+
<td>
57+
<input type="radio" name="radio_gender" value="male" />мужской<br />
58+
<input type="radio" name="radio_gender" value="female" />женский
59+
</td>
60+
</tr>
61+
<tr valign="top">
62+
<td>
63+
Иностранные<br />
64+
языки:
65+
</td>
66+
<td>
67+
<input type="checkbox" name="check_languages_1" />Английский<br />
68+
<input type="checkbox" name="check_languages_2" />Немецкий<br />
69+
<input type="checkbox" name="check_languages_3" />Французский<br />
70+
<input type="checkbox" name="check_languages_4" />Испанский<br />
71+
<input type="checkbox" name="check_languages_5" />Итальянский<br />
72+
</td>
73+
</tr>
74+
<tr>
75+
<td>Сфера деятельности:</td>
76+
<td>
77+
<select name="list_work">
78+
<option value="0">обслуживание</option>
79+
<option value="1">образование</option>
80+
<option value="2">медицина</option>
81+
<option value="3">наука</option>
82+
</select>
83+
</td>
84+
</tr>
85+
<tr>
86+
<td>e-mail:</td>
87+
<td><input size="26" type="text" name="e_mail" /></td>
88+
</tr>
89+
<tr valign="top">
90+
<td>
91+
Дополнительная<br />
92+
информация:
93+
</td>
94+
<td>
95+
<textarea name="text_info" cols="20" rows="5"></textarea>
96+
</td>
97+
</tr>
98+
<tr>
99+
<td colspan="2" align="center">
100+
<input type="button" id="register" value="Готово" /> <input type="reset" id="reset" value="Сброс" />
101+
</td>
102+
</tr>
103+
</tbody>
104+
</table>
105+
</form>
106+
107+
<script src="./script.js"></script>
108+
</body>
109+
</html>

‎JS/02-Using In Browser/05-Forms/03-Формы/script.js‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
function register() {
2+
let login = document.querySelector('input[name=login]');
3+
let text_password1 = document.querySelector('input[name=text_password1]');
4+
let text_password2 = document.querySelector('input[name=text_password2]');
5+
let fullname = document.querySelector('input[name=fullname]');
6+
let radio_gender = document.querySelector('input[name=radio_gender]:checked');
7+
let check_languages = [
8+
document.querySelector('input[name=check_languages_1]:checked'),
9+
document.querySelector('input[name=check_languages_2]:checked'),
10+
document.querySelector('input[name=check_languages_3]:checked'),
11+
document.querySelector('input[name=check_languages_4]:checked'),
12+
document.querySelector('input[name=check_languages_5]:checked')
13+
];
14+
let list_work = document.querySelector('select[name=list_work]');
15+
let e_mail = document.querySelector('input[name=e_mail]');
16+
let text_info = document.querySelector('textarea[name=text_info]');
17+
18+
if (login.value.length >= 3 && login.value.length <= 10) {
19+
document.cookie = `login=${login.value}`;
20+
} else {
21+
return alert('Длина логина должна быть от 3 до 10 символов');
22+
}
23+
24+
if (text_password1.value.length >= 3 && text_password1.value.length <= 10) {
25+
if (text_password2.value.length >= 3 && text_password2.value.length <= 10) {
26+
if (text_password1.value === text_password2.value) {
27+
document.cookie = `password=${text_password1.value}`;
28+
} else {
29+
return alert('Пароли не совпадают');
30+
}
31+
} else {
32+
return alert('Пароль должен быть от 3 до 10 символов');
33+
}
34+
} else {
35+
return alert('Пароль должен быть от 3 до 10 символов');
36+
}
37+
38+
if (fullname.value.length >= 3) {
39+
document.cookie = `fullname=${fullname.value}`;
40+
} else {
41+
return alert('Длина имени должна быть от 3 символов');
42+
}
43+
44+
if (radio_gender) {
45+
document.cookie = `radio_gender=${radio_gender.value}`;
46+
} else {
47+
return alert('Выберите ваш пол');
48+
}
49+
50+
if (check_languages.filter(e => e).length > 0) {
51+
for (let i = 1; i <= check_languages.length; i++) {
52+
if (check_languages[i - 1]) {
53+
document.cookie = `check_languages_${i}=true`;
54+
} else {
55+
document.cookie = `check_languages_${i}=false; max-age=0`;
56+
}
57+
}
58+
} else {
59+
return alert('Выберите хотябы 1 иностранный язык');
60+
}
61+
62+
if (list_work?.value) {
63+
document.cookie = `list_work=${list_work.value}`;
64+
} else {
65+
return alert('Выберите иностранные языки');
66+
}
67+
68+
if (e_mail.value.length > 3) {
69+
document.cookie = `e_mail=${e_mail.value}`;
70+
} else {
71+
return alert('Длина почты должна быть от 3 символов');
72+
}
73+
74+
if (text_info.value.length > 0) {
75+
document.cookie = `text_info=${text_info.value}`;
76+
}
77+
}
78+
79+
function reset() {
80+
document.cookie = `login=false; max-age=0`;
81+
document.cookie = `password=false; max-age=0`;
82+
document.cookie = `fullname=false; max-age=0`;
83+
document.cookie = `radio_gender=false; max-age=0`;
84+
85+
for (let i = 1; i <= 5; i++) {
86+
document.cookie = `check_languages_${i}=false; max-age=0`;
87+
}
88+
89+
document.cookie = `list_work=false; max-age=0`;
90+
document.cookie = `e_mail=false; max-age=0`;
91+
document.cookie = `text_info=false; max-age=0`;
92+
}
93+
94+
function getCookie(name) {
95+
return document.cookie.split(';').filter((item) => item.includes(`${name}=`)).toString().split('=')[1];
96+
}
97+
98+
function init() {
99+
if (getCookie('login')) {
100+
document.querySelector('input[name=login]').value = getCookie('login');
101+
}
102+
103+
if (getCookie('password')) {
104+
document.querySelector('input[name=text_password1]').value = getCookie('password');
105+
document.querySelector('input[name=text_password2]').value = getCookie('password');
106+
}
107+
108+
if (getCookie('fullname')) {
109+
document.querySelector('input[name=fullname]').value = getCookie('fullname');
110+
}
111+
112+
if (getCookie('gender')) {
113+
document.querySelector(`input[name=radio_gender][value=${getCookie('gender')}]`).checked = true;
114+
}
115+
116+
for (let i = 0; i < 5; i++) {
117+
if (getCookie(`check_languages_${i + 1}`)) {
118+
document.querySelector(`input[name=check_languages_${i + 1}]`).checked = true;
119+
}
120+
}
121+
122+
if (getCookie('e_mail')) {
123+
document.querySelector('input[name=e_mail]').value = getCookie('e_mail');
124+
}
125+
126+
if (getCookie('text_info')) {
127+
document.querySelector('textarea[name=text_info]').value = getCookie('text_info');
128+
}
129+
130+
document.querySelector('#register').addEventListener('click', register);
131+
document.querySelector('#reset').addEventListener('click', reset);
132+
}
133+
134+
init();

0 commit comments

Comments
 (0)