提交按鈕時提取輸入框值點擊

我正在使用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

提交按鈕時提取輸入框值點擊

回答

相關問題