Question

我为我的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(); });

但没有帮助。

请帮忙！

Answer 1

将return false添加到表单标记：

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

它会阻止提交的形式。

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

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

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

表单提交上显示的消息立即消失

1 个答案: