0

Chromeアプリケーションのオプションページを作成しました。ユーザーが保存ボタンまたはリセットボタンをクリックしたときにメッセージを追加しようとすると（jquery / javasciptを介して）表示されることを除いて、完全に機能するフォームを設計しました。

フォームhtml：

<body onload="loadOptions();">
    <center>
    <div id="wrapper">
    <div id="status">
        <p id="statusMessage"></p>
    </div>
    <form id="settings" align="left" onsubmit="saveOptions(this);">
        <fieldset>
        <legend>General</legend>
          // settings options go here
        </fieldset>
            <center>
            <button type=submit> Save </button>
            <button id="reset" type=reset onclick="reset();"> Restore Defaults </button>
            </center>
    </form>
    </div>
    </center>
</body>

ステータスメッセージdivにメッセージを表示したい。だから私は次のスクリプトを書きました：

function saveOptions(form){


    $("#status").hide();

        //code to save settings

        $("#statusMessage").html("Preferences saved");
        $("#status").show();
    }

    function loadOptions(){         
        //code to load options
    }
    function reset(){
        $("#status").hide();

        //code to reset

        $("#statusMessage").html("Preferences reset to default");
        $("#status").show();
    }

css：

div#status{


width: 500px;
    text-align: center;
    background: white;
    border: 3px solid orange;
    border-radius: 5px;
    font-weight: bold;

    display: block;
}
div#status h1,p{
    font-size: 20px;
    text-shadow: 1px 1px 1px lightgrey;
}

問題は、メッセージが表示された後、divが再び非表示になることです。その理由は、フォームが送信されたときにページが更新されるためですが、それを回避する方法を見つけることができなかったことがわかりました。:(

これを追加してみました

$(function() { $("#status").hide(); });

しかし、助けにはならなかった。

助けてください ！

4

1 に答える 1

1

フォーム マークアップに追加return falseします。

<form id="settings" align="left" onsubmit="saveOptions(this); return false;">

フォームが送信されないようにします。

もう 1 つの方法は、JQuerysubmitイベントとpreventDefaultメソッドを使用することです。

$("#settings").on("submit", function(e) {
    e.preventDefault();

    $("#status").hide();
    $("#statusMessage").html("Preferences saved");
    $("#status").show();
});
于 2012-05-21T18:01:29.383 に答える