使用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>

现在，如果用户提交“提交”按钮时，我能将

团队
对象记录到控制台，我会很高兴的。
尝试以下方法：

var teams={};

teams.away={};teams.home={};
teams.away.players=[]; teams.home.players=[];

teams.away.team_name=$("#away_form .team_name input").val();
teams.home.team_name=$("#home_form .team_name input").val();

$("#away_form .form_player_add").each(function(ix,elem){
     var i=$(elem).find('input');
     teams.away.players.push({number:i[0].value,name:i[1].value});
 });
$("#home_form .form_player_add").each(function(ix,elem){
     var i=$(elem).find('input');
     teams.home.players.push({number:i[0].value,name:i[1].value});
 });

虽然不是最漂亮的代码，但它应该可以做到这一点。Serialize方法无法工作，因为您的输入没有“name”属性

希望这有助于
$（'away_form'）。序列化（）？
teams = {
         'away': {
            'team_name': 'Chicago Bulls',
            'players' = [
                 {'number': 10,
                  'name': 'Michael Jordan'
                 },
                 {...}
             ]
         },
        'home': {
             ....
         }
    }

var teams={};

teams.away={};teams.home={};
teams.away.players=[]; teams.home.players=[];

teams.away.team_name=$("#away_form .team_name input").val();
teams.home.team_name=$("#home_form .team_name input").val();

$("#away_form .form_player_add").each(function(ix,elem){
     var i=$(elem).find('input');
     teams.away.players.push({number:i[0].value,name:i[1].value});
 });
$("#home_form .form_player_add").each(function(ix,elem){
     var i=$(elem).find('input');
     teams.home.players.push({number:i[0].value,name:i[1].value});
 });