Ошибка при формирование POST-запроса в AJAX, в чём проблема?

Question

[Семен Борисов]

Доброго времени суток, в ходе своих экспериментов решил написать небольшой интерфейс.
Есть следующая форма, которая содержит Логин (Login) и Сообщение (textForm):

<!-- Modal window -->
		<form class="form_message" id="messageForm" method="post">
			<div class="form_message_close" id="closeForm">X</div>
		
			<!-- Receive data -->
			<div class="wrap_form">
			 	<!-- Title's form-->
				<div class="form_title">Text of your message</div>
				<!-- Fields of form -->
				<input name="login" type="text" placeholder="Your login" class="form_login" >
				<textarea name="textForm" placeholder="Your message" class="form_text"></textarea>
				<!-- Options of form -->
				<input name="sendForm" type="submit" value="send" class="form_submit" id="sendForm">
				<input type="reset" value="reset" class="form_reset">
			</div>
			
			<!-- User interaction -->
			<div class="wrap_work"></div>
		</form> 
</body>

После заполнения соответствующих полей отправляю содержимое формы на своей e-mail посредством функции mail() языка PHP, а пользователя уведомляю о успешной отправки сообщения без перезагрузки страницы (AJAX).

document.getElementById('sendForm').onclick = function() {
			var request = new XMLHttpRequest(), 
				params = 'login=' + encodeURIComponent(login) + '&textForm=' + encodeURIComponent(textForm);
			
			request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			request.open("POST", "action_form.php", true); 

			request.onreadystatechange = function() {
				if(request.readyState == 4) {
					if (request.status == 200) {
						// notice of sent message
					}
				}
			};
		
			request.send(params);
		};

Вот тут и возникает проблема, мне нужно сформировать POST-запрос из данных, которые заполнил пользователь.
Отправка сообщения происходит в файле "action_form.php", мне нужно передать два post-параметра login и textForm.

Браузер ругается: ReferenceError: login is not defined code. js:20

Помогите разобраться, в чём моя проблема, почему js не может получить значения формы?

Answer 1

[Rsa97]

А в какой именно строке кода Вы дали браузеру команду получить значения из формы? Переменные login и textForm не определены и не заполнены, вполне логично выдаётся ошибка.

Компьютер делает не то что вы хотите, а то что ему приказываете.

Comments

[Семен Борисов]

Всё, понял, почему то показалось, что он их как-то там словит :В

Answer 2

[Сергей Мельников]

document.getElementById('sendForm').onclick = function() {
  var request = new XMLHttpRequest(),
    login = this.querySelector("[name='login']").value,
    textForm = this.querySelector("[name='textForm']").value,
    params = 'login=' + encodeURIComponent(login) + '&textForm=' + encodeURIComponent(textForm);
  
  request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  request.open("POST", "action_form.php", true); 

  request.onreadystatechange = function() {
    if(request.readyState == 4) {
      if (request.status == 200) {
        // notice of sent message
      }
    }
  };

  request.send(params);
};