Need help with a very simple problem in Javascript Please.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
dissonantallure
Forum Newbie
Posts: 21
Joined: Tue Feb 03, 2009 7:48 pm

Need help with a very simple problem in Javascript Please.

Post 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. :)
Last edited by Benjamin on Thu May 07, 2009 11:51 am, edited 1 time in total.
Reason: Changed code type from text to html.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

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

Post by pickle »

If you want to keep a state between page loads, you'll need to access cookies.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
dissonantallure
Forum Newbie
Posts: 21
Joined: Tue Feb 03, 2009 7:48 pm

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

Post 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';
    }   
 
Last edited by Benjamin on Thu May 07, 2009 8:52 pm, edited 1 time in total.
Reason: Changed code type from text to javascript.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

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

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
dissonantallure
Forum Newbie
Posts: 21
Joined: Tue Feb 03, 2009 7:48 pm

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

Post 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
Last edited by Benjamin on Thu May 07, 2009 8:53 pm, edited 2 times in total.
Reason: Changed code type from text to html.
lovelf
Forum Contributor
Posts: 153
Joined: Wed Nov 05, 2008 12:06 am

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

Post 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()">
Post Reply