0

嗨，我有一个网页，可以让一些人通过单击按钮将信息添加到他们的网页，或者这就是目标。他们单击按钮，页面的显示部分变为带有 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: ''
};
4

1 回答 1

2

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

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;
    }
}
于 2012-07-06T09:55:09.430 回答