Как получить данные из HTML-формы в JavaScript

Question

Я пытаюсь сделать простую форму входа в систему в формате html и получить ответ в виде предупреждения, но я не могу этого сделать.это мой HTML-код

<form id="myForm" action="/verifica.js" method="post">

в js-файле. Я делаю запрос на отправку

var subs = document.getElementById("myForm");
subs.submit();

, в другом js-файле есть запрос get

var xhr = new XMLHttpRequest();
xhr.open("GET", "login.js"); 
xhr.onload = function(event){ 
    alert("The server responded with: " + event.target.response); 
}; 
var formData = new FormData(document.getElementById("myForm")); 
xhr.send(formData);

Answer 1

То, как вы пытались это сделать, неверно: свойство action используется для перенаправления пользователя на указанную ссылку.

Вместо этого перехватите событие submit и предотвратите действие submit по умолчанию.

Затем вы можете использовать класс FormData для извлечения данных формы.

<form id="myForm">
    <input type="text" name="username" >
    <input type="submit" value="Send">
</form>

<script>
    document.querySelector('#myForm').addEventListener('submit', e => {
        e.preventDefault();

        const data = new FormData(e.target);

        alert(data.get('username'));
    });
</script>

Затем вы сможете асинхронно отправлять результат на удаленный сервер для проверки учетных данных.

Answer 2

"action" не может быть файлом JS.Это должен быть URL, который обработает запрос на отправку.Или это может быть та же страница ...

Если вы не можете выполнить некоторые проверки перед отправкой страницы, вы можете использовать следующий код (здесь codepen ):

let myForm = document.getElementById("myForm");

let mySubmit = function() {
  let tel = document.getElementById("tel").value;
    var parsed = parseInt(tel);
  if (isNaN(parsed)) {
    alert("wrong number!!!");
    return false;
  } else {
    alert("success!!!");
    return true;
  }
};

<form id="myForm" action="#" onsubmit="mySubmit()">
  <input type="text" id="tel" placeholder="tel">
  <button type="submit">verifica</button>
</form>

Answer 3

Я использую событие submit для обработки отправки формы в js.

let myForm = document.getElementById("myForm");

myForm.addEventListener('submit', function()
{
    //Your submit logic with data sending goes here
});