So I borrowed code from W3Cschools (in case it looks familiar) and then started modifying it for my needs. Basically, I have a default H1 header of "Welcome to my sandbox". There's a popup that saves the user's name to a cookie. If it detects the name/cookie/variable, the H1 header changes to "Welcome (user name) to my sandbox". I can't get the (user name) to show on the first page load but it always works on the second page load. Any ideas?
Here's the code:
function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1){
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1){
c_value = null;
}
else{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1){
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
function setCookie(c_name,value,exdays){
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function checkCookie(){
var username=getCookie("username");
if (username!=null && username!=""){
alert("Welcome again " + username);
document.getElementById("title_script").innerHTML="Welcome "+username+" to my sandbox";
}
else{
username=prompt("Please enter your name:","");
if (username!=null && username!=""){
setCookie("username",username,365);
}
}
}
<body onload="checkCookie()" class="background_color">
<div class="wrap">
<h1 class="title" id="title_script">Welcome to my Sandbox</h1>
</div>
Your code is perfectly fine. You just missed a single line to use it again.
document.getElementById("title_script").innerHTML = "Welcome " + username + "to my Sandboxx";
Use like this
function checkCookie() {
var username = getCookie("username");
if (username != null && username != "") {
alert("Welcome again " + username);
document.getElementById("title_script").innerHTML = "Welcome " + username + " to my sandbox";
}
else {
username = prompt("Please enter your name:", "");
if (username != null && username != "") {
setCookie("username", username, 365);
document.getElementById("title_script").innerHTML = "Welcome " + username + "to my Sandboxx";
}
}
}
Create the function checkCookie() like:
function checkCookie() {
var user = getCookie("username");
if (user != "" || user != "undefined") {
document.getElementById("title_script").innerHTML = "Welcome " + user;
}
}
Mota Chuha nailed it
Add the document.getElementByID to the else line
function checkCookie(){
var username=getCookie("username");
if (username!=null && username!=""){
alert("Welcome back " + username);
document.getElementById("title_script").innerHTML="Welcome "+username+" to my sandbox";
}
else{
username=prompt("Please enter your name:","");
if (username!=null && username!=""){
setCookie("username",username,365);
document.getElementById("title_script").innerHTML="Welcome "+username+" to my sandbox";
}
}
}
Related
I have trying to see if a cookie exists or not, Here is my getCookie method:
function getCookie(name)
{
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2) return parts.pop().split(";").shift();
}
and here is how I calling that method:
var cookie = getCookie("counter");
and here is my condition I tried:
if(cookie == '')
{
}
else
{
//Always goes here even when I clear my cookies and I know it does not exist.
}
My condition always goes into the else, not matter what, what am I doing wrong?
You can check the value of cookie if not undefined
if (typeof(cookie) === 'undefined'){
CONSOLE.LOG('no cookie');
} else {
CONSOLE.LOG(' cookie exist');
}
Please try following function to get cookie:
function getCookie(c_name){
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1){
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1){
c_value = null;
}
else {
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1)
{
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
A cookie must be set and also confirmed.
However, I want to change the text of the confirmation box? Is there any way?
Like OK=Hello and Cancel=Reset in the example below:
HTML:
<body onload="checkCookie()"></body>
Javascript:
function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
{
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1)
{
c_value = null;
}
else
{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1)
{
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function checkCookie()
{
var username=getCookie("username");
if (username!=null && username!="")
{
var conf = confirm("Welcome again " + username);
if(conf==true)
{
return false;
}
else
{
alert("Your cookies have been reset!");
}
}
else
{
username=prompt("Please input your name below:","");
if (username!=null && username!="")
{
setCookie("username",username,365);
}
}
}
In addition, is there any way to be done like this:
When the entered username is set, being also reset while Cancel/Reset is clicked.
I wouldn't complain if somebody uses jQuery to do so though.
Thanks in advance. I will rep who helps me out :)
http://jsfiddle.net/V6LZE/
There are other options using some jQuery plugin, you can edit OK & Cancel button text. Helpful links:
http://www.codeproject.com/Questions/431829/How-to-change-button-text-of-Alert-message-using-j
Display Yes and No buttons instead of OK and Cancel in Confirm box?
jsfiddle.net/taditdash/PHX2Y/
Hope will help!
I am trying to write a code that will display a pop-up message when a site is first visited and I want it to never display again if I already see it.. Here's my code, I hope someone could help me to prevent the pop up from appearing when I refresh the page although it shouldn't.
<SCRIPT LANGUAGE="JavaScript">
<!--
function GetCookie(cookie) {
var arg=name+"=";
var alen=arg.length;
var clen=document.cookie.length;
var i=0;
while (i<clen) {
var j=i+alen;
if (document.cookie.substring(i,j)==arg)
return "here";
i=document.cookie.indexOf(" ",i)+1;
if (i==0) break;
}
return null;
}
var visit=GetCookie("cookie");
if (visit==null){
alert("Your Message Goes here and you only get to see it once!");
var expire=new Date();
expire=new Date(expire.getTime()+7776000000);
document.cookie="cookie=here; expires="+expire;
}
// -->
</SCRIPT>
You have problems in your getCookie function. Try with this:
CODE
function getCookie(c_name) {
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1) {
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1) {
c_value = null;
} else {
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1) {
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start, c_end));
}
return c_value;
}
example here: http://jsfiddle.net/TWB68/1/
I am trying to create a webpage that has an alert when you start it. User will get prompted to enter name or your username. The username will get saved in a cookie. Everytime a new session gets started user will see a message saying "hello" + username. However, I haven't been able to do it without getting the message to popup after visiting a new part of the webpage.
This is my code so far:
HTML
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
{
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1)
{
c_value = null;
}
else
{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1)
{
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
window.c_value = c_value
return c_value;
}
function alertornot(){
if (get_cookie('alerted')==''){
loadalert()
document.cookie="alerted=yes"
}
}
function loadalert(){
alert(window.username + "we meet again" )
}
function alert() {
var username=getCookie("username");
if (username!=null && username!="") {
if (once_per_session==0) {
loadalert()
}
else {
alertornot()
}
}
else {
username=prompt("Please enter your name:","");
// window.username = username
if (username!=null && username!="") {
setCookies("username", username, 365)
}
}
}
I'm very new to programming and javascript. I am so sorry, if this is a stupid question.
You write "setCookies(...)", but it's "setCookie" without "s".
You make infinite loop, because you replace "alert(...)" native function and call alert() in this function.
Execute schema : alert() > loadalert() > alert() > loadalert() > etc...
Rename your function.
You didn't define "once_per_session" variable.
Javascript
function n_alert() {
window.username = getCookie("username");
console.log(username);
if (username!="undefined" && username!==null && username!=="") {
alert(window.username + " we meet again" );
} else {
username=prompt("Please enter your name:","");
if (username!==null && username!=="") {
setCookie("username", username, 365);
}
}
}
n_alert();
http://jsbin.com/ucipom/2/edit
You should not name a function alert as it is a global object already. Also, I do not see where you are calling any of this code.
I would rename the alert function to promptUser (or something) and add this code to the bottom:
promptUser();
loadAlert();
Try this:
<script>
function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
{
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1)
{
c_value = null;
}
else
{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1)
{
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function checkCookie()
{
var username=getCookie("username");
if (username!=null && username!="")
{
alert("Welcome again " + username);
}
else
{
username=prompt("Please enter your name:","");
if (username!=null && username!="")
{
setCookie("username",username,365);
}
}
}
</script>
</head>
<body onload="checkCookie()">
My last anwser here.
The popup still comes when I refresh the page
If you want pop-up only one time (not each refresh page), set one other cookie.
See Make a cookie expire in 30 seconds for set Cookie with second and not with day (for popupcookie).
Javascript
function isCookie(c_name) {
var cook = getCookie(c_name);
return (cook!="undefined" && cook!==null && cook!=="");
}
function n_alert() {
var username = getCookie("username");
if (isCookie("username")) {
if (!isCookie("popupcookie")) {
alert(username + " we meet again" );
} else {
console.log("hidden alert : " + username + " we meet again" );
}
setCookie("popupcookie", username, 1); //restart
} else {
username=prompt("Please enter your name:","");
if (username!==null && username!=="") {
setCookie("username", username, 365);
}
}
}
n_alert();
http://jsbin.com/ucipom/6/edit
Remark I found issue, if you use different directory (path) ex : './' and './dir1/1/'. You may have a problem. Like you don't define or re-define root cookie in directory. Maybe use sessionstorage.
can anyone tell me about automatic cookies in JavaScript while clicking a button or URL of a webpage?
It sets for me and I can't delete that also...
var expDate = new Date();
expDate.setYear( parseInt(expDate.getYear())+10);
document.cookie="";
var x = "$user=$val; expires="+expDate.toUTCString();
Here i have two buttons called 'view' and 'save'. If i click the 'save' button this cookie should be set... but when i click the 'view' button a cookie is set. i cant delete tht cookie too
I find the method explained in this article at quirksmode.org to be working just fine. — Mabye give that a try?
Best code to understand cookie in javascript
Just save my code as html file and open into browser you willeasily understand cookie concept
<!DOCTYPE html>
<html>
<head>
<script>
function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
{
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1)
{
c_value = null;
}
else
{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1)
{
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function checkCookie()
{
var username=getCookie("username");
if (username!=null && username!="")
{
alert("Welcome again " + username);
}
else
{
username=prompt("Please enter your name:","");
if (username!=null && username!="")
{
setCookie("username",username,365);
}
}
}
</script>
</head>
<body onload="checkCookie()">
</body>