Question

我正在尝试使用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对象记录到控制台，我会很高兴。

Answer 1

试试这个：

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'属性。

希望这有帮助

使用JavaScript解析HTML表单

1 个答案: