javascript notes

Cookies Example

Example of extracting values from forms and saving to cookies using Javascript/JQuery
On load, retreive form values last saved to cookie
If no cookie or cookie is empty, then set up some defaults
Button: Get Options Selected from Screen and Save to Cookie
Button: Get Last Options Selected From Cookie and put to Screen
Button: Clear Cookies
Select region

Select customer(s)
Cust A
Cust B
Cust C

Categories
Cat A
Cat B
Cat C
	
	<style>
	button {
		width:450px;
		height:30px;
		margin:3px;
	}
	</style>
	
<script>

	"use strict";

	$( document ).ready(function() {
		
		// ---------------------------------------------------------------------        
		// FUNCTION fnGetDataFromForm - get values from form and save to cookie
		// ---------------------------------------------------------------------        
		function fnGetDataFromForm(){
			
			var SelectionArray = []; 

			// region
			SelectionArray[0] = $("#idRegion").val();
			
			// customer
			SelectionArray[1] = $('#idCust1').prop('checked')
			SelectionArray[2] = $('#idCust2').prop('checked')
			SelectionArray[3] = $('#idCust3').prop('checked')

			// category
			SelectionArray[4] = $('input:radio[name=nameCat]:checked').val();
			
			var separator = ":" 
			var SelectionArrayAsString =  SelectionArray.join(separator);

			fnSetCookie('mappingSelectionCriteria', SelectionArrayAsString, 7)		
		}
		
		// ---------------------------------------------------------------------------
		// FUNCTION fnGetDataFromCookie - get values from form and save to cookie
		// ---------------------------------------------------------------------------
		// pull data from cookie - parse and place in selection criteria
			
		function fnGetDataFromCookie(){
			var myCookieVal = fnGetCookie('mappingSelectionCriteria'); 
			var myCookieArray = [];
			myCookieArray = myCookieVal.split(":"); 		
			
			// if noo cookies then assume first time here and, set some defaults
			if (myCookieArray.length < 2){		
				$("#idRegion").val("T1");
				$('#idCust1').prop('checked', "true"); 
				$('#idCust2').prop('checked', "true"); 			
				$('#idCust2').prop('checked', "false"); 
				$('input:radio[name=nameCat]').val(['CatC']);
			}
			// otherwise get value from in cookies
			else{
				$("#idRegion").val(myCookieArray[0]);
				$('#idCust1').prop('checked', (myCookieArray[1] == "true")); 
				$('#idCust2').prop('checked', (myCookieArray[2] == "true")); 
				$('#idCust3').prop('checked', (myCookieArray[3] == "true")); 
				$('input:radio[name=nameCat]').val([myCookieArray[4]]);					
			}
		}
		
		// -----------------------------------------------------------------
		// LISTENERS
		// -----------------------------------------------------------------
		
		$(".btnGetDataFromForm").on("click", function() {							
			fnGetDataFromForm();
			return false;
		});
		
		$(".btnGetDataFromCookie").on("click", function() {							
			fnGetDataFromCookie();
			return false;
		});

		$(".btnClearCookies").on("click", function() {							
			fnSetCookie('mappingSelectionCriteria', "", -1)
			return false;
		});
		
		// -----------------------------------------------------------------
		// default behavior on load - get selection defaults	
		fnGetDataFromCookie();		

	});  // end jquery


	function fnSetCookie(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 fnGetCookie(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 "";
	}

</script>
</head>
  
<body>

<h4>Cookies Example</h4>
<p>Example of extracting values from forms and saving to cookies using Javascript/JQuery</p>

<ul>
<li>On load, retreive form values last saved to cookie</li>
<li>If no cookie or cookie is empty, then set up some defaults</li>
<li>Button: Get Options Selected from Screen and Save to Cookie</li>
<li>Button: Get Last Options Selected From Cookie and put to Screen</li>
<li>Button: Clear Cookies</li>
</ul>
	
	<b>Select region</b><br/>
	<select id="idRegion" class="select">
		<option value="T1" >Eastern</option>
		<option value="T2">Central</option>
		<option value="T3">Western</option>				
	</select>

	<br/><br/>

	<b>Select customer(s)</b><br/>
	<input type="checkbox" id="idCust1" > Cust A <br/>
	<input type="checkbox" id="idCust2" > Cust B <br/>
	<input type="checkbox" id="idCust3" > Cust C <br/>
	
	<br/>
	
	<b>Categories</b><br/>
	<input type="radio" name="nameCat" class='cat' value="CatA"> Cat A<br/>
	<input type="radio" name="nameCat" class='cat' value="CatB"> Cat B<br/>
	<input type="radio" name="nameCat" class='cat' value="CatC"> Cat C<br/>

	<br/><br/>
	
	<button class='btnGetDataFromForm'>Get Options Selected from Screen and Save to Cookie</button><br/>
	<button class='btnGetDataFromCookie'>Get Last Options Selected From Cookie and put to Screen</button><br/>
	<button class='btnClearCookies'>Clear Cookies</button><br/>