SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 34 of 34
  1. #26
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Well, let's look what frm1 contains.

    Add the following to your script:

    Code:
    console.log(frm1);
    
    // as before
    document.getElementById("myradio1").checked = frm1[0]
    document.getElementById("myradio2").checked = frm1[1]
    Run the script, look at the console output and post it back here.

  2. #27
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With "myradio1" checked returns the correct state of the buttons:

    Code:
    ["true", "false"]
    Still, on the reloaded page the buttons appear: "myradio1" - unchecked, "myradio2" - checked.

    If I try to display more radio buttons, at page reload always the last one will be checked, regardless what we checked before reload.

    And the elements of frm1 array are always correct, respective to what button was checked.

    Can this error be because ["true", "false"] are strings? Maybe I should convert them? But to what?

  3. #28
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    I like the way you ignored my question there. Nicely done
    Anyway, I would do what you are asking like this:

    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Save buttonstate with cookies</title>
      </head>
    
      <body>
        <form id="myform">
          <p>
            <label>A: <input type="radio" name="radio" class="myRadio" id="a"></label>
            <label>B: <input type="radio" name="radio" class="myRadio" id="b"></label>
          </p>
        </form>
    
        <script>
          // Start cookie functions from Quirksmode
          // http://www.quirksmode.org/js/cookies.html
          //
          function createCookie(name,value,days) {
            if (days) {
              var date = new Date();
              date.setTime(date.getTime()+(days*24*60*60*1000));
              var expires = "; expires="+date.toGMTString();
            }
            else var expires = "";
            document.cookie = name+"="+value+expires+"; path=/";
          }
    
          function readCookie(name) {
            var nameEQ = name + "=";
            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,c.length);
              if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
            }
            return null;
          }
    
          function eraseCookie(name) {
            createCookie(name,"",-1);
          } 
          // End cookie functions from Quirksmode
    
          function repopulateRadioButtons(){
            var selectedButton = document.getElementById(readCookie("buttonState"));
            selectedButton.checked = true;
          }
    
          var radios = document.getElementsByClassName("myRadio"),
              i;
    
          for(i=0; i<radios.length; i++){
            radios[i].addEventListener("change", function(){
              createCookie("buttonState", this.id, 7);
            }, false);
          }
    
          repopulateRadioButtons();
        </script>
      </body>
    </html>
    Please notice how I have removed the inline event handlers.

    Any questions, just let me know.

    DEMO

  4. #29
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the solution including a practical example of using EventListeners.

    If I want to use this solution for checkboxes (instead radio buttons) what do I have to change?

    About ignoring "the question": I had no intention to do this. About what question do you speak?

    You asked me to provide the console.log output and I did this. I did not notice any other question, sorry for this.

    And I still want to understand which was the mistake in my method (except using EventHandlers, which I understood). Why with all correct elements the buttons do not select correctly?

  5. #30
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Quote Originally Posted by iib View Post
    Thank you for the solution including a practical example of using EventListeners.
    No probs

    Quote Originally Posted by iib View Post
    If I want to use this solution for checkboxes (instead radio buttons) what do I have to change?
    I actually wrote a blog post on how to do this recently.
    The blog post uses jQuery, but it should be easy enough to convert to plain JS.
    Have a look at that and let me know if you have any questions.

    Quote Originally Posted by iib View Post
    About ignoring "the question": I had no intention to do this. About what question do you speak?

    You asked me to provide the console.log output and I did this. I did not notice any other question, sorry for this.
    Oops. I completely misread your response. Sorry, that was my mistake.
    I struck through my comment in my post above to reflect the fact.

    Quote Originally Posted by iib View Post
    And I still want to understand which was the mistake in my method (except using EventHandlers, which I understood). Why with all correct elements the buttons do not select correctly?
    Were you attempting this locally or on a server?
    The reason I ask is that some browsers (such as Chrome) don't allow you to access cookies locally.

  6. #31
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Were you attempting this locally or on a server?
    The reason I ask is that some browsers (such as Chrome) don't allow you to access cookies locally.
    On a server. Exactly for the reason you mention, because I use Chrome.

  7. #32
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by iib View Post
    I still want to understand which was the mistake in my method. Why with all correct elements the buttons do not select correctly?
    The problem was with these lines:

    Code:
    document.getElementById("myradio1").checked = frm1[0];
    document.getElementById("myradio2").checked = frm1[1];
    What you wanted to be doing was this (boolean values):

    Code:
    document.getElementById("myradio1").checked = true;
    document.getElementById("myradio2").checked = false;
    But as you were getting the values by splitting a string which you retrieved from a cookie, this is what was happening:

    Code:
    document.getElementById("myradio1").checked = "true";
    document.getElementById("myradio2").checked = "false";
    Both of these evaluated to true, so the first button was always getting checked (as only one can be checked at once).

    What you need to do is convert the strings to actual booleans.You can do that, like this:

    Code:
    function checkCookie()
    {
      var frmString1 = getCookie("formString"),
          frm1 = frmString1.split(","),
          radio1State = (frm1[0] === "true"),
          radio2State = (frm1[1] === "true");
      document.getElementById("myradio1").checked = radio1State;
      document.getElementById("myradio2").checked = radio2State;
    }
    And it will work.

    HTH

  8. #33
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your answer. It's good that it came a little delayed because in the meanwhile I also discovered this issue and corrected it already.

    But this doesn't diminish your very helpful intentions.

    Thank you for support.

  9. #34
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by iib View Post
    Thank you for your answer. It's good that it came a little delayed because in the meanwhile I also discovered this issue and corrected it already.
    That's good - a great way to learn
    Out of interest, how did you solve this?


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
  •