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（）函數的作品，但submited當它的形式只是重定向我就開始與遊戲中的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

，如果你不感興趣，實際上是提交表單，則只是將其刪除，並把click事件上的按鈕：

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