javascript - マルチステップフォーム

Question

フォームを実装/構築する方法に問題があります。これが概要です。

フォームの最初のステップは、「責任センター」に記入することです。ただし、ユーザーは複数の責任センターを追加できます。次のステップは、追加された各責任センターに 1 つまたは複数の「アカウントコード」が必要です。フォームの最後で送信する前に、すべてのデータを編集可能にする必要があります。

結果は次のようになります。

|**responsibility center**||**account codes**|  
|        center 1         || account code 1  |  
|                         || account code 2  |  
|        center 2         || account code 1  |
etc..

フォームをどのように構築/実装するかについてのアイデアが必要です。

編集1

これは私が試したものです

最初のステップ 第 1 ステップ - 責任センター

2段目
2 番目のステップ - アカウントコード

結果

EDIT 2 複数の行を追加する方法（2番目のステップのように）はすでに知っており、最初のステップから1番目のステップにすでに実装できます。ここに私の質問があります：

責任センターごとにアカウントコードを追加するにはどうすればよいですか?
私が試したことがそれを実装するための実用的な方法ではない場合、どうすればよいですか?

score 2 · Accepted Answer

残念ながら、アプリの写真を投稿する前に、この回答を書き始めました。アイデアはまだ関連性がありますが、私の例をあなたがしていることに合わせて調整したでしょう. 申し訳ありません。

jQuery と AJAX を使用して作業を完了します。jQuery は、DOM への新しい要素の挿入を処理し、フィールドの検証を行います。AJAX を使用して、アカウントコードが RC 間で重複していないことを確認します。<form action= method=>個人的には、プロセスをより細かく制御でき、準備が整う前にユーザーを別のページに移動させないため、従来の方法を使用する代わりに AJAX を使用してフォーム送信を処理することもできます。ただし、<form>例を説明するのが最も簡単です。最初にそれを構築してから、必要に応じて AJAX を使用するように変更できます。

ここからの例は白紙の状態を想定しています (つまり、これを書く前にあなたのサンプルアプリを見たことがありませんでした):

まず、jQuery/javascript で、追加された各 RC を追跡するためのカウンターが必要です。これは<head>、HTML/PHP のタグに含めることも、別のファイルに保存することもできます。私の名前をクリックして、私が提供した他の AJAX の回答を見ると、多くの有用な例が表示されます。

<script type="text/javascript">
    $(document).ready(function() {
        var ctr = 0;
    });
</script>

HTML では、各 RC DIV を追加する DIV が必要です。また、ユーザーが新しい RC の作成を開始するためのリンク/ボタンなどが必要です。これは簡単なフォームで、[RC タイトル] と [アカウントコード] だけでも、別の [アカウントコード] フィールドと [完了/送信] ボタンを作成するためのリンク/ボタン/その他のものがあります。

HTML:

<div id="container">
    <form action="yourprocessorfile.php" method="POST" id="myform"></form>
</div>
<input type="button" id="mybutt" value="Add New RC" />

JAVASCRIPT/jQuery (再び、上記の (document).ready() セクション内):

$('#mybutt').click(function() {
    ctr++;
    var str = 'RC TITLE:<br><input id="RC-"'+ctr+' class="RC" type="text"><br>ACCOUNT CODE<br><input id="AC-"'+ctr+' class="AC" type="text"><br>';
    $('#myform').append(str);
});

ユーザーが [完了] を押したら、再度 jQuery を使用して、各 [アカウントコード] フィールドが入力されていることを確認します。

$('#done').click(function() {
    $('.RC').each(function() {
        if ($(this).val() == '') {
            alert('Please complete all fields');
            $(this).focus();
            return false;
        }
    });
    $('.AC').each(function() {
        if ($(this).val() == '') {
            alert('Please complete all fields');
            $(this).focus();
            return false;
        }
    });
    $('#myform').submit();
});

編集 2 / 質問 1:

次の方法で、RC にリンクされた新しいアカウントコードを追加できます。

増分IDなど、一意のデータ要素を何らかの方法でRCに割り当てる必要があります
新しいACを追加するためのリンクがあります
jQuery を使用して最も近い RC 要素の ID を取得する
数値部分を分割するために使用します.split()（変数に割り当てます）
ACを作成するときにその番号を使用します

$('.add_AC').click(function() { //注: クラスを使用したので、各 RC 変数へのリンクを作成できます var num = $(this).parent().attr('id'). split('-')[1]; var str = ''; });

上記の例では:

==> クラスを使用したため、そのクラスを持つ任意の要素がクリックされるたびに発火します。もちろん、ボタンを作成するときは、次のようにそのクラスをボタン定義に追加する必要があります。

<input type="button" class="add_AC" value="Add Account Code" />

num ==> は連鎖した jQuery メソッドを使用して、RC の ID の数値部分を次々と取得します。

$(this) ==> [アカウントコードの追加] ボタン/リンク/クリックされたものは何でも。

.parent() ==> これは、状況に応じて正しい場合と正しくない場合があります。これは、DOM をトラバースして RC 要素の ID コードを見つける部分で、次のようになりますRC-3。次のことを試す必要があります。

.parent().parent() .sibling() .parent().sibling() .closest() .prev() または .next()

Dev Tools ウィンドウを開いた状態で、これらのセレクターを試してみてください。RC 要素を見つけるのに数分しかかかりません。または、別の質問をして HTML を投稿してください。

.attr('id') ==> 明らかに、ID のテキストを返します。RC-3

.split('-')[1] ==>RC片側 (ゼロ) と反対側 ( 31)で配列を作成します

うまくいけば、これでどこから始めればよいかがわかります...

javascript - マルチステップフォーム

1 に答える 1

Related

Reference