Develop Reference

How to rewrite costum Gdpr cookie consent jquery code snippet into pure javascript

I need help with Gdpr cookie consent Jquery code snippet below to rewrite it into pure javascript. Can any one please help me rewrite it into pure javascript? Thanks in advance.
Jquery:
$(document).ready(function () {
if (document.cookie.indexOf("gdpr_mandatory=") == -1) {
$('#gdpr_basic').modal({
backdrop: false
});
}
});
$('#gdpr_btn_full_agree').click(function (e) {
e.preventDefault();
var date = new Date();
date = new Date(date.getTime() + 1000 * 60 * 60 * 24 * 365);
document.cookie = "gdpr_mandatory=1; expires=" + date.toGMTString() + "; path=/";
document.cookie = "gdpr_functional=1; expires=" + date.toGMTString() + "; path=/";
document.cookie = "gdpr_ga=1; expires=" + date.toGMTString() + "; path=/";
document.cookie = "gdpr_fbp=1; expires=" + date.toGMTString() + "; path=/";
$('#gdpr_basic').modal('hide');
});
$('#gdpr_btn_adjust').click(function (e) {
e.preventDefault();
$('#gdpr_basic').modal('hide');
$('#gdpr_adjust').modal();
});
$('#gdpr_btn_save').click(function (e) {
e.preventDefault();
$('#gdpr_adjust_form').submit();
});
$('#gdpr_adjust_form').on('submit', function (e) {
e.preventDefault();
$(this).find('input[type="checkbox"]').each(function (e) {
var fieldName = $(this).attr('name');
var fieldValue = $(this).is(':checked') ? 1 : 0;
var date = new Date();
date = new Date(date.getTime() + 1000 * 60 * 60 * 24 * 365);
document.cookie = fieldName + "=" + fieldValue + "; expires=" + date.toGMTString() + "; path=/;";
}) toastr["info"]("Saved");
$('#gdpr_adjust').modal('hide');
});
I have found online site that converts query to Pure Javascript but it doesn't work properly. This is converted code snippet:
document.querySelector(document).ready(function () {
if (document.cookie.indexOf("gdpr_mandatory=") == -1) {
document.querySelector('#gdpr_basic').modal({
backdrop: false
});
}
});
document.querySelector('#gdpr_btn_full_agree').click(function (e) {
e.preventDefault();
var date = new Date();
date = new Date(date.getTime() + 1000 * 60 * 60 * 24 * 365);
document.cookie = "gdpr_mandatory=1; expires=" + date.toGMTString() + "; path=/";
document.cookie = "gdpr_functional=1; expires=" + date.toGMTString() + "; path=/";
document.cookie = "gdpr_ga=1; expires=" + date.toGMTString() + "; path=/";
document.cookie = "gdpr_fbp=1; expires=" + date.toGMTString() + "; path=/";
document.querySelector('#gdpr_basic').modal('hide');
});
document.querySelector('#gdpr_btn_adjust').click(function (e) {
e.preventDefault();
document.querySelector('#gdpr_basic').modal('hide');
document.querySelector('#gdpr_adjust').modal();
});
document.querySelector('#gdpr_btn_save').click(function (e) {
e.preventDefault();
document.querySelector('#gdpr_adjust_form').submit();
});
document.querySelector('#gdpr_adjust_form').addEventListener('submit', function (e) {
e.preventDefault();
document.querySelector(this).querySelector('input[type="checkbox"]').each(function (e) {
var fieldName = document.querySelector(this).attr('name');
var fieldValue = document.querySelector(this).is(':checked') ? 1 : 0;
var date = new Date();
date = new Date(date.getTime() + 1000 * 60 * 60 * 24 * 365);
document.cookie = fieldName + "=" + fieldValue + "; expires=" + date.toGMTString() + "; path=/;";
}) toastr["info"]("Saved");
document.querySelector('#gdpr_adjust').modal('hide');
});
This is the link to the code snippet that shows converted Pure Javascript file errors:
Converted Javascript

Uncaught TypeError: Cannot read property cookie

I finally get the code to work after a search online I get the right solution to it at Setting cookies with form input
the code works but the value submitted are not what i expect.
it store this value="Submit!" but i want to store the value submited
How do i get the value submited
var today = new Date();
var expiry = new Date(today.getTime() + 30 * 24 * 3600 * 1000); // plus 30 days
function setCookie(name, value) {
document.cookie = name + "=" + escape(value) + "; path=/; expires=" + expiry.toGMTString();
}
function putCookie(form) {
alert("Hash send sucessfull");
setCookie("hashvalue", form.hashform.value);
return true;
}
function storeValues(form) {
setCookie("hashvalue", form.submit.value);
return true;
}
<form name='hashform' onsubmit="storeValues(this)">
<input type="text" value="Enter Your hash to mine" id="usrname">
<input type="submit" value="Submit!" id="submit">
</form>

