Page 1 of 1

Need help with a very simple problem in Javascript Please.

Posted: Thu May 07, 2009 5:49 am
by dissonantallure
I have some code here that hides or shows a div element if a button was checked. For instance.

Code: Select all

 
---HTML---
 
Do you own a Business?
 
<label><input type="radio" name="Business" value="Yes" id="Yes" onclick="showDiv('Biz');" /> Yes</label>
<label><input type="radio" name="Business" value="No" id="No" onclick="hideDiv('Biz');" />No</label>
 
<div id="Biz" style="display: none;">
What is the name of your Business?
<input>
</div>
 
---Javascript---
 
// Function to show div
 
function showDiv(divid){
    if(document.getElementById(divid).style.display == 'none')
      document.getElementById(divid).style.display = 'block';
    }
 
// Function to hide div
 
function hideDiv(divid){
    if(document.getElementById(divid).style.display == 'block')
      document.getElementById(divid).style.display = 'none';
    }   
    
 
When you click yes your div element is displayed and when you click no it is hidden however, when the page is refreshed the div element becomes hidden again. Can anyone help me retain a visible div element if yes is clicked upon page refresh? Any help will be truly appreciated and I know this will be an easy fix for some of you pros. :)

Re: Need help with a very simple problem in Javascript Please.

Posted: Thu May 07, 2009 9:55 am
by pickle
If you want to keep a state between page loads, you'll need to access cookies.

Re: Need help with a very simple problem in Javascript Please.

Posted: Thu May 07, 2009 1:33 pm
by dissonantallure
I am a beginner when it comes to Javascript so I was wondering if anyone could help me fuse my code. I have am using this code for cookies.

Code: Select all

 
// Cookie Functions  ////////////////////  (:)
 
 
 
// Set the cookie.
 
// SetCookie('your_cookie_name', 'your_cookie_value', exp);
 
 
 
// Get the cookie.
 
// var someVariable = GetCookie('your_cookie_name');
 
 
 
var expDays = 100;
 
var exp = new Date(); 
 
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
 
 
 
function getCookieVal (offset) {  
 
    var endstr = document.cookie.indexOf (";", offset);  
 
    if (endstr == -1) { endstr = document.cookie.length; }
 
    return unescape(document.cookie.substring(offset, endstr));
 
}
 
 
 
function GetCookie (name) {  
 
    var arg = name + "=";  
 
    var alen = arg.length;  
 
    var clen = document.cookie.length;  
 
    var i = 0;  
 
    while (i < clen) {    
 
        var j = i + alen;    
 
        if (document.cookie.substring(i, j) == arg) return getCookieVal (j);    
 
        i = document.cookie.indexOf(" ", i) + 1;    
 
        if (i == 0) break;   
 
    }  
 
    return null;
 
}
 
 
 
function SetCookie (name, value) {  
 
    var argv = SetCookie.arguments;  
 
    var argc = SetCookie.arguments.length;  
 
    var expires = (argc > 2) ? argv[2] : null;  
 
    var path = (argc > 3) ? argv[3] : null;  
 
    var domain = (argc > 4) ? argv[4] : null;  
 
    var secure = (argc > 5) ? argv[5] : false;  
 
    document.cookie = name + "=" + escape (value) + 
 
    ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + 
 
    ((path == null) ? "" : ("; path=" + path)) +  
 
    ((domain == null) ? "" : ("; domain=" + domain)) +    
 
    ((secure == true) ? "; secure" : "");
 
}
 
 
 
// cookieForms saves form content of a page.
 
// use the following code to call it:
 
//  <body onLoad="cookieForms('open', 'form_1', 'form_2', 'form_n')" onUnLoad="cookieForms('save', 'form_1', 'form_2', 'form_n')">
 
 
 
// It works on text fields and dropdowns in IE 5+
 
// It only works on text fields in Netscape 4.5
 
 
 
 
 
