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

Question

https://codepen.io/anon/pen/NYaeXV

我正在尝试记录 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

您已经很接近了，只需考虑几件事。

获取输入字段的值

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

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

或

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

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

调用 Javascript 函数

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

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

防止默认

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

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

代码示例

总而言之，这是一个示例代码段，其中包含有关您的原始示例的 cmets。

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