Javascript have a form submit just update html in a div tag

Question

Hi there I have a webpage that lets some people add info to their webpage by clicking a button, or thats the goal anyways. They click the button and the display part of the page changes to a form with Javascript. Now then, this form only allows them to select which part of the info they want to change, and on submit I don't want in to redirect, I don't want it even send anything to the server. The form only has one value, and I want that to be passed into a function that stores the value of the first form, puts a new form where the old one was based on the previous form, and then after that finally submits the info to the server where php handles the rest and updates the DB. So I have this so far,

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

the addGameForm() function works but the form in it when submited just redirects me to the page it started on with the value of game in the URL. Any help would be super appreciated! Also if there is a better way to assigne the html to the javascript variable on new lines without that annoying +'' stuff I would be grateful to know!

Thanks in advance!

EDIT Okay so for some more clarity, there is a button on the page that when clicked, calls the addGameForm() function. That displays the new form in a div tag on the page(working), then when the new form is submitted, I need it to just load a new form, so that user can finish putting in all the data he needs before then submitting it to the server. One database call, plus it looks cooler. :P

EDIT: Here's the gamearray.js file.

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

if you're not interested in actually submitting the form, then just remove it and put a click event on the button:

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

maybe you could use a regular single dimensional array to store the game array data:

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

and then use the corresponding index for the options' value, like so:

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

then you should be able to use:

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

you could consider storing the HTML for each of the games in separate .html files, and load them using 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;
    }
}