title: Add JavaScript onclick() to HTML form submit
body: <p>I have the following script:</p>
  <pre class="lang-javascript prettyprint-override"><code>&lt;script type= 'text/javascript'&gt;
      function displayPlayer() {
          var input = document.getElementById(&quot;player_stuff&quot;).elements;
          var position = input[0];
          var player_id = input[1];
  
          document.getElementById('disp_player').innerHTML = position + player_id
      }
  &lt;/script&gt;
  </code></pre>
  <p>And a simple HTML form:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;form id = 'player_stuff' onsubmit = 'displayPlayer()'&gt;
  
      Player's Position:&lt;br&gt;
          &lt;input type=&quot;radio&quot; name=&quot;position&quot; value=&quot;p1&quot; checked&gt;Position One
          &lt;input type=&quot;radio&quot; name=&quot;position&quot; value=&quot;p2&quot; checked&gt;Position Two
          &lt;input type=&quot;radio&quot; name=&quot;position&quot; value=&quot;p3&quot; checked&gt;Position Three
          &lt;input type=&quot;radio&quot; name=&quot;position&quot; value=&quot;p4&quot; checked&gt;Positin Four
      &lt;br/&gt;
      Add by Player ID:&lt;br&gt;
          &lt;input type='text' name='player_id'&gt;
          &lt;input type=&quot;submit&quot; value=&quot;Submit Player&quot; id='smit' &gt;
  &lt;/form&gt;
  
  &lt;div id = 'roster'&gt;
      &lt;h3&gt;Current Roster&lt;/h3&gt;
      &lt;p id= 'disp_player'&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The idea is that when I click on the <strong>Submit Player</strong> button, it will trigger the <strong>displayPlayer()</strong> function and add the position name and player ID to the
  <code>&lt;p id= 'disp_player'&gt;&lt;/p&gt;</code> tag.</p>
  <p>What am I doing wrong, since nothing is showing up?</p>