I am working on javascript cookies. The material provided to me was very short and no examples. I am trying to create a html form that will allow user to input name and favorite pet when page is refreshed it will display the username and favorite pet in the html page as well for allowing user to change pet. I do not understand how to assign a users input to a cookie and then display it on html. This is what I have so far
<html>
<head>
<script>
var x = document.getElementById("nm").value;
var y = document.getElementById("fp").value;
document.cookie = x;
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user=getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
</script>
</head>
<body onload="checkCookie()">
<header>
Cookies
</header>
<br>
<form name="myForm"
onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname" id="nm"><br>
<br>
Favorite Pet: <input type="text" name="fpet" id=""fp"><br>
<br>
<button onclick="">Show cookies</button>
</form>
</body>
</html>
In order to set html to a specific value, use innerHTML.
There are several other things about your code that can be improved, however I hope to have given you a quick help here.
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
console.log(ca)
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user=getCookie("username");
if (user != "") {
alert("Welcome again " + user);
document.getElementById("name").innerHTML = user;
} else {
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
</script>
</head>
<body onload="checkCookie()">
<header>
Cookies
</header>
<br>
<form name="myForm"
onsubmit="return validateForm()" method="post">
<hr>
<p>Previously entered name:</p>
<b><p id="name"></p></b>
<hr>
Name: <input type="text" name="fname" id="nm"><br>
<br>
Favorite Pet: <input type="text" name="fpet" id="fp"><br>
<br>
<button onclick="">Show cookies</button>
</form>
<script type="text/javascript">
var x = document.getElementById("nm").value;
var y = document.getElementById("fp").value;
document.cookie = x;
</script>
</body>
</html>
Related
I have been trying to make a "username" cookie that remembers the name of user. But, I didn't understand why the while loop has to search for spaces.
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}`enter code here`
}
return "";
}
Here is the function to check the cookies
function checkCookie() {
var user=getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
and set the cookie
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
Hi i have one problem:
I have fully functioning cookies on my site, but I do not know how to display their content that the user wrote to them
My code is as follows:
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user=getCookie("username");
if (user != "") {
} else {
user = prompt("BlaBlaBla","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
And i need to display it into <h1> tag there:
<h1 class="heading white"><br>Hi
**THERE**
</h1>
<br>
The cookie name that i want to show is "username" or "user"
I will be happy for any suggestions for putting cookies in place because I search the internet all day and I do not know the advice
Get the cookie and then just inject it into the html... I would add an ID to the html h1 tag.
var user = getCookie("username");
//This won't really work because the id isn't called that
var h1 = document.getElementById("heading white");
h1.innerHTML = user;
I have a javascript progrma that uses cookies to save users name and favorite item, in my example i am using pet. Html page will allow user to update their favorite pet through a form text input and update the cookie with input when button is clicked. Stuck on how to do so... any suggestions or help would be greatly appreciated.
<html>
<body onload="checkCookie()">
<header>
Cookies
</header>
<br>
<form>
<br>
Update favorite Pet:<br><br> <input type="text" name="fpet" id="fp"><br>
<br>
<button onclick="myUpdate()">Update</button>
</form>
<p>Favorite Pet:</p>
<p id="uip"></p>
<script>
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user=getCookie("username");
var pet=getCookie("fpet");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
if (pet != "") {
alert("Your favorite pet is " + pet);
} else {
pet = prompt("Please enter your favorite pet:","");
if (pet != "" && pet != null) {
setCookie("fpet", pet, 30);
}
}
document.getElementById("uip").innerHTML = pet;
}
</script>
</body>
</html>
You can try this. when you run it from local pc then sometimes it will not work. try to host it any server or local server.
<html>
<body onload="checkCookie()">
<header>Cookies</header>
<br><br>
Update favorite Pet:<br><br> <input type="text" name="fpet" id="fp"><br>
<br>
<button onclick="myUpdate()">Update</button>
<p>Favorite Pet:</p>
<p id="uip"></p>
<script type="text/javascript">
function myUpdate(){
var updateFp = document.getElementById("fp").value;
setCookie('fpet',updateFp,1);
document.getElementById("uip").innerHTML = getCookie('fpet');
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user = getCookie("username");
var pet = getCookie("fpet");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
if (pet != "") {
alert("Your favorite pet is " + pet);
} else {
pet = prompt("Please enter your favorite pet:","");
if (pet != "" && pet != null) {
setCookie("fpet", pet, 30);
}
}
document.getElementById("uip").innerHTML = pet;
}
</script>
</body>
I have tried to create a Javascript cookie in which I am creating and storing the cookie in browser and and checking if cookie is stored on Browser or not. If cookie is stored on browser it will return Welcome user Username otherwise it'll ask user to enter his name.
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
<body onload= "checkCookie()">
<input type= "button" onclick= "checkCookie()" value= "val"/>
</body>
This code is prompting again and again to enter the cookie but not storing the cookie in browser
Please have a look at this and find a way to solve this problem?
Thanks
I Know the cookie is executing because I have the alert popping up. If i place
document.getElementById("wp_mep_1").autoplay=false;
Outside of the if else statement then it will fire off and shut down the video. Any suggestions on what is wrong with my code. This is a nice piece of script for anybody that is trying to solve this problem with a video player that executes after visiting a page. Hope this helps someone besides me when I can get it fixed.
Thanks
Here's the code.
<script>
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user=getCookie("username2");
if (user != "") {
alert("Welcome again " + user);
document.getElementById("wp_mep_1").autoplay=false;
} else {
user = ("ACNEDominationVideo");
if (user != "" && user != null) {
setCookie("username2", user, 30);
}
}
}
</script>
<!DOCTYPE html>
<html>
<body>
<h1><span style="font-family: arial,helvetica,sans-serif; font-size: 52px;"><strong><div class="su-heading su-heading-style-default su-heading-align-center" style="font-size:22px;margin-bottom:20px"><div class="su-heading-inner"><span style="color: #ff0000; font-family: arial,helvetica,sans-serif; font-size: 32px;"> <span data-icon=""></span> Acne Domination Will Show You The Way <span data-icon=""></span> </div></div></span></strong></span></h1>
<p style="text-align: center;"> <video id="wp_mep_1" src="http://acnedomination.101onlineorg.netdna-cdn.com/wp-content/uploads/videos/test2.mp4" width="740" height="360" controls="controls" preload="none" autoplay="true" >
</body>
<body onload="checkCookie()">
</html>
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1);
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user = getCookie("AcneDominationVid");
if (user != "") {
//alert ("welcome");
var get = true;
if (get == true){
document.getElementById("wp_mep_1").autoplay=false;
}
} else {
user = ("ACNEDominationVideo3");
if (user != "" && user != null) {
setCookie("AcneDominationVid", user, 30);
}
}
}
checkCookie();
This fixes it.