0

こんにちは、ボタンをクリックするだけでウェブページに情報を追加できるウェブページがありますが、とにかくそれが目標です。ボタンをクリックすると、ページの表示部分が Javascript を使用したフォームに変わります。さて、このフォームでは、情報のどの部分を変更したいかを選択することしかできず、送信時にリダイレクトしたくないので、サーバーに何も送信したくありません。フォームには1つの値しかありません。最初のフォームの値を保存する関数にそれを渡し、古いフォームが前のフォームに基づいていた場所に新しいフォームを配置し、その後最終的に情報を送信しますPHPが残りを処理し、DBを更新するサーバー。だから私はこれまでのところ、

    <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 に game の値が含まれているページにリダイレクトされます。どんな助けでも大歓迎です！また、新しい行の javascript 変数に html を代入するより良い方法があれば、 +'' という煩わしいものを使わずに知っていただければ幸いです!

前もって感謝します！

EDIT分かりやすくするために、クリックすると addGameForm() 関数を呼び出すボタンがページにあります。これにより、新しいフォームがページのdivタグに表示され(作業中)、新しいフォームが送信されたときに、新しいフォームをロードするだけで済み、ユーザーが必要なすべてのデータを入力してから送信できるようになります。サーバーに。1 つのデータベース呼び出しに加えて、よりクールに見えます。: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());
 }

通常の 1 次元配列を使用して、ゲーム配列データを格納できます。

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 に答える