javascript - How to store a flag in a cookie where the flag is true only if a form has been completed? -

how store flag in cookie flag true if form has been completed?

i have sidebar contains form, when submitted fades form , display message using 1 of user inputs.

this sidebar form present on number of pages on website. in order identify if form has been completed on page believe can use flag variable define whether true or false , display form or message depending on stored value.

i have never used cookies medium store value , not know correct syntax them. can make cookie when formsubmit successful. , on every page have script in header read either display form or not.

is best way go this? , format , correct syntax identify this?

html

<div id="sidebarf"> <form id="sidebarform" onsubmit="return false" method="post" name="myform" autocomplete="off" >     <input type="text" name="name" id="username" placeholder="name (eg. rob james)" value="" required><br><br>     <input type="text" name="location" id="userlocation" placeholder="location (eg. wacol)" value="" required><br><br>     <input type="text" name="postcode" id="userpc" pattern="[0-9]{4}" placeholder="postcode (eg. 4076)" maxlength="4" value="" required> <br><br>     <input type="email" name="email" id="useremail" placeholder="email address (eg. someone@yourdomain.com" value="" required> <br><br>     <input type="tel" name="phone" id="userphone" placeholder="phone number (eg. 0412345678)" maxlength="10" minlength="6" value="" required> <br><br>     <textarea rows="4" cols="20" id="usercomment" placeholder="comment/question" value="" required></textarea><br><br>      <input type="submit" id="sidebarformsubmit" value="submit">  </form>   </div> 

javascript

$("#sidebarform").on("submit", function() {     if ($("#username").val() == "") {         return false;   }  $("#sidebarform").fadeout("slow", function(){       $("#sidebarf").html("thankyou inquiry " + $("#username").val() + ". call or email further details within 3 business days." ); });  return false;   /////////////////is flag?/correct location?////////////// //////var completed = true  //////document.cookie=completed; ///////////  }); </script> 

and call when page loads?

///////////////////does not work/////////////////  <script>    function checkcookie()  {  var display=getcookie("completed"); if (complete!="true")   {   $("#sidebarf").html("thankyou inquiry " + $("#username").val() + ". call or email further details within 3 business days." );   } else   {   $("#sidebarf").html //(don't know put here!)   } }  

i have custom validity after above code. shouldn't play role.

 $(document).ready(function () {     $('#username').on({        invalid: function (e) {         e.target.setcustomvalidity("");         if (!e.target.validity.valid) {             e.target.setcustomvalidity("please enter name.");          }         },          input: function(e) {         e.target.setcustomvalidity("");        }     }); 

as said, have no idea cookie use code i've search on web.

if use this jquery cookie plugin can simplify code great deal. following code should check cookie when page loads. if cookie found, form hidden without animation. otherwise when form submitted, cookie set @ next page load form hidden.

$(function() {     var completed = $.cookie( 'completed' ),         form = $('#sidebarform'),         msg = $('#sidebarf');     if( ( completed != undefined ) && ( completed == 'done' ) ) {         form.hide();         msg.html( 'form completed.' );     }     form.on("submit", function( e ) {         e.preventdefault();         if ( $("#username").val() == "" ) {             return false;         }          $(this).fadeout("slow", function() {             msg.html("thank inquiry " + $("#username").val() + ". call or email further details within 3 business days." );             form.submit();             //or submit form via ajax ---> choice             $.cookie( 'completed', 'done' );         });     }); }); 

js fiddle demo