Adding a save successful notice to a form

by Matt Rummler

HTML

<section id="fileSection" class="center-block">
  <form id="fileForm"  class="show" >
    <button id="fileClose" type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
      <fieldset id="Record">
            <legend id='fileLegend'>
              Record
              <!--<a href="/applicationform.html#fileForm">File</a>-->
            </legend>           
        <input id="formName" type="hidden" name="formName" value="Record">
          <ul class="unmarkedList">
              <li id="fileNumberData">
                  <label for="Record_ID" data-inline="true">
                      Record Number: 
                  </label>
                <input id="Record_ID" name="Record_ID" type="text" readonly>
              </li>
              <li id="fileNameData">
                <label id="fileNameDataLabel" for="Record_Name">
                      Record Name: 
                  </label>                            
                <input id="Record_Name" type="text" name="Record_Name" value="" autofocus><!--value="[[+Record_Name]]""[[*Record_Name]]"/>-->
              </li>
              <li id="fileDescData">
                  <label id="fileDescDataLabel" hidden>
                      Record Description: 
                  </label>
                <!--use this to apply some default bootstrap styling class="form-control"-->
                <br/><textarea rows="3" id="Record_Description" name="Record_Description" contenteditable="true" hidden></textarea>
                            <!--                            <kbd id="Record_Description" name="Record_Description"></kbd>-->
              </li>
              <li>
                <!--
                <div id='editableFileDiv'>
                  
                </div>
                -->
              </li>
              <li>
                <label for="RecordType_ID" data-inline="true">
                  Record Type
                </label>
               ...

CSS

div[class^=notice]/*-ElementSaved]*/
{
 font-style: bold;
    -size:   40px;
    text-align: center;
 display:box;
    margin-top:5px;
    max-width:250px;
    background-color: rgba(50,170,255,0.8);/*#1166ff;*/
}
div[class$=saved]
{
    color: #ddffee;/*#22ff66;*//*#ffffff;*/
}
div[class$=failed]
{
    color: #ffcccc;/*#22ff66;*//*#ffffff;*/
}

JavaScript

$('#fileForm').on('submit', function()
{
    var formName='fileForm';
    var currentElement=$('#'+formName);
    MessageObj={message:'SAVE SUCCESSFUL',type:'saved'};/*type:'saved'};*/
    addNotice(currentElement,MessageObj);
    return false;
}
);

function addNotice(currentElement,MessageObj)
{
    currentElement=currentElement || null;
    MessageObj=MessageObj || null;
    if(currentElement!==null && MessageObj!==null)
    {
        var noticeElement = document.createElement('div');
        $(noticeElement).addClass('notice-'+MessageObj.type);
        $(noticeElement).html(MessageObj.message+' !');        
        currentElement.append(noticeElement);
    }
}