提交按钮时提取输入框值点击

我正在使用ImpactJS引擎开发一款游戏，我创建了一个包含输入框和提交按钮的基本表单。我能够从输入框中检索值，但我想要的是，当玩家点击提交输入框中的任何值时，就会获取提示，我应该能够在提交点击时获得该值。如果值为空，我应该得到一个警告，说“没有价值或任何”。我想使用这个最终值，并将其分配给一个变量，我可以在Impact引擎中的JavaScript文件中使用该变量来跟踪游戏中的输入。我对HTML，CSS一般是新手，所以我不知道如何实现这一点。提交按钮时提取输入框值点击

下面是我的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>

下面是不同的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(); 
     },

这是我的工作，现在提交按钮我的ImpactJS代码块。但是现在我希望在输入框中传递的字符串在单击提交按钮时存储在另一个变量中。如何实现这一目标？

谢谢！

来源

2014-02-17 Htlcs

所以，你只需要有一个事件提交按钮，当提交按钮事件firred得到的值输入？而已？ – Pavlo

虽然基本上它更复杂。它就像我们构建的问题答案界面。因此，无论何时玩家在文本字段中输入答案并按下提交，我都必须将该答案存储在某个变量中。我应该能够在我的js文件中使用该变量来检查答案是否与数据库中存储的答案相匹配（mongodb）。这是设计。我不知道我是否在正确的轨道上实现这一目标。 – Htlcs

试试这个..：

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：

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); 
});

Complete DEMO

来源

2014-02-17 22:14:03

嗨，有没有什么办法来检查提交按钮是否像标志值（true，false）被点击？我尝试在我的脚本中声明一个全局布尔变量，并在click函数中将其设置为true，但它不会将其自身设置为true。有什么方法可以知道用户是否点击了提交按钮？ – Htlcs

设置布尔变量之外的点击功能，然后它会工作.. 'var bool = true; $（'sub'）。click（function（）{if（bool）{/ * something */bool = false}} ）'@JimZilla –

创建一个事件监听器来点击提交按钮。

在jQuery中：

$('#submit-button').on('click', function() { 

});

在香草JS

document.getElementById('submit-button').addEventListener('click', function() { 

});

然后得到从输入框中的值：

在jQuery中：

$('#submit-button').on('click', function() { 
    var value = $('input').val(); 
    // Do what you want with the value 
});

在香草JS

document.getElementById('submit-button').addEventListener('click', function() { 
    var value = document.getElementById('input').value; 
    // Do what you want with the value 
});

来源

2014-02-17 21:43:04 hola

如果你需要的是输入字段的值当有人点击该按钮，那么这个解决方案可以为你工作：

Fiddle Demo

JS：

$('#problemsubmit').on('click', function (event) { 
    event.preventDefault(); 
    var formInput = $('#probleminput').val(); 
});

来源

2014-02-17 21:50:04 badAdviceGuy

非常感谢。我得到了一切，除了这行代码是做什么的？ $（ '＃prob_submit_mssg'）HTML（的formInput）; – Htlcs

@ user3311433对不起，我正在使用该行进行测试。如果你看看演示，你会看到它用输入框中输入的内容更新div。我将编辑我的答案以将其删除。 – badAdviceGuy

好吧谢谢，但现在我如何获取formInput值，因为它是事件函数内部的局部变量。我希望能够在其他函数中使用该值来与另一个存储在数据库 – Htlcs

提交按钮时提取输入框值点击

回答

相关问题