[戻る]ボタンのWebフォームコンテンツをどのように保持できますか
-
05-07-2019 - |
質問
Webフォームが送信され、ユーザーを別のページに移動する場合、ユーザーがフォームを再度送信するために[戻る]ボタンをクリックすることがよくあります(私の場合、フォームは高度な検索です)。
[戻る]をクリックしたときにユーザーが選択したフォームオプションを確実に保持するにはどうすればよいですか(したがって、多くのフォーム要素の1つだけを変更している場合、フォームを埋めて最初からやり直す必要はありません)
セッションデータ(Cookieまたはサーバー側)にフォームオプションを格納するルートをたどる必要がありますか、それともブラウザにこれを処理させる方法はありますか?
(環境はPHP / JavaScriptです-サイトはIE6 +およびFirefox2 +で動作する必要があります)
解決
セッションに入れました。
これは最も信頼性が高くなり、たとえ「戻る」ようにまっすぐに行かなくても、引き続き検索オプションがあります。
Cookieに入れても機能しますが、非常に小さな形式でない限りお勧めしません。
他のヒント
あなたはブラウザに翻弄されていると思います。ヒットすると、ブラウザはコンテンツに対してサーバーに新しいリクエストを送信せず、キャッシュを使用します(とにかく私が見たほとんどすべてのブラウザで)。そのため、サーバー側には何もありません。
結果ページのonunloadイベント中に検索結果をCookieに保存し、検索ページのJavaScriptでCookieを読み込んでフォームに入力するなど、非常に複雑なことができるかどうか疑問に思っています-しかし、単なる推測であり、うまくいくかどうかはわかりません。
ブラウザ次第ですが、ほとんどの場合、何もする必要はありません。
IE、Firefoxなどは、前のページのフォームの内容を喜んで記憶し、[戻る]がクリックされたときに再度表示します...ページをキャッシュしないか、完全にスクリプトからフォームを構築します。
(セッションに何かを置くと、同じフォームで2つのタブが開いているブラウザが混乱する可能性があります。そのようなことを行うときは十分に注意してください。)
問題は、ブラウザがページのキャッシュバージョンを返し、おそらくサーバーに再度要求しないことです。つまり、セッションの使用は無関係です。
ただし、AJAXを使用して、以前に送信されたフォームの詳細をページの読み込みイベントに読み込むこともできます。
基本的には、POST後に何らかの方法で(おそらく提案されたセッション変数に)サーバーに保存する必要があります。また、フォームページでJavascriptを設定してロード時に実行し、AJAX呼び出しを発行してサーバーからデータ(JSON形式など)を取得し、フォームフィールドにデータを事前入力する必要があります。
jQueryコードの例:
$( document ).ready( function() {
$.getJSON(
"/getformdata.php",
function( data ) {
$.each( data.items, function(i,item) {
$( '#' + item.eid ).val( item.val );
} );
});
} );
/getformdata.phpは次のようなデータを返す可能性があります:
{
'items': [
{
'eid': 'formfield1',
'val': 'John',
},
{
'eid': 'formfield2',
'val': 'Doe',
}
]
}
セッションに対してまだ何も保存されていない場合、明らかに空の配列を返します。上記のコードは大雑把でテストされていませんが、基本的な考え方がわかるはずです。
補足:現在のバージョンのOperaおよびFirefoxは、戻るときにフォームフィールドの内容を保持します。 JSコードはこれを上書きしますが、安全なはずです。
別のajaxyオプション(javascriptを使用していないユーザーには適していません)は、javascriptを介してフォームを送信し、確認ページに移動します(または、ボタンをメッセージに置き換えてフォームにメッセージを表示します)。そうすれば、「戻る」ことはありません。可能です。
値を送信する前にCookieに保存しないのはなぜですか?タイムスタンプまたはトークンを含めて、いつ記入されたかを示すこともできます。次に、ページが読み込まれたら、Cookieからのデータをフィールドに入力するか、これが新しい検索なので空白のままにするかを決定できます。
javascriptを使用してローカルですべてを実行することもできます。そのため、Cookieを検索値とともに保存し、ページロード時にCookieが存在するかどうかを確認します。このようなもの:
$('#formSubmitButton').click( function() {
var value = $('#searchbox').val();
var days = 1;
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
document.cookie = "searchbox="+value+expires+"; path=/";
});
$(document).ready( function() {
var nameEQ = "searchbox=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) var valueC = c.substring(nameEQ.length,c.length);
}
$('#searchbox').val(valueC);
});
これをテストしていませんが、動作するはずです。これにはjQueryが必要です。
Cookie関数の由来: http://www.quirksmode.org/js/cookies。 html
FireFoxとIEの両方がデフォルトでこの動作をしていると言っておくべきです。