In fact last error was the name of the form in the line:
setCookie("hashvalue", form.hashsandbox.value);
i haved form.submit.value and need to have the name of the field
Here is the full working code
var today = new Date();
var expiry = new Date(today.getTime() + 30 * 24 * 3600 * 1000); // plus 30 days
function setCookie(name, value) {
document.cookie = name + "=" + escape(value) + "; path=/; expires=" + expiry.toGMTString();
}
function storeValues(form) {
setCookie("hashvalue", form.hashsandbox.value);
alert("Hash send sucessfull");
return true;
}
<form name='hashform' onsubmit="storeValues(this)">
<input type="text" value="Enter Your hash to mine" id="hashsandbox">
<input type="submit" value="Submit!" id="submit">
</form>

Live Cookie Checker in js

I'm working on a solution that checks the cookies in real time.
Once you have opened a link, a cookie is created. This cookie should be checked in real time and depending on the content, the corresponding text (send button) should be displayed.
The code works. Where I have the problem is with the IF sequence, which should be checked again and again without reloading the page.
<script language="JavaScript" type="text/javascript">
function SetCookie(cname, cvalue) {
var d = new Date();
d.setTime(d.getTime() + (3560*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires;
};
function getCookieValue(a) {
var b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
return b ? b.pop() : '';
};
</script>
<img src="bilder/icon.png" height="75">
<script language="JavaScript" type="text/javascript">
if (getCookieValue("klickonbutton") == 'ja') {
document.write ('<input type="submit" value="Senden" id="senden">');
} else {
document.write ('<p><b><font color="#FF0000">Error Message</b></font></p>');
document.write ('<input type="submit" value="Senden" id="senden" disabled="disabled">');
};
</script>

document.write deletes the entire HTML and adds the Html which you specify in the parameter. Instead what you should do is add the button and error div on the HTML and toggle the display of these based on the cookie value. Check out the sample code.
<img src="bilder/icon.png" height="75">
<input type="submit" value="Senden" id="senden">
<p style="display: none" id="error"><b><font color="#FF0000">Error Message</b></font></p>
<script language="JavaScript" type="text/javascript">
function SetCookie(cname, cvalue) {
var d = new Date();
d.setTime(d.getTime() + (3560*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires;
checkIsCookieAvailable();
};
function getCookieValue(a) {
var b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
return b ? b.pop() : '';
};
function checkIsCookieAvailable() {
const senden = document.querySelector('#senden');
const error = document.querySelector('#error');
setInterval(() => {
if (getCookieValue("klickonbutton") == 'ja') {
senden.style.display = 'block';
senden.disabled = false;
error.style.display = 'none';
} else {
error.style.display = 'block';
senden.disabled = true;
}
}, 1000)
}
</script>

Creating and Checking cookies value with javascript/jquery

I'm setting up a new pop up and would like to create cookie. The basic function is to add classes into the wrapper if a cookie exists (or depending on value if that's possible). This is what I got so far:
HTML:
<div id="new-popup" class="active ">
<span class="collapse-popup">X</span>
<form>
<input class="tnp-email" type="email" placeholder="Email Address" name="ne" required="">
<input class="tnp-submit" type="submit" value="Submit">
</form>
</div>
JS/JQUERY:
jQuery(document).ready(function($) {
var popuptwo = $('#new-popup');
var cookie = GetCookie("testbb2020");
if(cookie == null) { }
if(cookie === 'closed') {
$('#new-popup').addClass('closed-test')
}
if(cookie === 'subscribed') {
$('#new-popup').addClass('subscribed-test')
}
// Click on "Close"
$('#new-popup .collapse-popup').click(function(event) {
var date = new Date();
date.setTime(date.getTime() + (30 * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
document.cookie = "testbb2020=closed" + expires + "; path=/"; {
}
});
// Click on "Subscribe"
$('#new-popup input.tnp-submit').click(function(event) {
var date = new Date();
date.setTime(date.getTime() + (30 * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
document.cookie = "testbb2020=subscribed" + expires + "; path=/"; {
}
});
});

JQuery no longer has an active plugin for this. Two alternatives exist depending on your needs:
you can use JS-Cookie for a way to work with cookies in Javascript
you can use LocalStorage instead of cookies
LocalStorage is the easier way, but if you need compatibility with older browsers go with cookies.

How Can I Set The Cookie Expire Every 30 Seconds [duplicate]

Could someone update the following code to make the cookie expire in 30 seconds.
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 createCookie(name, value) {
var date = new Date();
date.setTime(date.getTime()+(30*1000));
var expires = "; expires="+date.toGMTString();
document.cookie = name+"="+value+expires+"; path=/";
}

You can specify the maximum age in seconds when setting a cookie:
function setCookie(name, value, maxAgeSeconds) {
var maxAgeSegment = "; max-age=" + maxAgeSeconds;
document.cookie = encodeURI(name) + "=" + encodeURI(value) + maxAgeSegment;
}
Usage:
setCookie("username", "blaise", 30);