title: Fetching input box value on submit button click
body: <p>I am working on a game using <code>ImpactJS</code> engine 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. </p>
  
  <p>Below is my HTML/CSS code that has an input box and a submit button. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Impact Game&lt;/title&gt;
      &lt;style type="text/css"&gt;
          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;
          }
  
      &lt;/style&gt;
      &lt;script type="text/javascript" src="lib/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="lib/impact/impact.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="lib/game/main.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="canvaswrapper"&gt;
          &lt;canvas id="canvas" width="1024" height="768"&gt;&lt;/canvas&gt;
      &lt;div id="problemform" class="form-inline"&gt;
          &lt;input id="probleminput" class="form-inline" type="text" style="display: inline;"&gt;&lt;/input&gt;
          &lt;button id="problemsubmit" class="btn" style="display: inline-block;"&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
          &lt;div id ="prob_submit_mssg" style="display: block;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Below is my block of code in <code>ImpactJS</code> in a different JS file to display the input box and submit button using Jquery</p>
  
  <pre><code>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();
          },
  </code></pre>
  
  <p>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?</p>
  
  <p>Thanks!</p>