title: Capture values from select and text inputs using JS and return output to HTML
body: <p>I have a form that is somewhat like a calculator. A number is entered into a text box and using a dropdown, the user selects a number that is used as a multiplier. 
  I can capture the value from the text box properly, however having capturing the value from the select input is tricky. </p>
  
  <p>I'd like this function to be run when the user changes the number in the textbox or changes the option they've selected in the select field.</p>
  
  <p><a href="https://jsfiddle.net/b97nkpx0/1/" rel="nofollow">FIDDLE</a></p>
  
  <pre><code># HTML
  &lt;form&gt;
      &lt;input type="text" id="numberInput"&gt;&lt;/input&gt;
      &lt;select id="lengthInput"&gt;
          &lt;option value="1"&gt;1&lt;/option&gt;
          &lt;option value="2"&gt;2&lt;/option&gt;
      &lt;/select&gt;
  &lt;/form&gt;
  &lt;div id="result"&gt;&lt;/div&gt;
  
  # JS
  $(function () {
      var amount = $('#numberInput').val();
      var length_value = ''
      $('#lengthInput').on("change", function () {
          var length = document.getElementById("lengthInput");
          var length_value = length.options[length.selectedIndex].value;
      }).change();
      var calculatedAmount = amount * length_value;
      document.getElementById('result').innerHTML = amount
  });
  </code></pre>