如何在javascript中从html表单中获取数据答案

【问题标题】：how to get data from html form in javascript如何在javascript中从html表单中获取数据
【发布时间】：2018-10-03 14:05:58
【问题描述】：

我正在尝试在 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);

【问题讨论】：

实际发生了什么？没有？数据错误？加载页面时出错？
错误加载页面
那个错误会是......？您应该尽可能地向我们提供所有信息，而不是仅仅说“这里的代码损坏了”。
你的“动作”应该是服务器或html页面，而不是JS
好的，我应该如何处理 html 页面？我没有服务器

标签： javascript html forms

【解决方案1】：

您尝试这样做的方式是错误的，action 属性用于将用户重定向到给定的链接。

相反，捕获提交事件并阻止提交默认操作。

然后您可以使用 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>

然后您将能够将结果异步发送到远程服务器以检查凭据。

【讨论】：

【解决方案2】：

我使用事件submit来处理js中的表单提交。

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

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

【讨论】：

【解决方案3】：

"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>

【讨论】：