0

JavaScript を使用したドロップダウン フォームが欲しいです。基本的に質問を作成するために必要です。仕組み: ホームページから「質問の作成」をクリックすると、質問の作成ページに移動します。そのページで、ユーザーに最初に尋ねる質問は、「どのような質問をしますか?」です。次に、いくつかのラジオ ボタンを使用して、「複数選択」、「最良のものを選択」、または「短い回答」のいずれかのタイプを選択できます。その時点から、より多くのフォームが表示されます…つまり、質問したい質問の種類に応じて、質問したい質問をサーバーに送信する前に、異なる基準のセットに記入するように求められます. . これは理にかなっていますか？これまでの私のフォームは次のとおりです。

    <!DOCTYPE html>
    <html>
        <head>
            <title>Quick Bump</title>
            <link href="styles.css" type="text/css" rel="stylesheet" />
        </head>

        <body>
            <div class="center">

            <h1 class="welcomeHeader">Create a Question:</h1>
            <form action="http://www.example.com/profile.php">

            <p class="pStyle">Please select what type of Question you'd like to ask:
                <br />
                <br />
                <input type="radio" name="genre" value="Multiple Choice" checked="checked" /> Multiple Choice
                <input type="radio" name="genre" value="Select the Best" /> Select the Best
                <input type="radio" name="genre" value="Short Answer" /> Short Answer
            </p>
            <br />

            <p class="pStyle">What is your Question?
                <br />
                <br />
                <label>Q:<input type="text" class="resizedTextBox" name="Question" /></label><br />
            </p>
            <br />

            <p class="pStyle">What are the answers available?
                <br />
                <br />
                <label>A:<input type="text" class="resizedTextBox" name="Answer 1" /></label><br />
                <label>B:<input type="text" class="resizedTextBox" name="Answer 2" /></label><br />
                <label>C:<input type="text" class="resizedTextBox" name="Answer 3" /></label><br />
                <label>D:<input type="text" class="resizedTextBox" name="Answer 4" /></label><br />
            </p>
            <br />

            <p class="pStyle">Would you like to submit this question now?</p>
            <input type="submit" class="submitLink" name="submit form" value="Submit" />
        </form>
    </div>
    <br />
    <div class="footer">
        <a href="firstWebPage.html" class="links">Home</a>
    </div>
</body>

4

1 に答える 1

0

前のフォーム要素が変更されると、jQuery を使用して、連続する各段落を段階的に表示できます。

これは、うまくいけばあなたが始めるための例です: http://jsfiddle.net/kevincollins/uarZb/

$(function () {
    $('.pStyle:first').show();
    $('input[name="genre"]').change(function(){
        $('.pStyle:eq(1)').show();
    });
    $('input[name="Question"]').change(function(){
         $('.pStyle:eq(2)').show();
    });
    $('input[name^="Answer"]').change(function(){
         $('.pStyle:eq(3)').show();
    });
});
于 2013-04-05T00:01:24.807 に答える