JS/index7.html at master · Creatorbon/JS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.error {
			border: 2px solid red;
		}
		.success {
			border: 2px solid green;
		}
	</style>
</head>
<body>

	<ul class="user-list">

	</ul>
	<button id="update">UPDATE</button>
	<form>
		<label>
			Name:
			<input type="text" name="login">
		</label>
		<label>
			Password:
			<input type="password" name="pass">
		</label>
		<label>
			EMAIL:
			<input type="email" name="email">
		</label>
		<br>
		<input type="submit" value="SENT DATA">
		<input type="reset" value="Reset">
	</form>


	<script>
		var users_list = document.getElementsByClassName('user-list')[0];
		var validation = {
			by_length: function(fields) {
				var validation_result = true;
				fields.forEach(function(field){
					if (field.value.length > 0) {
						field.classList.add('success');
						field.classList.remove('error');
					} else {
						field.classList.add('error');
						field.classList.remove('success');
					}
				});
				fields.forEach(function(field){
					field.classList.contains('error') ? validation_result=false :validation_result=true;
				});
				return validation_result;
			}
		}

		var request = {
			url: 'https://volk-maks1mp.c9users.io/',
			getData: function(){
				var request  = new XMLHttpRequest();
				// GET/POST/PUT/DELETE

				request.open('GET', this.url+'users_list');
				request.send();
				request.onreadystatechange = function () {
					if (request.status == 200 && request.readyState == 4) {
						var parsed_data = JSON.parse(request.response), template = '';
						parsed_data.forEach(function(user){
							var parsed_user = JSON.parse(user);
							template +='<li> Name: '+parsed_user.name+' Password: '+parsed_user.password+' Email: '+parsed_user.email+'</li>';
						});
						users_list.innerHTML = template;
					}
				}
			},
			sendData: function(data){
				var request  = new XMLHttpRequest();

				request.open('POST', this.url+'create_user');
				request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
				request.send(data);
			}
		};

		update.onclick = function(){
			request.getData();
		}
		request.getData();
		var name_user = document.querySelector('[name="login"]'),
			email = document.querySelector('[name="email"]'),
			password = document.querySelector('[name="pass"]'),
			submitBtn = document.querySelector('[type="submit"]');

		submitBtn.addEventListener('click', function(e){
			e.preventDefault();
			var data = {
				name: name_user.value,
				password: password.value,
				email: email.value
			};
			console.log(data);
			var json_data = JSON.stringify(data);
			var validation_result = validation.by_length([name_user, password, email]);
/*			if (validation_result) {
				request.sendData(json_data);
				request.getData(json_data);
				alert('success');
			} else {
				alert('error');
			}*/
			console.log(json_data);
			request.sendData(json_data);
			request.getData(json_data);

		})


	</script>
</body>
</html>