We Keep Coding

Delete cookie for Mailchimp Popup

I have a wordpress website where you click on a div, and a mailchimp popup form pops up. One issue is, mailchimp stores a cookie to make sure the popup is only done once. But since I'm now doing it on a click, I want to get rid of that cookie.
This is my code:
var mailchimpConfig = {
baseUrl: 'mc.us17.list-manage.com',
uuid: '1356322e2......rest of my code',
lid: '36776d...rest of my code'
};
// No edits below this line are required
var chimpPopupLoader = document.createElement("script");
chimpPopupLoader.src = '//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js';
chimpPopupLoader.setAttribute('data-dojo-config', 'usePlainJson: true, isDebug: false');
var chimpPopup = document.createElement("script");
chimpPopup.appendChild(document.createTextNode('require(["mojo/signup-forms/Loader"], function (L) { L.start({"baseUrl": "' + mailchimpConfig.baseUrl + '", "uuid": "' + mailchimpConfig.uuid + '", "lid": "' + mailchimpConfig.lid + '"})});'));
jQuery(function ($) {
document.body.appendChild(chimpPopupLoader);
jQuery(".coming-soon").on("click", function () {
alert("Hello");
document.body.appendChild(chimpPopup);
document.cookie = 'MCEvilPopupClosed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;';
});
});
So after searching the internet, I found that everyone used this code to remove the cookie.
document.cookie = 'MCEvilPopupClosed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;';
This issue is, it's not working for me. I've done all testing in incognito and can only get the pop up to work once.

The cookie's name is MCPopupClosed rather than MCEvilPopupClosed. I'm not sure why, but MailChimp must have changed it at some point.
There's also another cookie called MCPopupSubscribed, which is set if the user subscribes instead of closing the popup with the 'X' button. If you want the popup to display even if the user has subscribed, you'll want to clear that cookie as well.
Clearing those two cookies will only make it work once after the page loads, though. I came across this code while looking into the issue, and it works fine if you put the require in the click function instead of a script tag. Doing this also prevents having to remove the script tags generated by the appendChild function every time the element is clicked.
So your updated code looks like this:
var mailchimpConfig = {
baseUrl: 'mc.us17.list-manage.com',
uuid: '1356322e2......rest of my code',
lid: '36776d...rest of my code'
};
// No edits below this line are required
var chimpPopupLoader = document.createElement("script");
chimpPopupLoader.src = '//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js';
chimpPopupLoader.setAttribute('data-dojo-config', 'usePlainJson: true, isDebug: false');
jQuery(function ($) {
document.body.appendChild(chimpPopupLoader);
jQuery(".coming-soon").on("click", function () {
require(["mojo/signup-forms/Loader"], function (L) { L.start({"baseUrl": mailchimpConfig.baseUrl, "uuid": mailchimpConfig.uuid, "lid": mailchimpConfig.lid})});
document.cookie = 'MCPopupClosed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;';
document.cookie = 'MCPopupSubscribed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;';
});
});

you missed a cookie:
document.cookie = "MCEvilPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
I've just corrected the exact same problem.
Hope this helps,
P.

How to Store More then one data in cookie in Json using Javascript

