応用編5 - 複数フォームと値のコピー

espar form では、同一ページに複数のフォームを配置することができます。これを応用すると、順番にフォームの show / hidden を切り替えることで、設問数の多いアンケートフォームのような振る舞いを実現できます。

その際、あるフォームでの入力値や、入力値から計算された値を、次のフォームに引き継ぎたい場合があります。espar form では、コピークラスと呼ばれる専用のクラスでこれを実現しています。コピークラスを使うと、別のフォームの値や任意要素の値を自動でコピーしてくることができます。

別のフォームの値をコピーする

フォーム1で入力した値をフォーム2の中の input 要素にコピーする…といった用途で使用します。コピー先となる input 要素に以下のようにクラス指定します。

<!-- コピー元となるフォーム -->
<form class="espf1">
    <input type="text" name="element1-1">
    ...(略)...
</form>

<!-- コピー先となるフォーム。最初は非表示。最初のフォームがサブミットされた時にCSSを操作して表示する -->
<form class="espf2" style="display:none;">
    <!-- 最初のフォームの element1-1での入力値がこのinput要素のvalue値としてコピーされる -->
    <input type="hidden" name="element2-1" class="espf2-from-espf1-element1">
    ...(略)...
</form>

この例では、espf2のフォームが表示された時点で element2-1 の <input> 要素の value が element1-1 の入力値になります。上記例のように、別のフォームから値をコピーしてくるコピークラスの命名規則は以下の通りです。

[フォームID]-from-[コピー元フォームID]-[コピー元入力項目のname]


フォームID	espar form ではフォームIDを全ての要素のprefixとして必ず指定しますコピークラスの使用時はコピー先のフォームIDとなります
コピー元フォームID	コピー元となるフォームのID
コピー元入力項目のname	コピー元となるフォーム内項目の name 値を指定します

任意要素の値をコピーする

別のフォームの入力値だけではなく、任意のhtml要素の値をコピーするコピークラスもあります。コピーしたい要素の値が最初は決まっておらず、1つ目のフォームでサブミットされた後に算出された値をコピーしたい場合に便利です。

<!-- 1つ目のフォーム -->
<form class="espf1">
    <input type="text" name="element1-1">
    ...(略)...
</form>

<!-- 1つ目のフォームのsubmitで動的に生成されるhtml。通常 JavaScript によるDOM操作で挿入される-->
<div id="results">
    <div id="result1">計算結果1</div>
    <div id="result2">計算結果2</div>
</div>

<!-- 2つ目のフォーム。最初は非表示。最初のフォームがサブミットされた時にCSSを操作して表示する -->
<form class="espf2" style="display:none;">
    <!-- 最初のフォームをサブミットして生成された result1 の要素がコピーされる -->
    <input type="hidden" name="element2-1" class="espf2-element-result1">
    <!-- 最初のフォームをサブミットして生成された result2 の要素がコピーされる -->
    <input type="text" name="element2-2" class="espf2-element-result2">
    ...(略)...
</form>

この例では、espf1がサブミットされた時点で何らかの計算や処理が行われて、result1,result2 のidを持つ <div> 要素が生成される挙動を想定しています。espr2 が表示された時点で、各 <input> 要素に result1, result2 のテキスト要素が最初からコピーされた状態となります。

このように、任意の要素のテキスト要素をコピーしてくるコピークラスの命名規則は以下の通りです。

[フォームID]-element-[コピー元の要素id]

コピー元の要素idには、別の<form>タグ内の input / select / textarea 要素のidを指定することもできます。その場合、要素の値(value値)がコピーされます。