Javascript有一个表单提交，只需更新div标签中的html

Question

嗨，我有一个网页，可以让一些人通过单击按钮向他们的网页添加信息，或者无论如何这就是目标。他们单击按钮，页面的显示部分将更改为带有Javascript的表单。现在，此表单仅允许他们选择要更改的信息部分，并且在提交时我不想重定向，我甚至不希望它向服务器发送任何内容。表单只有一个值，我希望将其传递到存储第一个表单值的函数中，在旧表单基于前一个表单的地方放置一个新表单，然后最终将信息提交到服务器，php 处理其余部分并更新数据库。所以我到目前为止有这个，

    <script type="text/javascript" src="jquery.js"></script>     
<script type="text/javascript" src="<?php echo BASE_JS_URL;?>gamearray.js"></script>      
<script type="text/javascript">
function addGameForm(){         
            var addGameForm = '<form name="game" id="game" onsubmit="displayGameForm(this.form[game])">'
                +'<select name="game" id="game">'
                +'<option value="starcraftII">Starcraft II</option>'
                +'<option value="worldofwarcraft">World of Warcraft</option>'
                +'<option value="callofduty">Call of Duty</option>'
                +'</select>'
                +'<input type="submit" value="Add">'
                +'</form>';
             $("#user_info").html(addGameForm);
     }
     function displayGameForm(gamename){
         $("#user_info").html(gamearray[gamename]);
     }

addGameForm（） 函数有效，但提交时其中的表单只是将我重定向到它开始的页面，并在 URL 中使用游戏的值。任何帮助将不胜感激！此外，如果有更好的方法可以在新行上将 html 分配给 javascript 变量，而没有烦人的 +'' 东西，我将不胜感激！

提前感谢！

编辑 好的，为了更清楚起见，页面上有一个按钮，单击该按钮时，将调用addGameForm（）函数。这将新表单显示在页面上的div标签中（工作），然后当提交新表单时，我需要它来加载一个新表单，以便用户可以完成输入他需要的所有数据，然后将其提交到服务器。一个数据库调用，而且看起来更酷。:P

编辑：这是游戏阵列.js文件。

gamearray = new Array{
    starcraftII: 'Hi',
    callofduty: '<form name="callofduty" id="callofduty" action="callofduty_info_handle.php" method="get">'
            +'Username: <input type="text" name="username" id="username"/><br/>'
            +'Kill/Death Ratio: <input type="text" name="kdr" id="kdr"><br/>'
            +'Role: <select name="role" id="role">'
            +'<option value="Sniper">Sniper</option>'
            +'<option value="Explosives">Explosives</option>'
            +'<option value="Close Quarters">Close Quarters</option>'
            +'<option value="Flag Runner">Flag Runner</option>'
            +'<option value="Cover Fire">Cover Fire</option>'
            +'<option value="Assault">Assault</option>'
            +'<option value="Defender">Defender</option>'
            +'</select><br/>'
            +'Game Type: <select name="gametype" id="gametype">'
            +'<option value="Free for All">Free for All</option>'
            +'<option value="Team Deathmatch">Team Deathmatch</option>'
            +'<option value="Capture the Flag">Capture the Flag</option>'
            +'<option value="Mercenary">Mercenary</option>'
            +'<option value="Domination">Domination</option>'
            +'<option value="Ground War">Ground War</option>'
            +'<option value="Demolition">Demolition</option>'
            +'<option value="Sabotage">Sabotage</option>'
            +'<option value="Headquaters">Headquarters</option>'
            +'<option value="Search and Destroy">Search and Destroy</option>'
            +'<option value="Team Tactical">Team Tactical</option>'
            +'</select><br/>'
            +'<input type="submit" value="Add">'
        +'</form>',
    worldofwarcraft: ''
};

Answer 1

如果您对

实际提交表单不感兴趣，那么只需将其删除并在按钮上放置一个单击事件：

function addGameForm(){         
        var strGameForm = '<select name="game" id="game">'
            +'<option value="starcraftII">Starcraft II</option>'
            +'<option value="worldofwarcraft">World of Warcraft</option>'
            +'<option value="callofduty">Call of Duty</option>'
            +'</select>'
            +'<input type="button" value="Add" onclick="displayGameForm()">';
         $("#user_info").html(strGameForm);
 }
 function displayGameForm(){
     $("#user_info").html($("#game option:selected").val());
 }  

也许您可以使用常规的一维数组来存储游戏数组数据：

var gameArray = new Array():
gameArray[0] = "startcraft HTML";
gameArray[1] = "callofduty HTML";
gameArray[2] = "worldofwarcraft HTML";

然后使用相应的索引作为期权的值，如下所示：

+'<option value="0">Starcraft II</option>'
+'<option value="2">World of Warcraft</option>'
+'<option value="1">Call of Duty</option>'

然后你应该能够使用：

gameArray[$("#game option:selected").val()];

您可以考虑将每个游戏的 HTML 存储在单独的.html文件中，并使用 jQuery 加载它们：

function displayGameForm(){
    switch($("#game option:selected").val())
    {
        case 0:
            $('#user_info').load('starcraft.html');
            break;
        case 1:
            $('#user_info').load('callofduty.html');
            break;
        case 2:
            $('#user_info').load('worldofwarcraft.html');
            break;
    }
}