function cookieForms() {  
 
    var mode = cookieForms.arguments[0];
 
    
 
    for(f=1; f<cookieForms.arguments.length; f++) {
 
        formName = cookieForms.arguments[f];
 
        
 
        if(mode == 'open') {    
 
            cookieValue = GetCookie('saved_'+formName);
 
            if(cookieValue != null) {
 
                var cookieArray = cookieValue.split('#cf#');
 
                
 
                if(cookieArray.length == document[formName].elements.length) {
 
                    for(i=0; i<document[formName].elements.length; i++) {
 
                    
 
                        if(cookieArray[i].substring(0,6) == 'select') { document[formName].elements[i].options.selectedIndex = cookieArray[i].substring(7, cookieArray[i].length-1); }
 
                        else if((cookieArray[i] == 'cbtrue') || (cookieArray[i] == 'rbtrue')) { document[formName].elements[i].checked = true; }
 
                        else if((cookieArray[i] == 'cbfalse') || (cookieArray[i] == 'rbfalse')) { document[formName].elements[i].checked = false; }
 
                        else { document[formName].elements[i].value = (cookieArray[i]) ? cookieArray[i] : ''; }
 
                    }
 
                }
 
            }
 
        }
 
                
 
        if(mode == 'save') {    
 
            cookieValue = '';
 
            for(i=0; i<document[formName].elements.length; i++) {
 
                fieldType = document[formName].elements[i].type;
 
                
 
                if(fieldType == 'password') { passValue = ''; }
 
                else if(fieldType == 'checkbox') { passValue = 'cb'+document[formName].elements[i].checked; }
 
                else if(fieldType == 'radio') { passValue = 'rb'+document[formName].elements[i].checked; }
 
                else if(fieldType == 'select-one') { passValue = 'select'+document[formName].elements[i].options.selectedIndex; }
 
                else { passValue = document[formName].elements[i].value; }
 
            
 
                cookieValue = cookieValue + passValue + '#cf#';
 
            }
 
            cookieValue = cookieValue.substring(0, cookieValue.length-4); // Remove last delimiter
 
            
 
            SetCookie('saved_'+formName, cookieValue, exp);     
 
        }   
 
    }
 
}
 
//  End -->
 
Can anyone help me correctly inject the code which hides shows a div element into this cookie script?

Code: Select all

 
// Function to show div
 
function showDiv(divid){
    if(document.getElementById(divid).style.display == 'none')
      document.getElementById(divid).style.display = 'block';
    }
 
// Function to hide div
 
function hideDiv(divid){
    if(document.getElementById(divid).style.display == 'block')
      document.getElementById(divid).style.display = 'none';
    }   
 

Re: Need help with a very simple problem in Javascript Please.

Posted: Thu May 07, 2009 5:09 pm
by pickle
Inside the if() statement in your showdiv() function, call setcookie(), recording the fact that the div is shown.
Inside the if() statment in your hidediv() function, call setcookie(),recording the fact that the div is hidden.

When the page loads, read that cookie, and if it says the div is shown, then show the div. If it says the div is hidden, then hide the div.

Re: Need help with a very simple problem in Javascript Please.

Posted: Thu May 07, 2009 7:43 pm
by dissonantallure
As I said before I am a beginner and I am sorry for so many questions. Okay first question.

1. How do I call setcookie?

2. What is the correct syntax for adding call setcookie() inside my if()?

3. I use this code in the body of the page.

Code: Select all

<body onload="cookieForms('open', 'SCform')" onunload="cookieForms('save', 'SCform')">
How would I read the cookie, and if it says the div is shown, then show the div. If it says the div is hidden, then hide the div?

Thanks so much for all your help :D

Re: Need help with a very simple problem in Javascript Please.

Posted: Fri May 08, 2009 7:29 am
by lovelf

Code: Select all

<script type="text/javascript">
function showDiv(divid){
    if(document.getElementById(divid).style.display == 'none')
      document.getElementById(divid).style.display = 'block';
setCookie('rtrd','a')
    }
 
// Function to hide div
 
function hideDiv(divid){
    if(document.getElementById(divid).style.display == 'block')
      document.getElementById(divid).style.display = 'none';
setCookie('rtrd','b')
    }   
 
function Checkcookie(){
var rtrc=Getcookie('rtrd'); 
if(rtrc){if(rtrc=='a'){showDiv('Biz')} else{hideDiv('Biz')}
}
}
</script>
 
<body onload="Checkcookie()">