Jquery - need to show a form if cookie is not set. Show user name if cookie is set -
I would like to show a form that asks for the username and gender if they are not logged in.
If they are already logged in, I want to show their name and show them the background that is based on the meeting and possibly depending on their gender.
Below is my code.
& lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Title & gt; You're amazing! & Lt; / Title & gt; & Lt; Meta http-equiv = "content-type" content = "text / html; charset = utf-8" & gt; & Lt; Meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt; & Lt; Style type = "text / css" & gt; Body {background: http://news.bbcimg.co.uk/media/images/64073000/jpg/_64073342_190475.jpg; } Body, H1, P {font-family: "Helvetica New", "Segoyi UI", Segoi, Helvica, Ariel, "Lucida Grande", Non-Serif; Font weight: normal; Margin: 0; Padding: 0; } .Interform {margin-left: auto; Margin-right: auto; Display area; Width: 300px; Text-align: left; }. Username {font-family: "helvetica new", "segoyi UI", segoyi, helvetica, ariel, "lucida grande", non-serif; Font weight: normal; Font-size: 250%; Padding: 40px; } .comments {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; } .Orow: first, .ooro: after {display: table; material: " "; }. Hate {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; Repeat Background: No Repetition; Margin Top: 20px; Width: 180px; Height: 160px; Text-align: center; Margin-left: auto; Margin-right: auto; display none; } H1 {font-weight: 300; Margin: 0 20 px 0; } .lead {font-size: 21px; Font-weight: 200; Margin-down: 20px; } P {margin: 0 10px; } A {color: # 3282e6; Text-decoration: None; } & Lt; / Style & gt; & Lt; Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body background = "http://news.bbcimg.co.uk/media/images/64073000/jpg/_64073342_190475.jpg" & gt; & Lt; Div class = "container text-center" id = "error" & gt; & Lt; Div class = "introform" & gt; & Lt; H1 & gt; Please fill out the form below and & lt; Br> Tell us your name and gender. & Lt; / H1> & Lt; Form method = 'post' action = 'send.php' name = 'demo' & gt; First name: & lt; Input type = 'text' name = 'firstname' value = '' id = 'firstname' / & gt; & Lt; Br / & gt; Gender: & lt; Select name = 'gender' & gt; & Lt; Option value = 'male' & gt; Men & lt; / Options & gt; & Lt; Option value = 'female' & gt; Women & lt; / Options & gt; & Lt; / Select & gt; & Lt; / Form & gt; & Lt; / Div & gt; & Lt; Div class = "heart" & gt; & Lt; P class = "user name" & gt; & Lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = "compliment" & gt; You are amazing! & Lt; Br / & gt; You are beautiful! & Lt; Br / & gt; Love you, love you, love you! & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;
First you can define a function to get a cookie
getCookie = function (cookie name) {var all cookies = document.cookie.split (';'); (Var key in all cookies) {var cookie = all cookies [key] .replace (/ ^ \ s \ s * /, ''). Replace (/ \ s \s * $ /, ''); If (Cookie index of (cookie name + "=") == 0) return cookie cookie ((cookie name + "="). Length, cookie length)} return tap; }
So if you are setting up a cookie, you test, then you hide your form if your cookies are not set
$ (Document) .ready (function (if (getCookie ("cookiekey") == faucet) $ ("form [name = demo]"). Hide ();});
< / Div>
Comments
Post a Comment