Javascript 在“提交”按钮单击时获取输入框值
我正在使用Javascript 在“提交”按钮单击时获取输入框值,javascript,jquery,html,css,forms,Javascript,Jquery,Html,Css,Forms,我正在使用ImpactJS引擎开发一个游戏，我已经为我的游戏创建了一个基本表单，其中包含输入框和提交按钮。我可以从输入框中检索值，但我想要的是，当玩家单击submit时，输入框中的任何值都会被获取，我应该能够在submit单击时获取该值。如果值为空，我应该得到一个警告，说“无值或其他”。我想使用这个最终值并将其分配给一个变量，我可以在冲击引擎中的JavaScript文件中使用该变量来跟踪游戏中的输入。我对HTML和CSS都是新手，所以我不知道如何实现这一点 下面是我的HTML/CSS代码，它有一
ImpactJS<!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>
谢谢 为单击提交按钮创建事件侦听器。 在jQuery中： 香草js 然后从输入框中获取值： 在jQuery中： 香草js
如果您只需要有人单击按钮时输入字段的值，则此解决方案可能适用于您： JS: 试试这个 html:
所以，您只需要为submit按钮设置一个事件，当submit按钮事件发生时，您是否可以从输入中获取值？就这样？是的，基本上要复杂得多。它就像是我们建立的问答界面。因此，每当玩家在文本字段中输入答案并按下submit时，我必须将答案存储在某个变量中。我应该能够在js文件中使用该变量来检查答案是否与数据库（mongodb）中存储的答案匹配。这就是设计。我不知道我是否走上了实现这一目标的正确道路。非常感谢。除了这行代码做什么，我什么都有了$（'prob#u submit_mssg'）.html（formInput）@user3311433抱歉，我使用该行进行测试。如果您查看演示，您将看到它使用输入框中输入的内容更新div。我将编辑我的答案以删除它。好的，谢谢，但是现在我如何获取formInput值，因为它是事件函数中的局部变量。我希望能够在其他函数中使用该值，将其与另一个变量进行比较，该变量存储在数据库define
formInputProblemDisplay: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();
},
$('#submit-button').on('click', function() {
});
document.getElementById('submit-button').addEventListener('click', function() {
});
$('#submit-button').on('click', function() {
var value = $('input').val();
// Do what you want with the value
});
document.getElementById('submit-button').addEventListener('click', function() {
var value = document.getElementById('input').value;
// Do what you want with the value
});
$('#problemsubmit').on('click', function (event) {
event.preventDefault();
var formInput = $('#probleminput').val();
});
<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>
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);
});