使用JavaScript解析HTML表单

我正在尝试用JavaScript解析表单（而不是提交POST请求）。我有一个非常通用的表格，一个输入是球队名称，多个输入是球员姓名和号码。

<!-- INPUT FORM -->
<div id="rosters_container">
    <!-- AWAY TEAM ROSTER FORM -->
    <div class="team_roster" style="background-color: blue;">
        <h2 class="team_roster_header">Away</h2>
        <form id="away_form">
            <div id="form_away_players_container">
                <div class="team_name">
                    <label>Team Name</label>
                    <input type="text" placeholder="East High Wildcats"></input>
                </div>
                <div class="form_player_add">
                    <label>Number</label>
                    <input type="text" placeholder="10" size="2"></input>
                    <label>Name</label>
                    <input type="text" placeholder="John Doe" size="15"></input>
                </div>
                <div class="form_player_add">
                    <label>Number</label>
                    <input type="text" placeholder="14" size="2"></input>
                    <label>Name</label>
                    <input type="text" placeholder="John Doe" size="15"></input>
                </div>
                <div class="form_player_add">
                    <label>Number</label>
                    <input type="text" placeholder="22" size="2"></input>
                    <label>Name</label>
                    <input type="text" placeholder="John Doe" size="15"></input>
                </div>
                <div class="form_player_add">
                    <label>Number</label>
                    <input type="text" placeholder="34" size="2"></input>
                    <label>Name</label>
                    <input type="text" placeholder="John Doe" size="15"></input>
                </div>
                <div class="form_player_add">
                    <label>Number</label>
                    <input type="text" placeholder="50" size="2"></input>
                    <label>Name</label>
                    <input type="text" placeholder="John Doe" size="15"></input>
                    <button type="button" onclick="newPlayer('away')">+Player</button>
                </div>
            </div><!-- End form_away_players_container -->
            <button type="button" class="save_players_form" onclick="captureForm('form_away_players_container')">Save</button>
        </form>
    </div>

    <!-- HOME TEAM ROSTER FORM -->
    <div class="team_roster" style="background-color: orange;">
        <h2 class="team_roster_header">Home</h2>
        <form id="home_form">
            <div class="team_name">
                <label>Team Name</label>
                <input type="text" placeholder="West High Knights"></input>
            </div>
            <div id="form_home_players_container">
                <div class="form_player_add">
                    <label>Number</label>
                    <input type="text" placeholder="10" size="2"></input>
                    <label>Name</label>
                    <input type="text" placeholder="John Doe" size="15"></input>
                </div>
                <div class="form_player_add">
                    <label>Number</label>
                    <input type="text" placeholder="14" size="2"></input>
                    <label>Name</label>
                    <input type="text" placeholder="John Doe" size="15"></input>
                </div>
                <div class="form_player_add">
                    <label>Number</label>
                    <input type="text" placeholder="22" size="2"></input>
                    <label>Name</label>
                    <input type="text" placeholder="John Doe" size="15"></input>
                </div>
                <div class="form_player_add">
                    <label>Number</label>
                    <input type="text" placeholder="34" size="2"></input>
                    <label>Name</label>
                    <input type="text" placeholder="John Doe" size="15"></input>
                </div>
                <div class="form_player_add">
                    <label>Number</label>
                    <input type="text" placeholder="50" size="2"></input>
                    <label>Name</label>
                    <input type="text" placeholder="John Doe" size="15"></input>
                    <button type="button" onclick="newPlayer('home')">+Player</button>
                </div>
            </div><!-- End form_home_players_container -->
            <button type="button" class="save_players_form" onclick="captureForm('form_home_players_container')">Save</button>
        </form>
    </div>

</div>

以下是我使用JavaScript/jQuery:解析表单的尝试

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('<div class="form_player_add"><label>Number&nbsp;</label><input type="text" placeholder="XX" size="2"></input><label>&nbsp;Name&nbsp;</label><input type="text" placeholder="John Doe" size="15"></input><button type="button" onclick="newPlayer('''+team+''')">+Player</button></div>');   
}
var captureForm = function(teamForm) {
    var items = $('#'+teamForm).children();
    console.log(items);
}

理想情况下，我想创建一个JSON对象，格式如下：

teams = {
         'away': {
            'team_name': 'Chicago Bulls',
            'players' = [
                 {'number': 10,
                  'name': 'Michael Jordan'
                 },
                 {...}
             ]
         },
        'home': {
             ....
         }
    }

现在，如果我能在用户提交"提交"按钮时将teams对象记录到控制台，我会很高兴。