Console.log 数据来自 HTML 表单输入

Question

我正在尝试记录 HTML 表单输入的值。我在 CodePen 中放置了多个选项。这是我最初的思考过程。

<form action="">
<input type="text" name="data" id="data">
<button type="submit">Submit</button>
</form>

function sConsole() {
  var data = document.getElementById("data");
  console.log(data.value());
}
sConsole();

Answer 1

您需要使用 value 而不是 value() 因为 value 不是函数，还可以考虑使用 e.preventDefault() 来避免页面重新加载另一件事，通过将 sConsole() 添加到您的 js 文件中，您要求在页面加载时执行函数，您需要将函数移至提交事件。

这是一个工作示例和快乐的编码:)

function sConsole(event) {
  event.preventDefault();
  var data = document.getElementById("data");
  console.log(data.value);
  
}

<div id="container">
  <h1>Hello, world!</h1>
  <h4>Input your console data below : </h4>
  <form action="" id="form" onsubmit="sConsole(event)">
    <input type="text" name="data" id="data">
    <button type="submit">Submit</button>
  </form>
</div>

Answer 2

你错过了 onclick 或 onSubmit ，你应该也使用 .value

function sConsole() {
  var data = document.getElementById("data");
  console.log(data.value);
  //!!Option 1a
  //console.log(data.submit());
}

<div id="container">
  <h1>Hello, world!</h1>
  <h4>Input your console data below : </h4>
  <form action="">
    <input type="text" name="data" id="data">
    <button type="submit" onClick="sConsole()">Submit</button>
  </form>
</div>

Answer 3

你很接近，只是需要考虑几件事。

获取输入字段的值

输入元素的值属性存储文本框中的文本。要检索，this in javascript，使用ExampleElement.value，例如：

var dataValue = document.getElementById("data").value;

或

var data = document.getElementById("data");
var dataValue = data.value;

您还可以使用 value="" 在输入标签中指定值属性。如果您想预填充输入文本框，这很有用，例如，如果您将用户输入发送到 php 脚本以进行操作，并希望 return 包含已包含信息的文本框。

调用 Javascript 函数

有多种方法可以调用 javascript 函数，包括在特定事件发生时调用。在您的情况下，您可能希望每次用户单击提交时记录输入值。您可以添加一个事件侦听器，但为了简单起见，我们只使用内联代码。每次他们提交，让我们记录下来，所以onsubmit="sConsole();"。现在提交操作将运行您的日志记录功能。

如果您想在用户输入时记录每个更改，您可以使用事件侦听器对输入值进行更复杂的评估。

防止违约

您可能不希望每次用户单击提交时将表单实际提交到服务器并重新加载页面。通过使用 event.preventDefault();，javascript 阻止了将表单提交到服务器的常规操作，而是让用户输入和页面保持原样。

如果您希望文本框在每次提交后变为 "erases"，最好在您的函数中重置值而不是提交表单。要重置该值，您只需执行 data.value = "".

代码示例

综上所述，这是一个示例代码段，其中包含有关您的原始示例的注释。

<form action="" onsubmit="event.preventDefault(); sConsole();"> <!-- use inline JS to print input to console on submit -->
<input type="text" name="data" id="data">
<button type="submit">Submit</button>
</form>

<script>
function sConsole() {
  var data = document.getElementById("data");
  console.log(data.value); // data is the element, and we want its value
}
//sConsole(); This would call it only on script load, which isn't what you want
</script>

Console.log 数据来自 HTML 表单输入

Console.log data from HTML form input

javascript

forms

console.log

获取输入字段的值

调用 Javascript 函数

防止违约

代码示例