SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how would i save menu values?

    im trying to have it save menu selections, i was thinking either cookies or
    storing it in the .window thing but i am unsure of how to do these, any help would be great.


    HTML Code:
    <script type="text/javascript">
    
    function setCookie(c_name,value,exdays)
    {
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
    }
    
    
    function getCookie(c_name)
    {
    var i,x,y,ARRcookies=document.cookie.split(";");
    for (i=0;i<ARRcookies.length;i++)
    {
      x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
      y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
      x=x.replace(/^\s+|\s+$/g,"");
      if (x==c_name)
        {
        return unescape(y);
        }
      }
    }
    
    <!--
    // initialise shortcuts on page load
    var selectObj1=null, selectObj2=null// global
     function init()
      { selectObj1=document.getElementById("select_1");
        selectObj2=document.getElementById("select_2");
        selectObj2.disabled=true;
    
    // ========== end init() ==============
    // second select box options list
    var A= new Array()
    A["remote 1"]=["0","yup","DVD-1"];
    A["remote 2"]=["0","VCR-1","DVD-2"];
    //
    
    // global variables
    var saveObj=null, indx=null, targetObj=null, selectNo=null;   
    //
     function process(obj,sNumb)
      { // disable unused select boxes
        if(sNumb==1)
         { selectObj1.selectedIndex="0";
           selectObj1.disabled=true;
         }
        else if( sNumb==2)
    	 { selectObj1.selectedIndex="0";
           selectObj1.disabled=true;
         }
       //
       // store selected index   
        indx=obj.options.selectedIndex;
       // invalid selection
        if(indx==0){ return; }
       // ---------
       // save passed parameters for use after timeout deleay   
        saveObj=obj, selectNo=sNumb;     
      // put object items list into next select box after clearing
         targetObj=document.getElementById("select_"+selectNo)
         targetObj.disabled=false;
       // clear any existing options note that this starts from end of list, not beginning 
         for(var i=targetObj.options.length-1;i>-1;i--)
              { targetObj.options[i]=null;  }   
      // build in short delay here to avoid error in Opera browser
          setTimeout("finishOff()",50)
        }
    // ----------- 50ms delay here --------   
    // called from timeout in function process()
       function finishOff()
        {  var obj=saveObj;    // from global
          // fill selectObj options 
           var i, thisItem=0;                         
          // build options list
          switch(selectNo){
          case 2 : targArray = A[obj.options[indx].value]; break;
           }   
             //
           for(i=0;i<targArray.length;i++)
             { thisItem=targArray[i];     
              // syntax is new Option("text", "value", isDefaultSelectedFlag, isSelectedFlag)
                       
               targetObj.options[i]=new Option(thisItem,thisItem,false,false);   
             }
         obj.blur();
      }
      
    // ============ end process() ===================
    // fires on selecting in third select box
     function finish()
      { select("["+selectObj1.value+"]  ["+selectObj2.value+"]")
      }
    // ------------ 
    //
    window.onload=init;
    //-->
    
    </script>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    The window object is refreshed every time a new page is loaded or refreshed, so it's not possible to save menu values there.

    Cookies are you best bet here. The createCookie, readCookie and eraseCookie functions from the Quirksmode page about cookies are what you'll need.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    The window object is refreshed every time a new page is loaded or refreshed, so it's not possible to save menu values there.

    Cookies are you best bet here. The createCookie, readCookie and eraseCookie functions from the Quirksmode page about cookies are what you'll need.
    I get how to apply the cookie to a html drop down menu, but i dont quite understand how to apply it to the javascript based one above. Any help would be appreciated, thanks

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Here is where that script stores the selected index

    Code:
    // store selected index   
    indx=obj.options.selectedIndex;
    So it could be in the same place where you save out to a cookie the selected index, and the id of the object.

    As for making use of the cookie, that would be at this place in the init function:

    Code:
    selectObj2.disabled=true;
    To provide much more help though, I would need to be able to see a working version of what you currently have.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is the working version


    Code:
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Select Products 3 Levels</title>
    <script type="text/javascript">
    
    function setCookie(c_name,value,exdays)
    {
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
    }
    
    
    function getCookie(c_name)
    {
    var i,x,y,ARRcookies=document.cookie.split(";");
    for (i=0;i<ARRcookies.length;i++)
    {
      x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
      y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
      x=x.replace(/^\s+|\s+$/g,"");
      if (x==c_name)
        {
        return unescape(y);
        }
      }
    }
    
    
    <!--
    // initialise shortcuts on page load
    var selectObj1=null, selectObj2=null, selectObj3=null; // global
     function init()
      { selectObj1=document.getElementById("select_1");
        selectObj2=document.getElementById("select_2");
        selectObj2.disabled=true;
       //
        selectObj3=document.getElementById("select_3");
        selectObj3.disabled=true; 
       //
      }
    // ========== end init() ==============
    // second select box options list
    var A= new Array()
    A["remote_1"]=["Select here ...","TV-1","DVD-1"];
    A["remote_2"]=["Select here ...","VCR-1","DVD-2"];
    //
    // third select box options list
    var B= new Array()
    B["TV-1"]=["Select here ...","Sony","Sanyo"];
    B["DVD-1"]=["Select here ...","Honda","Ford", "GMH"];
    B["VCR-1"]=["Select here ...","Red","Green","Blue"];
    B["DVD-2"]=["Select here ...","Panasonic","Daewoo"];
    //
    
    // global variables
    var saveObj=null, indx=null, targetObj=null, selectNo=null;   
    //
     function process(obj,sNumb)
      { // disable unused select boxes
        if(sNumb==2)
         { selectObj2.selectedIndex="0";
           selectObj2.disabled=true;
           selectObj3.selectedIndex="0";
           selectObj3.disabled=true;
         }
        else if( sNumb==3)
         { selectObj3.selectedIndex="0";
           selectObj3.disabled=true;
         }
       //
       // store selected index   
        indx=obj.options.selectedIndex;
    	setCookie(1,obj.options.selectedIndex,0)
    	
       // invalid selection
        if(indx==0){ return; }
       // ---------
       // save passed parameters for use after timeout deleay   
        saveObj=obj, selectNo=sNumb;     
      // put object items list into next select box after clearing
         targetObj=document.getElementById("select_"+selectNo)
         targetObj.disabled=false;
       // clear any existing options note that this starts from end of list, not beginning 
         for(var i=targetObj.options.length-1;i>-1;i--)
              { targetObj.options[i]=null;  }   
      // build in short delay here to avoid error in Opera browser
          setTimeout("finishOff()",50)
        }
    // ----------- 50ms delay here --------   
    // called from timeout in function process()
       function finishOff()
        {  var obj=saveObj;    // from global
          // fill selectObj options 
           var i, thisItem=0;                         
          // build options list
          switch(selectNo){
          case 2 : targArray = A[obj.options[indx].value]; break;
          case 3 : targArray = B[obj.options[indx].value]; break;
           }   
             //
           for(i=0;i<targArray.length;i++)
             { thisItem=targArray[i];     
              // syntax is new Option("text", "value", isDefaultSelectedFlag, isSelectedFlag)
                       
               targetObj.options[i]=new Option(thisItem,thisItem,false,false);   
             }
         obj.blur();
      }
    // ============ end process() ===================
    // fires on selecting in third select box
     function finish()
      { alert("You have selected ["+selectObj1.value+"]  ["+selectObj2.value+"]  ["+selectObj3.value+"] ")
      }
    // ------------ 
    //
    window.onload=init;
    //-->
    </script>
    <style type="text/css">
    <!--
    .S_any { position:absolute; top:50px; width:100px; text-align:left; }
    #S1    { left:10px;  }
    #S2    { left:150px; }
    #S3    { left:300px; }
    #S4    { left:450px; }
    select { width:120px; }
    -->
    </style>
    </head>
     
    <body>
     
    <div id="S1" class="S_any">
      <select id="select_1" onchange="process(this,2)">
      <option value="0">Select here ....</option>
      <option value="remote_1">Remote 1</option>
      <option value="remote_2">Remote 2</option>
      </select>
    </div>
    <!-- end S1 -->
    <div id="S2" class="S_any">
      <select id="select_2" onchange="process(this,3)">
      <option value="0">Select here ....</option>
      </select></div>
    <!- end S2>
    <div id="S3" class="S_any">
      <select id="select_3" onchange="process(this,4)">
      <option value="0">Select here ....</option>
      </select></div>
    <!-- end S3 -->
    
    </body>
     
    </html>

  6. #6
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Here is where that script stores the selected index

    Code:
    // store selected index   
    indx=obj.options.selectedIndex;
    So it could be in the same place where you save out to a cookie the selected index, and the id of the object.

    As for making use of the cookie, that would be at this place in the init function:

    Code:
    selectObj2.disabled=true;
    To provide much more help though, I would need to be able to see a working version of what you currently have.


    Here is what i have so far, i put in the setcookie right below the "store index" and put the value as obj.options.selectedIndex. I get a cookie but am unsure if it is correct, and where to apply the getcookie



    Code:
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Select Products 3 Levels</title>
    <script type="text/javascript">
    
    function setCookie(name, value) {
      document.cookie=name+"="+value;
    }
    
    function getCookie(c_name)
    {
    var i,x,y,ARRcookies=document.cookie.split(";");
    for (i=0;i<ARRcookies.length;i++)
    {
      x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
      y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
      x=x.replace(/^\s+|\s+$/g,"");
      if (x==c_name)
        {
        return unescape(y);
        }
      }
    }
    
    
    <!--
    // initialise shortcuts on page load
    var selectObj1=null, selectObj2=null, selectObj3=null; // global
     function init()
      { selectObj1=document.getElementById("select_1");
        selectObj2=document.getElementById("select_2");
        selectObj2.disabled=true;
       //
        selectObj3=document.getElementById("select_3");
        selectObj3.disabled=true; 
       //
      }
    // ========== end init() ==============
    // second select box options list
    var A= new Array()
    A["remote_1"]=["Select here ...","TV-1","DVD-1"];
    A["remote_2"]=["Select here ...","VCR-1","DVD-2"];
    //
    // third select box options list
    var B= new Array()
    B["TV-1"]=["Select here ...","Sony","Sanyo"];
    B["DVD-1"]=["Select here ...","Honda","Ford", "GMH"];
    B["VCR-1"]=["Select here ...","Red","Green","Blue"];
    B["DVD-2"]=["Select here ...","Panasonic","Daewoo"];
    //
    
    // global variables
    var saveObj=null, indx=null, targetObj=null, selectNo=null;   
    //
     function process(obj,sNumb)
      { // disable unused select boxes
        if(sNumb==2)
         { selectObj2.selectedIndex="0";
           selectObj2.disabled=true;
           selectObj3.selectedIndex="0";
           selectObj3.disabled=true;
         }
        else if( sNumb==3)
         { selectObj3.selectedIndex="0";
           selectObj3.disabled=true;
         }
       //
       // store selected index   
        indx=obj.options.selectedIndex;
    	setCookie(1,obj.options.selectedIndex)
    	
       // invalid selection
        if(indx==0){ return; }
       // ---------
       // save passed parameters for use after timeout deleay   
        saveObj=obj, selectNo=sNumb;     
      // put object items list into next select box after clearing
         targetObj=document.getElementById("select_"+selectNo)
         targetObj.disabled=false;
       // clear any existing options note that this starts from end of list, not beginning 
         for(var i=targetObj.options.length-1;i>-1;i--)
              { targetObj.options[i]=null;  }   
      // build in short delay here to avoid error in Opera browser
          setTimeout("finishOff()",50)
        }
    // ----------- 50ms delay here --------   
    // called from timeout in function process()
       function finishOff()
        {  var obj=saveObj;    // from global
          // fill selectObj options 
           var i, thisItem=0;                         
          // build options list
          switch(selectNo){
          case 2 : targArray = A[obj.options[indx].value]; break;
          case 3 : targArray = B[obj.options[indx].value]; break;
           }   
             //
           for(i=0;i<targArray.length;i++)
             { thisItem=targArray[i];     
              // syntax is new Option("text", "value", isDefaultSelectedFlag, isSelectedFlag)
                       
               targetObj.options[i]=new Option(thisItem,thisItem,false,false);   
             }
         obj.blur();
      }
    // ============ end process() ===================
    // fires on selecting in third select box
     function finish()
      { alert("You have selected ["+selectObj1.value+"]  ["+selectObj2.value+"]  ["+selectObj3.value+"] ")
      }
    // ------------ 
    //
    window.onload=init;
    //-->
    </script>
    <style type="text/css">
    <!--
    .S_any { position:absolute; top:50px; width:100px; text-align:left; }
    #S1    { left:10px;  }
    #S2    { left:150px; }
    #S3    { left:300px; }
    #S4    { left:450px; }
    select { width:120px; }
    -->
    </style>
    </head>
     
    <body>
     
    <div id="S1" class="S_any">
      <select id="select_1" onchange="process(this,2)">
      <option value="0">Select here ....</option>
      <option value="remote_1">Remote 1</option>
      <option value="remote_2">Remote 2</option>
      </select>
    </div>
    <!-- end S1 -->
    <div id="S2" class="S_any">
      <select id="select_2" onchange="process(this,3)">
      <option value="0">Select here ....</option>
      </select></div>
    <!- end S2>
    <div id="S3" class="S_any">
      <select id="select_3" onchange="process(this,4)">
      <option value="0">Select here ....</option>
      </select></div>
    <!-- end S3 -->
    
    </body>
     
    </html>

  7. #7
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Here is where that script stores the selected index

    Code:
    // store selected index   
    indx=obj.options.selectedIndex;
    So it could be in the same place where you save out to a cookie the selected index, and the id of the object.

    As for making use of the cookie, that would be at this place in the init function:

    Code:
    selectObj2.disabled=true;
    To provide much more help though, I would need to be able to see a working version of what you currently have.
    Here it is, i put the setcookie below the "store select index", but i am unsure on how to get the data into the selectobj through the getcookie function

    Code:
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Select Products 3 Levels</title>
    <script type="text/javascript">
    
    function setCookie(c_name,value,exdays)
    {
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
    }
    
    function getCookie(c_name)
    {
    var i,x,y,ARRcookies=document.cookie.split(";");
    for (i=0;i<ARRcookies.length;i++)
    {
      x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
      y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
      x=x.replace(/^\s+|\s+$/g,"");
      if (x==c_name)
        {
        return unescape(y);
        }
      }
    }
    
    
    <!--
    // initialise shortcuts on page load
    var selectObj1=null, selectObj2=null, selectObj3=null; // global
     function init()
      { selectObj1=document.getElementById("select_1");
      if 
        selectObj2=document.getElementById("select_2");
        selectObj2.disabled=true;
       //
        selectObj3=document.getElementById("select_3");
        selectObj3.disabled=true; 
       //
      }
    // ========== end init() ==============
    // second select box options list
    var A= new Array()
    A["remote_1"]=["Select here ...","TV-1","DVD-1"];
    A["remote_2"]=["Select here ...","VCR-1","DVD-2"];
    //
    // third select box options list
    var B= new Array()
    B["TV-1"]=["Select here ...","Sony","Sanyo"];
    B["DVD-1"]=["Select here ...","Honda","Ford", "GMH"];
    B["VCR-1"]=["Select here ...","Red","Green","Blue"];
    B["DVD-2"]=["Select here ...","Panasonic","Daewoo"];
    //
    
    // global variables
    var saveObj=null, indx=null, targetObj=null, selectNo=null;   
    //
     function process(obj,sNumb)
      { // disable unused select boxes
        if(sNumb==2)
         { selectObj2.selectedIndex="0";
           selectObj2.disabled=true;
           selectObj3.selectedIndex="0";
           selectObj3.disabled=true;
         }
        else if( sNumb==3)
         { selectObj3.selectedIndex="0";
           selectObj3.disabled=true;
         }
       //
       // store selected index   
        indx=obj.options.selectedIndex;
    	setCookie(1,indx,"")
    	
       // invalid selection
        if(indx==0){ return; }
       // ---------
       // save passed parameters for use after timeout deleay   
        saveObj=obj, selectNo=sNumb;     
      // put object items list into next select box after clearing
         targetObj=document.getElementById("select_"+selectNo)
         targetObj.disabled=false;
       // clear any existing options note that this starts from end of list, not beginning 
         for(var i=targetObj.options.length-1;i>-1;i--)
              { targetObj.options[i]=null;  }   
      // build in short delay here to avoid error in Opera browser
          setTimeout("finishOff()",50)
        }
    // ----------- 50ms delay here --------   
    // called from timeout in function process()
       function finishOff()
        {  var obj=saveObj;    // from global
          // fill selectObj options 
           var i, thisItem=0;                         
          // build options list
          switch(selectNo){
          case 2 : targArray = A[obj.options[indx].value]; break;
          case 3 : targArray = B[obj.options[indx].value]; break;
           }   
             //
           for(i=0;i<targArray.length;i++)
             { thisItem=targArray[i];     
              // syntax is new Option("text", "value", isDefaultSelectedFlag, isSelectedFlag)
                       
               targetObj.options[i]=new Option(thisItem,thisItem,false,false);   
             }
         obj.blur();
      }
    // ============ end process() ===================
    // fires on selecting in third select box
     function finish()
      { alert("You have selected ["+selectObj1.value+"]  ["+selectObj2.value+"]  ["+selectObj3.value+"] ")
      }
    // ------------ 
    //
    window.onload=init;
    //-->
    </script>
    <style type="text/css">
    <!--
    .S_any { position:absolute; top:50px; width:100px; text-align:left; }
    #S1    { left:10px;  }
    #S2    { left:150px; }
    #S3    { left:300px; }
    #S4    { left:450px; }
    select { width:120px; }
    -->
    </style>
    </head>
     
    <body>
     
    <div id="S1" class="S_any">
      <select id="select_1" onchange="process(this,2)">
      <option value="0">Select here ....</option>
      <option value="remote_1">Remote 1</option>
      <option value="remote_2">Remote 2</option>
      </select>
    </div>
    <!-- end S1 -->
    <div id="S2" class="S_any">
      <select id="select_2" onchange="process(this,3)">
      <option value="0">Select here ....</option>
      </select></div>
    <!- end S2>
    <div id="S3" class="S_any">
      <select id="select_3" onchange="process(this,4)">
      <option value="0">Select here ....</option>
      </select></div>
    <!-- end S3 -->
    
    </body>
     
    </html>

  8. #8
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here it is

    I put the getcookie below the "store selected obj", but i am unsure on how to put the data into the selectobj through the getcookie function

    Code:
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Select Products 3 Levels</title>
    <script type="text/javascript">
    
    function setCookie(c_name,value,exdays)
    {
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
    }
    
    function getCookie(c_name)
    {
    var i,x,y,ARRcookies=document.cookie.split(";");
    for (i=0;i<ARRcookies.length;i++)
    {
      x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
      y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
      x=x.replace(/^\s+|\s+$/g,"");
      if (x==c_name)
        {
        return unescape(y);
        }
      }
    }
    
    
    <!--
    // initialise shortcuts on page load
    var selectObj1=null, selectObj2=null, selectObj3=null; // global
     function init()
      { selectObj1=document.getElementById("select_1");
      if 
        selectObj2=document.getElementById("select_2");
        selectObj2.disabled=true;
       //
        selectObj3=document.getElementById("select_3");
        selectObj3.disabled=true; 
       //
      }
    // ========== end init() ==============
    // second select box options list
    var A= new Array()
    A["remote_1"]=["Select here ...","TV-1","DVD-1"];
    A["remote_2"]=["Select here ...","VCR-1","DVD-2"];
    //
    // third select box options list
    var B= new Array()
    B["TV-1"]=["Select here ...","Sony","Sanyo"];
    B["DVD-1"]=["Select here ...","Honda","Ford", "GMH"];
    B["VCR-1"]=["Select here ...","Red","Green","Blue"];
    B["DVD-2"]=["Select here ...","Panasonic","Daewoo"];
    //
    
    // global variables
    var saveObj=null, indx=null, targetObj=null, selectNo=null;   
    //
     function process(obj,sNumb)
      { // disable unused select boxes
        if(sNumb==2)
         { selectObj2.selectedIndex="0";
           selectObj2.disabled=true;
           selectObj3.selectedIndex="0";
           selectObj3.disabled=true;
         }
        else if( sNumb==3)
         { selectObj3.selectedIndex="0";
           selectObj3.disabled=true;
         }
       //
       // store selected index   
        indx=obj.options.selectedIndex;
    	setCookie(1,indx,"")
    	
       // invalid selection
        if(indx==0){ return; }
       // ---------
       // save passed parameters for use after timeout deleay   
        saveObj=obj, selectNo=sNumb;     
      // put object items list into next select box after clearing
         targetObj=document.getElementById("select_"+selectNo)
         targetObj.disabled=false;
       // clear any existing options note that this starts from end of list, not beginning 
         for(var i=targetObj.options.length-1;i>-1;i--)
              { targetObj.options[i]=null;  }   
      // build in short delay here to avoid error in Opera browser
          setTimeout("finishOff()",50)
        }
    // ----------- 50ms delay here --------   
    // called from timeout in function process()
       function finishOff()
        {  var obj=saveObj;    // from global
          // fill selectObj options 
           var i, thisItem=0;                         
          // build options list
          switch(selectNo){
          case 2 : targArray = A[obj.options[indx].value]; break;
          case 3 : targArray = B[obj.options[indx].value]; break;
           }   
             //
           for(i=0;i<targArray.length;i++)
             { thisItem=targArray[i];     
              // syntax is new Option("text", "value", isDefaultSelectedFlag, isSelectedFlag)
                       
               targetObj.options[i]=new Option(thisItem,thisItem,false,false);   
             }
         obj.blur();
      }
    // ============ end process() ===================
    // fires on selecting in third select box
     function finish()
      { alert("You have selected ["+selectObj1.value+"]  ["+selectObj2.value+"]  ["+selectObj3.value+"] ")
      }
    // ------------ 
    //
    window.onload=init;
    //-->
    </script>
    <style type="text/css">
    <!--
    .S_any { position:absolute; top:50px; width:100px; text-align:left; }
    #S1    { left:10px;  }
    #S2    { left:150px; }
    #S3    { left:300px; }
    #S4    { left:450px; }
    select { width:120px; }
    -->
    </style>
    </head>
     
    <body>
     
    <div id="S1" class="S_any">
      <select id="select_1" onchange="process(this,2)">
      <option value="0">Select here ....</option>
      <option value="remote_1">Remote 1</option>
      <option value="remote_2">Remote 2</option>
      </select>
    </div>
    <!-- end S1 -->
    <div id="S2" class="S_any">
      <select id="select_2" onchange="process(this,3)">
      <option value="0">Select here ....</option>
      </select></div>
    <!- end S2>
    <div id="S3" class="S_any">
      <select id="select_3" onchange="process(this,4)">
      <option value="0">Select here ....</option>
      </select></div>
    <!-- end S3 -->
    
    </body>
     
    </html>

  9. #9
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here it is, the previous one is wrong srry

    I put the getcookie below the "store selected obj", but i am unsure on how to put the data into the selectobj through the getcookie function

    Code:
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Select Products 3 Levels</title>
    <script type="text/javascript">
    
    function setCookie(c_name,value,exdays)
    {
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
    }
    
    function getCookie(c_name)
    {
    var i,x,y,ARRcookies=document.cookie.split(";");
    for (i=0;i<ARRcookies.length;i++)
    {
      x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
      y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
      x=x.replace(/^\s+|\s+$/g,"");
      if (x==c_name)
        {
        return unescape(y);
        }
      }
    }
    
    
    <!--
    // initialise shortcuts on page load
    var selectObj1=null, selectObj2=null, selectObj3=null; // global
     function init()
      { selectObj1=document.getElementById("select_1");
    
        selectObj2=document.getElementById("select_2");
        selectObj2.disabled=true;
       //
        selectObj3=document.getElementById("select_3");
        selectObj3.disabled=true; 
       //
      }
    // ========== end init() ==============
    // second select box options list
    var A= new Array()
    A["remote_1"]=["Select here ...","TV-1","DVD-1"];
    A["remote_2"]=["Select here ...","VCR-1","DVD-2"];
    //
    // third select box options list
    var B= new Array()
    B["TV-1"]=["Select here ...","Sony","Sanyo"];
    B["DVD-1"]=["Select here ...","Honda","Ford", "GMH"];
    B["VCR-1"]=["Select here ...","Red","Green","Blue"];
    B["DVD-2"]=["Select here ...","Panasonic","Daewoo"];
    //
    
    // global variables
    var saveObj=null, indx=null, targetObj=null, selectNo=null;   
    //
     function process(obj,sNumb)
      { // disable unused select boxes
        if(sNumb==2)
         { selectObj2.selectedIndex="0";
           selectObj2.disabled=true;
           selectObj3.selectedIndex="0";
           selectObj3.disabled=true;
         }
        else if( sNumb==3)
         { selectObj3.selectedIndex="0";
           selectObj3.disabled=true;
         }
       //
       // store selected index   
        indx=obj.options.selectedIndex;
    	setCookie(1,indx,"")
    	
       // invalid selection
        if(indx==0){ return; }
       // ---------
       // save passed parameters for use after timeout deleay   
        saveObj=obj, selectNo=sNumb;     
      // put object items list into next select box after clearing
         targetObj=document.getElementById("select_"+selectNo)
         targetObj.disabled=false;
       // clear any existing options note that this starts from end of list, not beginning 
         for(var i=targetObj.options.length-1;i>-1;i--)
              { targetObj.options[i]=null;  }   
      // build in short delay here to avoid error in Opera browser
          setTimeout("finishOff()",50)
        }
    // ----------- 50ms delay here --------   
    // called from timeout in function process()
       function finishOff()
        {  var obj=saveObj;    // from global
          // fill selectObj options 
           var i, thisItem=0;                         
          // build options list
          switch(selectNo){
          case 2 : targArray = A[obj.options[indx].value]; break;
          case 3 : targArray = B[obj.options[indx].value]; break;
           }   
             //
           for(i=0;i<targArray.length;i++)
             { thisItem=targArray[i];     
              // syntax is new Option("text", "value", isDefaultSelectedFlag, isSelectedFlag)
                       
               targetObj.options[i]=new Option(thisItem,thisItem,false,false);   
             }
         obj.blur();
      }
    // ============ end process() ===================
    // fires on selecting in third select box
     function finish()
      { alert("You have selected ["+selectObj1.value+"]  ["+selectObj2.value+"]  ["+selectObj3.value+"] ")
      }
    // ------------ 
    //
    window.onload=init;
    //-->
    </script>
    <style type="text/css">
    <!--
    .S_any { position:absolute; top:50px; width:100px; text-align:left; }
    #S1    { left:10px;  }
    #S2    { left:150px; }
    #S3    { left:300px; }
    #S4    { left:450px; }
    select { width:120px; }
    -->
    </style>
    </head>
     
    <body>
     
    <div id="S1" class="S_any">
      <select id="select_1" onchange="process(this,2)">
      <option value="0">Select here ....</option>
      <option value="remote_1">Remote 1</option>
      <option value="remote_2">Remote 2</option>
      </select>
    </div>
    <!-- end S1 -->
    <div id="S2" class="S_any">
      <select id="select_2" onchange="process(this,3)">
      <option value="0">Select here ....</option>
      </select></div>
    <!- end S2>
    <div id="S3" class="S_any">
      <select id="select_3" onchange="process(this,4)">
      <option value="0">Select here ....</option>
      </select></div>
    <!-- end S3 -->
    
    </body>
     
    </html>

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Is it right to believe that you want to use the cookie information to recreate the menu selections when the page loads?

    If so, the cookie is the least of your worries. You need to work on how to script the recreation of the menu, if for example the first select has the last option chosen and the second select has the VCR selected.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    The first stage of things is to put together the information that you need, which you can do from the end of the init function.

    Code javascript:
    function init() {
        ...
        var selectedOptions = getSelectedOptions();
        setMenus(selectedOptions);
    }

    Later on we can use getCookie to retrieve those values instead, but for now we'll use some dummy data to get things started.

    Code javascript:
    function getSelectedOptions() {
        return [
            {id: 'select_1', selectedIndex: 2}
            {id: 'select_2', selectedIndex: 1},
            {id: 'select_3', selectedIndex: 0}
        ];
    }

    We now need the web browser to set the menus according to those that are in the selectedOptions list. How can we do that? We can change the selected option and then trigger the onchange event so that the other select menus get updated, but we'll need to use some setTimeout trickery so that we can come back to the select field after it has been updated.

    Here's setOption which will set one of the options, and setMenus which loops through our selected options

    Code javascript:
    function setOption(select, selectedIndex) {
        if (select.options.selectedIndex !== selectedIndex
            && select.options.length > selectedIndex) {
            select.options.selectedIndex = selectedIndex;
            select.onchange();
            return true;
        }
    }
    function setMenus(selectedOptions) {
        var option,
            select,
            i;
        for (i = 0; i < selectedOptions.length; i += 1) {
            option = selectedOptions[i];
            select = document.getElementById(option.id);
            if (!select) {
                return;
            }
            if (setOption(select, option.selectedIndex) === true) {
                setTimeout(function () {
                    setMenus(selectedOptions);
                }, 100);
            }
        }
    }

    A setTimeout has been used between each option change, to allow browsers like IE the chance to update the options list before the next one is processed.
    Last edited by paul_wilkins; Mar 24, 2011 at 21:28.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Now we know what data we need to retrieve, we can go about saving that data to a cookie.

    setCookie(obj.id, indx, 1);

    And read that data on page load in from the getSelectedOptions function:

    Code javascript:
    function getSelectedOptions() {
        var options = [],
            i = 1,
            id;
        while (document.getElementById('select_' + i)) {
            id = 'select_' + i;
            options.push({
                id: id,
                selectedIndex: Number(getCookie(id)) || 0
            });
            i += 1;
        }
        return options;
    }

    That's the cookie stuff sorted out. As you can see, getting and setting the cookie are the least of the worries.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You sir paul_wilkins are amazing!!!!!!!!!

    Thanks for helping me sort things out, definitely helped me with understanding the logic going on too.

    Once again MUCH thanks

  14. #14
    SitePoint Member
    Join Date
    Jun 2011
    Location
    Marblehead, MA
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Now we know what data we need to retrieve, we can go about saving that data to a cookie.

    setCookie(obj.id, indx, 1);

    And read that data on page load in from the getSelectedOptions function:

    Code javascript:
    function getSelectedOptions() {
        var options = [],
            i = 1,
            id;
        while (document.getElementById('select_' + i)) {
            id = 'select_' + i;
            options.push({
                id: id,
                selectedIndex: Number(getCookie(id)) || 0
            });
            i += 1;
        }
        return options;
    }


    That's the cookie stuff sorted out. As you can see, getting and setting the cookie are the least of the worries.
    Why do you use a concat operator for i, rather than i++?

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by EuroMarkus View Post
    Why do you use a concat operator for i, rather than i++?
    That's a personal force of habit gained by learning from Douglas Crockford. The ++ and -- operators are typically responsible for bad code due to excessive trickiness, so not using them is a useful safety feature.

    Also, since they are most-often used in for loops, using the += operator means that loops can be easily and consistently adjusted to increment by other values on an as-needed basis.

    Code javascript:
    var i, j;
    for (i = 0; i < someLen; i += 1) {
        for (j = 0; j < otherLen; j += i) {
            ...
        }
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Member
    Join Date
    Jun 2011
    Location
    Marblehead, MA
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    ..., so not using them is a useful safety feature.
    We would also be "safer" driving our cars with helmets, and 3-point harnesses, but it's not practical.

    If I saw one of my coders using i+=1, I'd be pissed.

    If a programmer is writing good code, i++ should never be a problem.


    Quote Originally Posted by paul_wilkins View Post

    Code javascript:
    var i, j;
    for (i = 0; i < someLen; i += 1) {
        for (j = 0; j < otherLen; j += i) {
            ...
        }
    }
    And this is EXACTLY the bad coding I'm referring to (and Crockford's trickiness).

    Tons of logic like j += i scattered all over, would be a nightmare to debug in a huge codebase.

    Writing clean and elegant code, is number one.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •