Question

我正在尝试在html中做一个简单的登录表单，并在警报中获取响应，但我做不到。这是我的html代码

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

在js文件中，我提交了请求

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

在另一个js文件中，有获取请求

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属性用于将用户重定向到给定的链接。

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

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

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

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

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

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

如何从javascript中的html表单获取数据

3 个答案: