修正で戻った時、フォームにデータを残す

Perl

確認画面で、「修正」で前の画面に戻った時に、
データが残ってる場合と消えてしまう場合がありますよね。
データが残っているのはブラウザによって違うので、確実に残すためには
プログラムできちんと指定してあげなければ。

「戻る」ボタンで今まで使用していたのは、JavaScriptの「history.back」というもの。
これではブラウザの「戻る」と同じなので、データを残すことはできません。

きちんと処理をして、確実に修正画面から戻ったときにデータを残すようにします。

大幅な流れとしてどうしたらよいかというと、
mail.cgiに、

「戻る」が押されたらフォームを表示する

という命令を出せばよいのです。

「フォームを表示する」というのは、modeになにも入っていない場合、
フォームを表示していましたよね。一番はじめの画面です。
あのフォームの画面に、前書いた内容が初期値で入っていたらいいわけです。

では、さっそくやってみます。

まず第一にしなくてはいけないのは、
「最初のフォームの画面に、初期値を入れる」
こと。


<ＩＮＰＵＴ type="text" size="30" name="name" value="＜！ーーtmpl_var name="name" escape=htmlーー＞”＞

テンプレートを使っているので、こういった書き方になっています。
要するに、値を受けたり送ったりするときに使っている変数を、valueに入れてください。
$nameとかね。

これを全てやったら、次はフォームそのものに名前を付けます。


＜Ｆｏｒｍ ＭＥＴＨＯＤ ＝”POST” ＡＣＴＩＯＮ＝”mail.cgi” ＮＡＭＥ＝”MyForm”＞

こんな具合で。
なんでこんなことするの？それは後でわかりますのでw


次は確認ページ。
確認ページにも同じようにフォームに名前をつけてください。
確認ページでは、各項目はおそらくhiddenで隠されてると思います。
そのhiddenになっているフォームに名前をつけてください。
今回は、「Kakunin」にしました。


そこで、問題。
今、hiddenで隠して送られようとしているフォームのmodeは、
次の完了作業をするためのmodeが書かれているはずです。
例えばメールフォームだったら、

＜input type="hidden" name="mode" value="send"＞

とこんな感じで。
modeがsendだった場合は、メール送信処理にすすめ！
と、mail.cgiに処理があるはずです。
「戻る」でフォームに戻るためには、このmodeの値を変更してやらなくてはいけませんよね。
で、最初のフォームを表示するためのmodeは、空っぽ、にしてありました。
もし、modeの値がなにもなかったら、フォームを表示しなさい！
ということなわけです。
なので、確認画面のフォームから送られるmodeの値は、send(メールを送る)と
''(空っぽ、フォームを表示する)の２種類なければいけないわけです。

そこで、

window.document.form.element.値

これをボタンに使います。

「送信」ボタンは、普通にsubmitでいいので、
「戻る」ボタンを押したときに、modeを書き換えて送ってやりましょう。

そのために上のJavaScriptを使用します。
細かいことは、とほほのwwwに書いてあります。

windowは省略できるので、省略しちゃいましょう。
まず、さきほどformに名前をつけましたね。
その名前が、document.form.element.modeの「form」の部分に入ります。

document.Kakunin
となります。
次に、Kakuninフォームの、modeの部分を変更したいので、
document.Kakunin.mode
とします。elementの部分にmodeが入ります。
で最後に値を入れます。
document.Kakunin.mode.value='';
「値」の部分に、value=''と書きましょう。
これで、できあがり。これで、このボタンを押したと同時に、「modeの値は空です」
と送ることができます。
そして、onClickでボタンをsubmitボタンにしちゃいます。

document.Kakunin.submit()
submitされると、mail.cgiへ飛びます。
そこでmodeの値を判定すると、「空だ」ということになって、
form.htmlが表示されます。
その際、hidden項目を送っているので、form.htmlのformの値は初期値が中に入ります。

ということで、できあがりw

MEMO
kakunin.html
＜form method="POST" action="mail.cgi" name="Kakunin"＞

＜input type="submit" value="戻る" 
onClick="document.Kakunin.mode.value='';document.Kakunin.submit()">

form.html
＜textarea rows="6" cols="40" wrap="soft" name="comment"＞
＜!--tmpl_var name="comment" escape=html--＞＜/textarea＞
#テキストエリアはvalue=""じゃないので注意！