Jquery - нужно показать форму, если cookie не установлен. Показывать имя пользователя, если установлен cookie

Я хотел бы показать форму, которая спрашивает имя пользователя их имя и пол, если они не вошли в систему.

Если они уже вошли в систему, я хочу показать их имя и дать им вращающиеся комплименты и, возможно, показать вращающиеся фоны, в зависимости от их пола.

Ниже мой код.

    <!DOCTYPE html>
<html>
<head>
<title>You are wonderful!</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
 background: http://news.bbcimg.co.uk/media/images/64073000/jpg/_64073342_190475.jpg;
}
body, h1, p {
    font-family: "Helvetica Neue", "Segoe UI", Segoe, Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: normal;
    margin: 0;
    padding: 0;
}
.introform {
    margin-left:  auto;
    margin-right:  auto;
    display: block;
    width:300px;
    text-align:left;
}
.username {
    font-family: "Helvetica Neue", "Segoe UI", Segoe, Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: normal;
    font-size:250%;
    padding:40px;
}
.compliments {
    font-weight:600;
    font-size:40px;
    display:none;
}
.container {
    margin-left:  auto;
    margin-right:  auto;
    max-width: 1170px;
    padding-right: 15px;
    padding-left: 15px;
    text-align:center;
}
.row:before, .row:after {
    display: table;
    content: " ";
}
.heart {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Love_Heart_SVG.svg/645px-Love_Heart_SVG.svg.png");
    background-size: 180px 160px;
    background-repeat: no-repeat;
    margin-top:20px;
    width:180px;
    height:160px;
    text-align:center;
    margin-left:  auto;
    margin-right:  auto;
    display:none;
}
h1 {
    font-weight: 300;
    margin: 0 0 20px 0;
}
.lead {
    font-size: 21px;
    font-weight: 200;
    margin-bottom: 20px;
}
p {
    margin: 0 0 10px;
}
a {
    color: #3282e6;
    text-decoration: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>

<body background="http://news.bbcimg.co.uk/media/images/64073000/jpg/_64073342_190475.jpg">
<div class="container text-center" id="error">


  <div class="introform">
  <h1>Please fill out the form below and<br>let us know your name and gender.</h1>
    <form method='post' action='send.php' name='demo'>
      First Name:
      <input type='text' name='FirstName' value='' id='FirstName' />
      <br/>
      Gender:
      <select name='gender'>
        <option value='Male'>Male</option>
        <option value='Female'>Female</option>
      </select>
    </form>
  </div>
  <div class="heart">
    <p class="username"></p>
  </div>
  <div class="compliments"> You are wonderful!<br/>
    You are beautiful!<br/>
    Love you, love you, love you! </div>
</div>
</div>
</div>
</body>
</html>
Источник

1 ответ

Решение

Сначала вы определяете функцию для получения куки

getCookie = function(cookieName)
{
    var allCookies = document.cookie.split(';');
    for(var key in allCookies) 
    {
        var Cookie = allCookies[key].replace(/^\s\s*/, '').replace(/\s\s*$/, '');
        if (Cookie.indexOf(cookieName+"=") == 0) 
            return Cookie.substring((cookieName+"=").length,Cookie.length)
    }
    return null;
}

затем вы проверяете, установлен ли файл cookie, затем скрываете свою форму, если ваши файлы cookie не установлены

$(document).ready(function(){
   if(getCookie("cookiekey")==null)
     $("form[name=demo]").hide();
});
Источник
Другие вопросы по тегам