Get value from custom editing panel

Hi All,

I created a custom panel (called PageStatus) which is shown on the right sidebar (underneath ‘Page Information’) while editing a page.
The basic idea behind this panel is to add a page status which shows other users that the information on this page is a work-in-progress, needs a review (For Review) or is checked and completed (Published).

I want the user/author to set the status while editing and to just show (non-editable) to the reader.

My code to set and to display the page status.

<input name="pagestat" value="" type="text">
<script>
    var e = document.getElementById("StatusSelection");
    var strStatus = e.options[e.selectedIndex].text;
    pagestat.value = strStatus
</script>
{{/html}} #panelfooter() {{/velocity}}
{{velocity}} #panelheader('Page Status') {{html}}
<select name="StatusSelection">
    <option value="none">None</option>
    <option value="draft" style='background-color:#FBCFD0'>Work-in-progress</option>
    <option value="forreview" style='background-color:#FFF9D4'>For Review</option>
    <option value="published" style='background-color:#DFF0D8'>Published</option>
</select>
{{/html}} #panelfooter() {{/velocity}}