javascript 单击提交按钮时获取输入框值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21839475/
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
Fetching input box value on submit button click
提问by Htlcs
I am working on a game using ImpactJSengine and I have created a basic form for my game which contains input box and a submit button. I am able to retrieve values from the input box but what I want is that when the player clicks on submit whatever value is there in the input box gets fetched and I should be able to get that value on Submit click. If the value is null I should get an alert saying "no value or whatever". I want to use this final value and assign it to a variable that I can use in my JavaScript files inside the Impact engine to keep a track of the input from within the game. I am new to HTML, CSS in general so I have no clue how to achieve this.
我正在使用ImpactJS引擎开发游戏，我为我的游戏创建了一个基本表单，其中包含输入框和提交按钮。我能够从输入框中检索值，但我想要的是当玩家点击提交时，输入框中的任何值都会被获取，我应该能够在点击提交时获得该值。如果值为空，我应该收到一条警告，说“没有价值或其他什么”。我想使用这个最终值并将其分配给一个变量，我可以在 Impact 引擎内的 JavaScript 文件中使用该变量来跟踪游戏中的输入。我是 HTML、CSS 的新手，所以我不知道如何实现这一点。
Below is my HTML/CSS code that has an input box and a submit button.
下面是我的 HTML/CSS 代码，它有一个输入框和一个提交按钮。
<!DOCTYPE html>
<html>
<head>
<title>Impact Game</title>
<style type="text/css">
html,body {
background-color: #333;
color: #fff;
font-family: helvetica, arial, sans-serif;
margin: 0;
padding: 0;
font-size: 12pt;
}
#problemform {
display: none;
width: 300px;
height: 100px;
}
#probleminput {
position: absolute;
display: none;
top: 450px;
left: 240px;
height: 50px;
width: 350px;
}
#problemsubmit {
position: absolute;
display: none;
top: 530px;
left: 623px;
height: 40px;
width: 100px;
padding: 5px 10px 8px 2px;
}
#prob_submit_msg {
width: 30%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#canvaswrapper {
position: relative;
height: 768px;
width: 1024px;
display: block;
margin: auto;
margin-top: 80px;
vertical-align: middle;
}
#canvas {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="lib/impact/impact.js"></script>
<script type="text/javascript" src="lib/game/main.js"></script>
</head>
<body>
<div id="canvaswrapper">
<canvas id="canvas" width="1024" height="768"></canvas>
<div id="problemform" class="form-inline">
<input id="probleminput" class="form-inline" type="text" style="display: inline;"></input>
<button id="problemsubmit" class="btn" style="display: inline-block;">Submit</button>
</div>
<div id ="prob_submit_mssg" style="display: block;"></div>
</div>
</body>
</html>
Below is my block of code in ImpactJSin a different JS file to display the input box and submit button using Jquery
下面是我ImpactJS在不同 JS 文件中的代码块，用于使用 Jquery 显示输入框和提交按钮
ProblemDisplay:function() {
this.setQuestion('This is a title','this is where the body will go and it will be super long and impossible to read or understand.', 'This is a hint');
this.isActive = true;
var form = $("#problemform");
var inputBox = $("#probleminput");
var submitButton = $("#problemsubmit");
form.show();
inputBox.show();
submitButton.show();
},
This is what I have working for now. But now I want the string passed in the input box to be stored in a different variable when clicking the submit button. How to achieve this?
这就是我现在的工作。但是现在我希望在单击提交按钮时将输入框中传递的字符串存储在不同的变量中。如何实现这一目标？
Thanks!
谢谢！
采纳答案by ashbuilds
Try With this.. :
试试这个..：
html:
html：
<input id="probleminput" class="form-inline" type="text" style="display: inline;"> </input>
<button id="problemsubmit" class="btn" style="display: inline-block;">Submit</button>
<a id='testop' ></a>
Js:
JS：
var form = $("#problemform");
var inputBox = $("#probleminput");
var submitButton = $("#problemsubmit");
submitButton.click(function(){
var getval = ($("#probleminput").val()?$("#probleminput").val():alert('please fill the text field'))
$('#testop').text(getval);
});
回答by hola
Create an event listener for a click on the submit button.
为单击提交按钮创建一个事件侦听器。
In jQuery:
在 jQuery 中：
$('#submit-button').on('click', function() {
});
In vanilla js
在香草js中
document.getElementById('submit-button').addEventListener('click', function() {
});
Then get the value from the input box:
然后从输入框中获取值：
In jQuery:
在 jQuery 中：
$('#submit-button').on('click', function() {
var value = $('input').val();
// Do what you want with the value
});
In vanilla js
在香草js中
document.getElementById('submit-button').addEventListener('click', function() {
var value = document.getElementById('input').value;
// Do what you want with the value
});
回答by badAdviceGuy
If all you need is the value of the input field when someone clicks on the button, then this solution may work for you:
如果您只需要有人单击按钮时输入字段的值，那么此解决方案可能适合您：
JS:
JS：
$('#problemsubmit').on('click', function (event) {
event.preventDefault();
var formInput = $('#probleminput').val();
});
