Home/ Questions/Q 7964383
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T05:52:38+00:00

I have made an option page for my chrome application. Have designed the form

  • 0

I have made an option page for my chrome application.
Have designed the form which is working perfectly, except when now i tried to add a message will be shown (through jquery/javascipt) when the user clicks save button or reset button.

The form 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>

I want to display the message in the status message div.
So i wrote the following script:

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

The 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;
}

The problem is that the message is displayed and then the div hides again!
I understood that the reason for this is that the page kind of refreshes when the form is submitted, but couldn’t fin the way to work around it. 🙁

Even tried adding this

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

But did not help.

Please help !

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add return false to your form markup:

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

    It will prevent the form of being submitted.

    Another way is to use JQuery submit event and preventDefault method.

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

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