Question

所以我的问题非常简单。

如何从表单中获取用户输入并将其放入变量？

我正在努力完成这项简单的任务，并希望得到一些帮助。

这是我的代码：

HTML：

<body>
        <form>
            <input type="text" id="input_id" value="">
            <input type="submit" value="Submit">
            <div id="alert" style="color: red"></div>
        </form>
    </body>

的Javascript

    var a = document.getElementById('input_id').value;

function wawa() {
    return a;
}
document.getElementById('alert').innerHTML = "user entered this value: " + " " + a;

我想用vanilla JS做这个，没有库。

感谢。

Answer 1

你不需要在你的功能之外使用变量。您所需要的只是button和onclick event。 onclick event调用一个检查输入和写入<div>的函数。

＆＃13;

function wawa() {
  var variable = document.getElementById('input_id').value;
  document.getElementById('alert').innerHTML = 'The user input is: ' + variable;
}

＆＃13;

<body>
  <form>
    <input type="text" id="input_id" value="">
    <input type="button" value="Submit" onclick="wawa()" />
    <div id="alert" style="color: red"></div>
  </form>
</body>

＆＃13;

Answer 2

就像这样：

＆＃13;

var a = document.getElementById('input_id');
a.addEventListener('keyup',function() {
document.getElementById('alert').innerHTML = "user entered this value: " + " " 
   + this.value;
})

＆＃13;

<form>
  <input type="text" id="input_id" value="">
  <input type="submit" value="Submit">
  <div id="alert" style="color: red"></div>
</form>

＆＃13;

Answer 3

如果适用于您，可以尝试使用此脚本：

var a = document.getElementById('input_id');
a.addEventListener('keyup', function(event) {
document.getElementById('alert').innerHTML = "user entered this value: " + " " 
   + this.value;
})

Answer 4

您可以使用一个简单的按钮，通过onclick调用JavaScript函数。

您遗失的主键是JavaScript event与您的按钮绑定。

以下是：

＆＃13;

function getData() {
  var a = document.getElementById("input_id").value;
  var message = "user entered this value: " + a;

  document.getElementById("alert").innerHTML = a;
  console.log(a);
}

＆＃13;

<body>
  <form>
    <input type="text" id="input_id" value="">
    <div id="alert" style="color: red"></div>
    <button onclick="getData();">Get Data</button>
  </form>
</body>

＆＃13;

如果您的表单不需要提交，则不需要来自，只能使用oninput事件来获得更具响应性的输出：

＆＃13;

function getData() {
  var a = document.getElementById("input_id").value;
  var message = "user entered this value: " + a;

  document.getElementById("alert").innerHTML = a;
}

＆＃13;

<body>
  <input type="text" id="input_id" value="" oninput="getData();">
  <div id="alert" style="color: red"></div>
</body>

＆＃13;

如果你想要一些关于事件的小教程，这是一个开始MDN Building Blocks Events的好地方。

鉴于您需要提交数据，您还可以尝试onsubmit：

＆＃13;

function getData() {
  var a = document.getElementById("input_id").value;
  var message = "user entered this value: " + a;

  document.getElementById("alert").innerHTML = a;
}

function submittedData() {
  var a = document.getElementById("input_id").value;
  console.log(a);
}

＆＃13;

<body>
  <form onsubmit="submittedData();">
    <input type="text" id="input_id" value="" oninput="getData();">
    <div id="alert" style="color: red"></div>
    <input type="submit" value="Submit" />
  </form>
</body>

＆＃13;

如何从javascript表单获取用户输入？

4 个答案: