フォームで戻るボタンを押して戻った後にリセットが効かない。

| コメント(0) | トラックバック(0)
入力フォーム作ってて、確認画面用意したとき 「確認画面で不備に気づき、戻って修正するときに、メンドクサイからリセットボタン押して新規に入力しなおす。」 正直こんな操作する人は稀なのですが、そうしてくださいとの要望でしたので、そうしてみることに。 「リセットボタン置いとけばいい」ということで
 <input type="reset" name="Submit" value="リセット"> 
で済めばいいのですが リセットボタンは「初期値に戻す(リセットする)」とのことなので 最初に入力画面を開いた時には「初期値」は未入力の状態だから見た目上リセットされて 確認画面から戻ってきた時は既に値が入ったときが「初期値」になってしまうので、リセットボタンを連打してもダメなんですね;; んで「リセット」じゃなくて「クリア」する方法はWebクリエーターのひとりごとさんの方法が簡単でした
function clearFormAll() {
    for (var i=0; i<document.forms.length; ++i) {
        clearForm(document.forms[i]);
    }
}
function clearForm(form) {
    for(var i=0; i<form.elements.length; ++i) {
        clearElement(form.elements[i]);
    }
}
function clearElement(element) {
    switch(element.type) {
        case "hidden":
        case "submit":
        case "reset":
        case "button":
        case "image":
            return;
        case "file":
            return;
        case "text":
        case "password":
        case "textarea":
            element.value = "";
            return;
        case "checkbox":
        case "radio":
            element.checked = false;
            return;
        case "select-one":
        case "select-multiple":
            element.selectedIndex = 0;
            return;
        default:
    }
}  

で、呼び出すときはリセットじゃなくて(resetボタンにしてしまうとクリアした後にリセットしてしまうようで;結果値が残ってしまいます;)「button」としてonClickイベントのときに、先の「clearFormAll」関数を読んであげるといいです。
<input type="button" value="リセット" onClick="clearFormAll(); "/>
が・・・ MODxで携帯の時にページを変換するプラグインなんかを入れていると、javascript効かないブラウザ用に「reset」ボタンでないと不都合な時もあるので
<input type="reset" value="リセット" onClick="return clearFormAll(); "/>
の様に、呼び出すときに返り値を貰うようにして、とりあえず「false」を返してあげると、「reset」の挙動をやめさせる事が出来ます。 javascriptが処理できるブラウザだと、javascriptでフォームの値をクリアしてリセットはしない。 javascriptが処理できないブラウザだと、javascriptは無視して本来のresetの挙動になります。 ただ問題はjavascriptが処理できないブラウザに関してはresetが出来るが値のクリアが出来ないこと; 何か上手い方法がないもんですかね; あとフォームのリセットボタンは、入力項目が多いときなんか間違って押しちゃうと本当に泣けてきますね;

トラックバック(0)

トラックバックURL: http://hi-kick.jp/blog/mt-tb.cgi/166

このブログ記事について

このページは、服部が2010年5月14日 22:08に書いたブログ記事です。

ひとつ前のブログ記事は「【MODx】cfFormMailerで戻るボタンを押すとテキストエリアの値が消えてしまう;」です。

次のブログ記事は「Dreamweaverの「ポップアップメニュー」でも字がずれる;」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。