title: Parse HTML Form Using JavaScript
body: <p>I'm trying to parse a form with JavaScript (instead of submitting a POST request).  I have a very generic form with one input for the team name and multiple inputs for a player name and number.</p>
  
  <pre><code>&lt;!-- INPUT FORM --&gt;
  &lt;div id="rosters_container"&gt;
  
      &lt;!-- AWAY TEAM ROSTER FORM --&gt;
      &lt;div class="team_roster" style="background-color: blue;"&gt;
  
          &lt;h2 class="team_roster_header"&gt;Away&lt;/h2&gt;
          &lt;form id="away_form"&gt;
  
              &lt;div id="form_away_players_container"&gt;
  
                  &lt;div class="team_name"&gt;
                      &lt;label&gt;Team Name&lt;/label&gt;
                      &lt;input type="text" placeholder="East High Wildcats"&gt;&lt;/input&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form_player_add"&gt;
                      &lt;label&gt;Number&lt;/label&gt;
                      &lt;input type="text" placeholder="10" size="2"&gt;&lt;/input&gt;
                      &lt;label&gt;Name&lt;/label&gt;
                      &lt;input type="text" placeholder="John Doe" size="15"&gt;&lt;/input&gt;
                  &lt;/div&gt;
                  &lt;div class="form_player_add"&gt;
                      &lt;label&gt;Number&lt;/label&gt;
                      &lt;input type="text" placeholder="14" size="2"&gt;&lt;/input&gt;
                      &lt;label&gt;Name&lt;/label&gt;
                      &lt;input type="text" placeholder="John Doe" size="15"&gt;&lt;/input&gt;
                  &lt;/div&gt;
                  &lt;div class="form_player_add"&gt;
                      &lt;label&gt;Number&lt;/label&gt;
                      &lt;input type="text" placeholder="22" size="2"&gt;&lt;/input&gt;
                      &lt;label&gt;Name&lt;/label&gt;
                      &lt;input type="text" placeholder="John Doe" size="15"&gt;&lt;/input&gt;
                  &lt;/div&gt;
                  &lt;div class="form_player_add"&gt;
                      &lt;label&gt;Number&lt;/label&gt;
                      &lt;input type="text" placeholder="34" size="2"&gt;&lt;/input&gt;
                      &lt;label&gt;Name&lt;/label&gt;
                      &lt;input type="text" placeholder="John Doe" size="15"&gt;&lt;/input&gt;
                  &lt;/div&gt;
                  &lt;div class="form_player_add"&gt;
                      &lt;label&gt;Number&lt;/label&gt;
                      &lt;input type="text" placeholder="50" size="2"&gt;&lt;/input&gt;
                      &lt;label&gt;Name&lt;/label&gt;
                      &lt;input type="text" placeholder="John Doe" size="15"&gt;&lt;/input&gt;
                      &lt;button type="button" onclick="newPlayer('away')"&gt;+Player&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!-- End form_away_players_container --&gt;
  
              &lt;button type="button" class="save_players_form" onclick="captureForm('form_away_players_container')"&gt;Save&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
  
      &lt;!-- HOME TEAM ROSTER FORM --&gt;
      &lt;div class="team_roster" style="background-color: orange;"&gt;
  
          &lt;h2 class="team_roster_header"&gt;Home&lt;/h2&gt;
          &lt;form id="home_form"&gt;
  
              &lt;div class="team_name"&gt;
                  &lt;label&gt;Team Name&lt;/label&gt;
                  &lt;input type="text" placeholder="West High Knights"&gt;&lt;/input&gt;
              &lt;/div&gt;
  
              &lt;div id="form_home_players_container"&gt;
  
                  &lt;div class="form_player_add"&gt;
                      &lt;label&gt;Number&lt;/label&gt;
                      &lt;input type="text" placeholder="10" size="2"&gt;&lt;/input&gt;
                      &lt;label&gt;Name&lt;/label&gt;
                      &lt;input type="text" placeholder="John Doe" size="15"&gt;&lt;/input&gt;
                  &lt;/div&gt;
                  &lt;div class="form_player_add"&gt;
                      &lt;label&gt;Number&lt;/label&gt;
                      &lt;input type="text" placeholder="14" size="2"&gt;&lt;/input&gt;
                      &lt;label&gt;Name&lt;/label&gt;
                      &lt;input type="text" placeholder="John Doe" size="15"&gt;&lt;/input&gt;
                  &lt;/div&gt;
                  &lt;div class="form_player_add"&gt;
                      &lt;label&gt;Number&lt;/label&gt;
                      &lt;input type="text" placeholder="22" size="2"&gt;&lt;/input&gt;
                      &lt;label&gt;Name&lt;/label&gt;
                      &lt;input type="text" placeholder="John Doe" size="15"&gt;&lt;/input&gt;
                  &lt;/div&gt;
                  &lt;div class="form_player_add"&gt;
                      &lt;label&gt;Number&lt;/label&gt;
                      &lt;input type="text" placeholder="34" size="2"&gt;&lt;/input&gt;
                      &lt;label&gt;Name&lt;/label&gt;
                      &lt;input type="text" placeholder="John Doe" size="15"&gt;&lt;/input&gt;
                  &lt;/div&gt;
                  &lt;div class="form_player_add"&gt;
                      &lt;label&gt;Number&lt;/label&gt;
                      &lt;input type="text" placeholder="50" size="2"&gt;&lt;/input&gt;
                      &lt;label&gt;Name&lt;/label&gt;
                      &lt;input type="text" placeholder="John Doe" size="15"&gt;&lt;/input&gt;
                      &lt;button type="button" onclick="newPlayer('home')"&gt;+Player&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!-- End form_home_players_container --&gt;
  
              &lt;button type="button" class="save_players_form" onclick="captureForm('form_home_players_container')"&gt;Save&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my attempt at parsing the forms using JavaScript/jQuery:</p>
  
  <pre><code>var newPlayer = function(team) {
      // Remove the add player button
      $('#form_'+team+'_players_container').children().last().children().last().remove();
  
      // Add a new div with form for new player
      $('#form_'+team+'_players_container').append('&lt;div class="form_player_add"&gt;&lt;label&gt;Number&amp;nbsp;&lt;/label&gt;&lt;input type="text" placeholder="XX" size="2"&gt;&lt;/input&gt;&lt;label&gt;&amp;nbsp;Name&amp;nbsp;&lt;/label&gt;&lt;input type="text" placeholder="John Doe" size="15"&gt;&lt;/input&gt;&lt;button type="button" onclick="newPlayer(\''+team+'\')"&gt;+Player&lt;/button&gt;&lt;/div&gt;');   
  }
  
  var captureForm = function(teamForm) {
      var items = $('#'+teamForm).children();
      console.log(items);
  }
  </code></pre>
  
  <p>Ideally I'd like to create a JSON object in this format:</p>
  
  <pre><code>teams = {
           'away': {
              'team_name': 'Chicago Bulls',
              'players' = [
                   {'number': 10,
                    'name': 'Michael Jordan'
                   },
                   {...}
               ]
           },
          'home': {
               ....
           }
      }
  </code></pre>
  
  <p>Right now I'd be happy if I could log the <code>teams</code> object to the console when the user submits the "submit" button.</p>