what i need
i need to store the max of 3 events id in json string.
like: { 9,133,34}.
next then i want that when 4 th event id insert then it would override the 9 event id . and so 5th will override the 133 and so on.
scenario is like that when user land on page of its event id is stored in cookie. in json string, and so on user browser browser browse next event its id gets stored in json string and max limit of 3 events id storing.
i have reffer this note : Howe can I save more strings in cookie and place them in list?
i have tried like
html
<input type=hidden id="eventID" value="{{ data.detailes.data.event.event_id }}">
<input type=hidden id="industry_id" value="{{data.detailes.data.industry_id.id}}">
js code
var cookie_event_id=document.getElementById("eventID").value;
alert(cookie_event_id);
document.cookie = 'event_id=' + cookie_event_id;
var cookie_industry_id=document.getElementById("industry_id").value;
alert(cookie_event_id);
document.cookie = 'industry_id=' + cookie_industry_id;
i have tried
var cookie_event_id=document.getElementById("eventID").value;
var cookieevent = [event_id, '=', JSON.stringify(cookie_event_id), ';
domain=.', window.location.host.toString(), '; path=/;'].join('');
document.cookie = 'event_id=' + cookieevent;
step 1 . store all browser ids into one array.
store 2. fetch all ids and store into cookie.
code
var arr = [];
// append new value to the array
arr.push(cookie_event_id);
console.log(ids.toString());
document.cookie = 'event_id=' + arr;
snapshot cookie browser
lastly after googling a lot tried but it also not working
var arr[];
document.cookie = 'event_id=' + serializeArray().map(function(x){arr[x.eventid] = x.value;

document.cookie="Name=sample; expires=Thu, 18 Dec 2015 12:00:00 UTC; path=/";
Keyword: document.cookie
expires: that is not must it is automatically reset cookie

Typeerror: Undefined form element in FireFox only

For some reason I am getting an error in FireFox only:
Typeerror: document.forms.myCity.optionname is undefined
The script works in all the other browsers:
function WriteCookie()
{
document.cookie = "city" + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
cookievalue = document.forms['myCity'].optionname.value + ";";
document.cookie='city='+cookievalue +'; expires=Fri, 3 Aug 2021 20:47:11 UTC; path=/';
window.location.href = "http://mywebsite.com";
}
This script is in the header and is executed by this form:
<form name="myCity" action="http://mywebsite.com/" method="POST">
<?php
function get_terms_dropdown($taxonomies, $args){
$myterms = get_terms($taxonomies, $args);
$optionname = "optionname";
$emptyvalue = "";
$output ="<select name='". $optionname ."'><option selected='". $selected . "' value='" . $emptyvalue . "'>Select a City</option>'";
foreach($myterms as $term){
$term_taxonomy=$term->pa_city; //CHANGE ME
$term_slug=$term->slug;
$term_name =$term->name;
$link = $term_slug;
$output .="<option name='".$link."' value='".$link."'>".$term_name."</option>";
}
$output .="</select>";
return $output;
}
$taxonomies = array('pa_city');
$args = array('order'=>'ASC','hide_empty'=>true);
echo get_terms_dropdown($taxonomies, $args);
?>
<input type="submit" value="click" name="submit" onclick="WriteCookie()">
</form>
The error is only in FireFox, any ideas?

Your error is this:
Typeerror: document.forms.myCity.optionname is undefined
I believe the issue is in this element:
<form name="myCity" action="http://mywebsite.com/" method="POST">
It looks like forms use the id selector instead of the name selector. I ran into this issue before, and I solved it by placing both id and name into the <form> element. The only explicit online reference I can find to this is here from the MSN XHTML Standards page:
The name attribute on the form element is not allowed in XHTML 1.1
guidelines.
I also found a discussion thread here on XHML 1.1 strict standards & forms that makes reference to it as well:
The W3 says the name attribute is deprecated a deprecated part of HTML
4.0 and only the ID tag fits the new XHTML 1.1 standards.
And then I found this official W3 reference that nails the issue on the head; emphasis is mine:
name = cdata [CI]
This attribute names the element so that it may be
referred to from style sheets or scripts. Note. This attribute has
been included for backwards compatibility. Applications should use the
id attribute to identify elements.
So just add an id attribute to that element like this:
<form name="myCity" id="myCity" action="http://mywebsite.com/" method="POST">
You want to have both name and id in there to cover all bases on different browsers and their implementation of XHTML 1.1 standards.
But if somehow that still does not work, just do this instead in your JavaScript on top of the id change:
function WriteCookie()
{
document.cookie = "city" + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
cookievalue = document.getElementById("myCity").optionname.value + ";";
document.cookie='city='+cookievalue +'; expires=Fri, 3 Aug 2021 20:47:11 UTC; path=/';
window.location.href = "http://mywebsite.com";
}
I changed the line that read like this:
cookievalue = document.forms['myCity'].optionname.value + ";";
To be this:
cookievalue = document.getElementById("myCity").optionname.value + ";";

Cookie (document.cookie)

Iep, i have a problem, its the first time that im working with cookies and i was trying to save them.
The question is that only the 2 first values are saved, in this case "nombre" and "tuValor". If i do "alert(document.cookie)" the other values dont apear.
<script type="text/javascript">
function guardar() {
Nombre = "Empire";
tuValor = "F"+food;
tuValor2 = "w"+wood;
caduca = "31 Dec 2020 23:59:59 GMT";
document.cookie = Nombre+"="+tuValor+tuValor2+"expire= "+caduca ;
}
</script>

You forgot the semicolon before expire.
It goes like this:
document.cookie="my_cookie=empireWh4t3v3r;expires=Thu, 23 Apr 2020 15:37:15 GMT;"

How can I make a pop up stop appearing after a user clicks the link?

I've used JavaScript to set a cookie when the user clicks on the popup notice but after closing the browser completely, the cookie expires and the notice is shown again when navigating to the page.
I want the user to have the option to essentially say "Don't show this again".
1) Is there a better way to do this like saving the data to the db?
2) Can I set the cookie so it doesn't expire when the window is closed?
Here is the code to set the cookie. If cookie isn't set to "visited" it calls another function to showLightBox().
$j(document).ready(function() {
$j(function() {
checkCookie();
});
function checkCookie() {
var hasVisit = getCookie("hasVisited");
if(hasVisit != "visited") {
showLightBox();
}
}
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(cookieName, value) {
document.cookie = cookieName + "=" + value;
}

You can set the date when the cookie will be expired like this.
document.cookie="username=suman; expires=Thu, 18 Dec 2020 11:00:00 GMT";
Now this cookie will be deleted on 18th dec 2020. By default the cookie will be deleted when your browser is closed.
Update:-
In your case the cookie will set with the date on which it will be expired.
function setCookie(cookieName,value){
document.cookie = cookieName+"="+value+"; expires=Thu, 18 Dec 2020 11:00:00 GMT";
}
You may put any date you want at date field.

Did you by any chance use a session cookie? they expire when you close the browser.
You can continue reading here :
Why cookies dont expire after closing browser?

You are probably not setting an expiration for the cookie, so it defaults to a session cookie that expires on browser close.
If you are already using jQuery I recommend using the wonderful jQuery Cookie plugin, which makes setting and retrieving cookies a total piece of cake. See the readme/documentation for details and enjoy only having to write a couple lines of code instead of 50.

Why don't you use localStorage in html5 for achieving this since it is persistent,
Like when a user clicks on the link for the first time set the flag
localStorage.setItem('clicked', "yes");
Then again check if this value is set,
if(localStorage.getItem('clicked')!=null){
//clicked
}
else
{
//not clicked
}
If this value is set then show "Don't show this again" else don't ...