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

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

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