Javascript 如何从javascript表单获取用户输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48070987/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get user input from javascript form?
提问by
so my question is pretty simple.
所以我的问题很简单。
How to I get user input from a form and put it into a variable ?
如何从表单中获取用户输入并将其放入变量中？
Im struggling to do this simple task and would appreciate some help.
我正在努力完成这项简单的任务，并希望得到一些帮助。
Here is my code :
这是我的代码：
html:
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
Javascript
var a = document.getElementById('input_id').value;
function wawa() {
return a;
}
document.getElementById('alert').innerHTML = "user entered this value: " + " " + a;
I would like to do this with vanilla JS and no library.
我想用 vanilla JS 而没有库来做到这一点。
Thanks.
谢谢。
采纳答案by Ivan86
You don't need a variable outside your function. All you need is a buttonand an onclick event. The onclick eventcalls a function that checks input and writes to the <div>.
您不需要函数之外的变量。您只需要一个button和一个onclick event。该onclick event调用一个函数，检查输入并写入<div>。
function wawa() {
var variable = document.getElementById('input_id').value;
document.getElementById('alert').innerHTML = 'The user input is: ' + variable;
}<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>回答by Peter
Just like this :
像这样 ：
var a = document.getElementById('input_id');
a.addEventListener('keyup',function() {
document.getElementById('alert').innerHTML = "user entered this value: " + " "
+ this.value;
})<form>
<input type="text" id="input_id" value="">
<input type="submit" value="Submit">
<div id="alert" style="color: red"></div>
</form>回答by Hanif
Can you try this script if it is work for you:
如果它适合你，你可以试试这个脚本吗：
var a = document.getElementById('input_id');
a.addEventListener('keyup', function(event) {
document.getElementById('alert').innerHTML = "user entered this value: " + " "
+ this.value;
})
回答by fjoe
You can use a simple button with a call to a JavaScript function via onclick.
您可以使用一个简单的按钮，通过onclick调用 JavaScript 函数。
The main key your missing is a JavaScript eventtied to your button.
您缺少的主要关键是与您的按钮相关联的JavaScript 事件。
Here is how:
方法如下：
function getData() {
var a = document.getElementById("input_id").value;
var message = "user entered this value: " + a;
document.getElementById("alert").innerHTML = a;
console.log(a);
}<body>
<form>
<input type="text" id="input_id" value="">
<div id="alert" style="color: red"></div>
<button onclick="getData();">Get Data</button>
</form>
</body>If your form doesn't need to be submitted you do not need a from and could just use a oninputevent to get a more responsive output:
如果您的表单不需要提交，则不需要 from 并且可以只使用oninput事件来获得更具响应性的输出：
function getData() {
var a = document.getElementById("input_id").value;
var message = "user entered this value: " + a;
document.getElementById("alert").innerHTML = a;
}<body>
<input type="text" id="input_id" value="" oninput="getData();">
<div id="alert" style="color: red"></div>
</body>If you want a little tutorial on events this is a good place to start MDN Building Blocks Events.
如果你想要一些关于事件的教程，这是开始MDN 构建块事件的好地方。
Given you need to submit the data you could also try onsubmit:
鉴于您需要提交数据，您也可以尝试onsubmit：
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);
}<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>