jquery cookie with args
jquery cookie with args
by Andrew Pougher
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.min.js"></script>
<div class="container">
<form class="form-horizontal" role="form">
<p><label>Your name</label><input type="text" name="name" class="form-control"/></p>
<p><label>Email</label><input type="text" name="email" class="form-control"/></p>
<p><input type="checkbox" name="newsletter" /><label>Newsletter</label></p>
<p><input type="checkbox" name="updates" /><label>Updates</label></p>
</form><br>
<button class="tab-button orange" id="seek-button">Search</button>
<button class="form-button orange" id="pi-button">Form</button>
<p id="cookie"></p>
</div>
CSS
button.orange {
width:80%;
min-height:40px;
display:block;
color: #ffffff;
text-decoration:none;
border: 0;
padding:10px;
line-height:20px;
font-size:1.1em;
padding-left:20px;
background-color: #f9aa04;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f9aa04), to(#d15f00));
background-image: -moz-linear-gradient(top, #f9aa04, #d15f00);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9aa04', endColorstr='#d15f00');
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.15);
-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.15);
box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.15);
}
JavaScript
function setCookie(args) {
$.cookie(args.name, args.value, { path: '/' });
alert($.cookie($('#name').val()))
};
// click and set cookie with actions
$('#seek-button, #form-button').on('click', function(){
setCookie({
name : $('#name').val(),
value : $('#email').val()
})
if($(this).attr('id') == 'seek-button') {
window.location.href = 'http://www.yahoo.co.uk';
} else {
window.location.hash = '#contact';
}
});
function showCookie() {
$('#cookie').html(decodeURIComponent(document.cookie));
}
showCookie();