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()来避免页面重新加载一件事，添加{ {1}}在您的js文件中，您要求在页面加载时执行该函数，您需要将函数移动到提交事件。

这是一个工作示例和快乐编码：）

sConsole()

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

Answer 2

您错过了onclick或onSubmit，您还应该使用.value

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

你很亲密，只需要考虑几件事。

获取输入字段的值

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

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

或

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

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

调用Javascript函数

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

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

防止默认

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

如果您希望每次提交后文本框都“擦除”，则最好重置函数中的值而不是提交表单。要重置该值，您只需执行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>

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

3 个答案:

获取输入字段的值

调用Javascript函数

防止默认

代码示例