0

php/ajaxを介してmysqlデータベースから質問と回答の選択肢を取得することにより、マルチステップフォームを作成しようとしています(ページのリロードは必要ありません)。ただし、.phpページがすべてのdivを生成する場合、データの送信に問題があるようです(少なくとも、それが機能しない理由についての理論です)。私がやろうとしている方法は、すべてを HTML で直接記述すればうまくいくように見えますが、それは動的ではないため、この特定のタスクには役に立ちません。下に疑似コーディングしたようなフォームを作成することは可能ですか?

<div>
 <div id="stepone" class="section"> </div>
 <div id="steptwo" class="section"> </div>
 <div id="stepthree" class="section"> </div>
 <div id="stepfour" class="section"> </div>
</div>

次に、PHP サイトで入力タグを生成して正しい div に割り当てます。これにより、div は HTML/JS で作成されますが、チェックボックスやテキストエリアなどの入力は PHP を通じて動的に生成されます。これを行う良い方法を考えることができないようですか？

このページは JQM (jQuery Mobile) で作成されているため、このタスクではさまざまな div ロールが問題になる可能性があることに注意してください。

PHP スクリプトで生成された質問は、次のようになります。

<form id="eval_form">
 <h3>Hva tenkte du om møtet?</h3>
  <fieldset data-role="controlgroup" data-type="vertical" data-mini="true" id="2">   
   <input type="checkbox" name="res[2][1]" id="2_1" value="1"><label for="2_1">asd1</label>
   <input type="checkbox" name="res[2][2]" id="2_2" value="2"><label for="2_2">asd2</label>
   <input type="checkbox" name="res[2][3]" id="2_3" value="3"><label for="2_3">asd3</label>
  </fieldset>
 <h3>Hva følte du om møtet?</h3>
  <fieldset data-role="controlgroup" data-type="vertical" data-mini="true" id="3"> 
   <input type="checkbox" name="res[3][1]" id="3_1" value="1"><label for="3_1">test1</label>
   <input type="checkbox" name="res[3][2]" id="3_2" value="2"><label for="3_2">test2</label>
   <input type="checkbox" name="res[3][3]" id="3_3" value="3"><label for="3_3">test3</label>
   <input type="checkbox" name="res[3][4]" id="3_4" value="4"><label for="3_4">test4</label>
  </fieldset>
 <input type="button" id="submit" value="Submit" class="submit-btn">
</form>

私のデモ プログラムのコードは次のようになり、問題なく投稿できます。

<form id="eval_form">

        <!-- STEP 1-->
        <div data-role="content" id="form1" class="section">
            <input type="text" name="answer[1]" placeholder="Write something..." class="required"></input><p/>
            <input type="text" name="answer[2]" placeholder="Write something..." class="required"></input><p/>
            <input type="button" name="next1" value="Next" id="next1" onClick="toggleVisibility('form2')" class="next-btn"/>
        </div>

        <!-- STEP 2-->
        <div data-role="content" id="form2" class="section">
            <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                <input type="radio" name="answer[4]" id="1" value="1" class="required"/><label for="1">Value 1</label>
                <input type="radio" name="answer[4]" id="2" value="2" class="required"/><label for="2">Value 2</label>
                <input type="radio" name="answer[4]" id="3" value="3" class="required"/><label for="3">Value 3</label>
            </fieldset>
            <input type="button" id="back2" value="Back" onClick="toggleVisibility('form1')" class="back-btn">
            <input type="button" name="next2" value="Next" id="next2" onClick="toggleVisibility('form3')" class="next-btn"/>
        </div>

        <!-- STEP 3-->
        <div data-role="content" id="form3" class="section">
            <fieldset data-role="controlgroup" data-type="vertical" data-mini="true" class="required">
                <input type="checkbox" name="answer[5][1]" id="1" value="1"/><label for="1">Testie</label>
                <input type="checkbox" name="answer[5][2]" id="2" value="2"/><label for="2">Testoe</label>
                <input type="checkbox" name="answer[5][3]" id="3" value="3"/><label for="3">Tester</label>
            </fieldset>
            <input type="text" name="answer[3]" placeholder="Write something..." class="required"></input><p/>
            <input type="button" id="back3" value="Back" class="back-btn" onClick="toggleVisibility('form2')">
            <input type="button" id="submit" value="Submit" class="submit-btn"/>
        </div>

    </form>

データを送信する Ajax 関数:

$(document).ready(function()
    {
            $("#submit").click(function() 
            {
                var data_string = $('#eval_form').serialize();
                $.ajax(
                {
                    type:'POST',
                    url:'add.php',
                    data:data_string,
                    success:function(response)
                    {
                        $("#eval").html(response);
                    }
                });         
            })
    });
4

1 に答える 1

2

id の方法は、ステップを含む div を 1 つだけ持つことです

<div id="stepContainer" >
    <input type="text" id="step1Input" />
</div>

そんな感じ。

ajax クエリは、ステップ コンテナー内の任意の要素を取得し、GET/POST を介して適切にそれらを php/asp に送信し、ページがサーバー ロジックを実行します。戻ったときに、次のステップに必要な確認または html を返すことができます。

これで html が返されるか、サーバーからの応答に基づいて JavaScript で新しい html が作成されたら、の内容を新しい html に置き換えることができますstepContainer。これは、ステップ 2 として機能します。

現在のステップを追跡するために、javascript で非表示の div またはいくつかのカウンターが必要になる場合があります。

サーバーから返される json を使用して、より多くの情報を (とにかく簡単に) 渡すことができ、エラー メッセージ、確認、html などを単一の応答に埋め込むことができます。

于 2012-07-16T09:28:21.017 に答える