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;">

它将阻止提交的表单。

另一种方法是使用 JQuerysubmit事件和preventDefault方法。

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

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