#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    1
    Rep Power
    0

    Arrays - beginner level


    I am at beginners level in JavaScript. For practice I try to restore a form after the page was closed and then reloaded again. I try this using cookies.

    html + js is here:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    </script>
    </head>
    <body onload = "checkCookie()">
    <form name="myform" id="myform">
    <p><input type="radio" name="myradio" id="myradio1" onchange = "checkForm(); setCookie('formString',frmString,1)">
    <input type="radio" name="myradio" id="myradio2" onchange = "checkForm(); setCookie('formString',frmString,1)">
    <input type="radio" name="myradio" id="myradio3" onchange = "checkForm(); setCookie('formString',frmString,1)"></p>
    <p><input type="checkbox" name="mycheckbox" id="mycheckbox1" onchange = "checkForm(); setCookie('formString',frmString,1)">
    <input type="checkbox" name="mycheckbox" id="mycheckbox2" onchange = "checkForm(); setCookie('formString',frmString,1)">
    <input type="checkbox" name="mycheckbox" id="mycheckbox3" onchange = "checkForm(); setCookie('formString',frmString,1)"></p>
    
    <script>
    
    function checkForm()
    {
    	var frm = new Array()
    	frm[0] = document.getElementById("myradio1").checked
    	frm[1] = document.getElementById("myradio2").checked
    	frm[2] = document.getElementById("myradio3").checked
    	frm[3] = document.getElementById("mycheckbox1").checked
    	frm[4] = document.getElementById("mycheckbox2").checked
    	frm[5] = document.getElementById("mycheckbox3").checked
    	// alert(frm)
    	frmString = frm.join()
    	// alert(frmString)
    }
    
    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;
    	// alert(document.cookie)
    }
    
    function getCookie(cname)
    {
    	// alert(cname)
    	var name = cname + "=";
    	// alert(name)
    	var ca = document.cookie.split(';');
    	for(var i=0; i<ca.length; i++) 
    	{
    		var c = ca[i].trim();
    		// alert(c)
    		// alert(c.substring(name.length,c.length))
    	    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
    	}
    	return "";
    }
    
    function checkCookie()
    {
    	var frmString1 = getCookie("formString");
    	// alert(frmString1)
    	var frm1 = frmString1.split(",")
    	document.getElementById("myradio1").checked = frm1[0]
    	document.getElementById("myradio2").checked = frm1[1]
    	document.getElementById("myradio3").checked = frm1[2]
    	document.getElementById("mycheckbox1").checked = frm1[3]
    	document.getElementById("mycheckbox2").checked = frm1[4]
    	document.getElementById("mycheckbox3").checked = frm1[5]
    }
    
    </script>
    </body>
    </html>
    I placed few alerts just to check if everything goes correctly. And it goes... till the very last step when I try to pass the values retrieved (correctly) from cookie to the form elements.

    This last step does not workl anymore and I don't understand why

    I explain a bit the script:
    • I create the Array with form selections
    • I convert it to a String
    • I create the cookie (at each onchange event) and close the page
    • I retrieve (correctly) the cookie at page reload
    • I convert the String to Array
    • All Array elements are correct, as expected
    • BUT I CAN'T SUCCEED TO PASS THE VALUES TO FORM ELEMENTS


    After one day I still cannot say why is that... I tried also to convert the String value "true"/"false" to Boolean, but useless. I have no more ideas what I can try.

    Thank you in advance for any helpful input.

    I know the code is far far away from "best practices", but please keep in mind I have only 1 month of JavaScript study.
  2. #2
  3. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2003
    Posts
    804
    Rep Power
    101
    The .checked property is a Boolean (true or false) and you are assigning a String ("true" or "false").

    Strings are truthy if non-empty and falsy if empty. Since "false" is not an empty string, it is truthy:
    Code:
    Boolean("false") == true
    To fix this, compare the string with "true" to get the correct Boolean result, like this:
    Code:
    document.getElementById("myradio1").checked = frm1[0] == "true";
    That way, you're setting it to either "true" == "true" (which is true) or "false" == "true" (which is false), and the .checked property will be a Boolean like it's supposed to be.

IMN logo majestic logo threadwatch logo seochat tools logo