如何使用js提取html中的表单数据

Question

我正在尝试创建一个网络应用程序，我需要知道来自表单的用户输入。

<form action="" method="get" class="settings">
    <div class="settings">
      <label for="length">length of character(s): </label>
      <input type="number" name="length" id="length" placeholder="5" required>
      <input type="submit" value="Change">
    </div>
  </form>

我需要运行 js func foo() 的表单所以我假设我需要把它

<form action="" method="get" class="settings">
              ↑

如何获取 id="length" 的值并在 form action"foo()" 中使用它？

Answer 1

你可以通过document.getElementById("id").value;

得到长度的值

为了从表单中运行一个js，你需要使用onsubmit=""而不是action=""

onsubmit="" 允许你在提交表单时执行一个js函数，而 action="" 允许您在提交后被重定向到另一个 page/site。

阅读更多关于 action="" in this site

onsubmit="" is here

这是基于您的示例的可行代码

function foo(){
  var lgt = document.getElementById("length").value;
  alert(lgt);
}

<form class="settings" onsubmit="foo()">
    <div class="settings">
      <label for="length">length of character(s): </label>
      <input type="number" name="length" id="length" placeholder="5" required>
      <input type="submit" value="Change">
    </div>
  </form>

如何使用js提取html中的表单数据

How do I extract form data in html with js

html

javascript

forms