Javascript在div标记中有一个表单submit just update html

大家好，我有一个网页，让一些人通过点击按钮向他们的网页添加信息，或者这就是目标。他们单击按钮，页面的显示部分将更改为带有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变量，而不使用那些烦人的+东西，我将不胜感激

提前谢谢

编辑OK，为了更清晰，页面上有一个按钮，单击时调用addGameForm函数。这将在pageworking上的div标记中显示新表单，然后在提交新表单时，我需要它只加载一个新表单，这样用户就可以在将其提交到服务器之前完成输入所需的所有数据。一个数据库调用，再加上它看起来更酷：P

编辑：这是gamearray.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: ''
};

---

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

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());
 }  

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

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

<>你可以考虑在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;
    }
}   

---

它什么也没做，我试着在动作中加上返回false，但那只给了我一个404错误。不，没有任何改变你还能想到什么D我应该从哪个部分移除它？好的！现在我们有进展了！我想我需要的最后一步是我的游戏阵列。好像我无法访问它。我有一个键值对starcraftII:“嗨”，我根本无法访问它。如果我能让它与$user_info.htmlgamearray[$game option:selected.val]这样的东西一起工作；我会很高兴的。但现在，即使是alertgamearray[starcraftII]；不起作用。我在上面的主要帖子中发布了gamearray.js的内容。“gamearray”来自哪里？请详细说明您的要求或张贴一些更多的示例代码…在那里放一些额外的信息。gamearray只是一个巨大的关联数组，它存储html和来自addGameForm函数值的键。如果您需要更多信息，请询问awayI，他不会建议将游戏数组数据像这样存储在javascript中。最好让某种服务器端脚本生成它，最好使用数据库中的“games”、“gametype”和“roles”表。然后，您可以使用游戏ID调用脚本，并让它生成HTML。jQuery的$element.load函数非常适合这样的东西……你是说在服务器上存储表单的html？或者像数据库一样存储html？在这两种情况下，是否使用ajax将其加载到页面？

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

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;
    }
}