Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    4jd
    4jd is offline
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question Is this valid Javascript?

    Code:
    <input name="1" value="1" id="1" type="radio" onClick="change(this)">
    <input name="1" value="2" id="2" type="radio" onClick="change(this)">
    <input name="1" value="3" id="3" type="radio" onClick="change(this)">
    <br>
    <input name="2" value="4" id="4" type="radio" onClick="change(this)">
    <input name="2" value="5" id="5" type="radio" onClick="change(this)">
    <input name="2" value="6" id="6" type="radio" onClick="change(this)">
    <br>
    <input name="3" value="7" id="7" type="radio" onClick="change(this)">
    <input name="3" value="8" id="8" type="radio" onClick="change(this)">
    <input name="3" value="9" id="9" type="radio" onClick="change(this)">
    <div id="tab3continue">
    Hello
    </div>
    <script>
    var tab3_button = document.getElementById('tab3continue');
      tab3_button.style.visibility = 'hidden';
      function change(switchElement) {
            if ((switchElement.value == '1' || '2' || '3' )&&(switchElement.value == '4' || '5' || '6')&&(switchElement.value == '7' || '8' || '9')) {
                    tab3_button.style.visibility = 'visible';
            } else {
                    tab3_button.style.visibility = 'hidden';  
            }             
    }
    </script>
    So I have a div(tab3continue) which is hidden and want is visible if either 1, 2, 3 are selected AND either 4, 5, 6 are selected AND either 7, 8, 9 is selected. so need one from each group to be selected to make visible.

    Could someone tell me if this code could work or where I am going wrong?

    Thanks
    -------------
    Jay

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 Posts
    do this
    alert('1' || '2' || '3')
    it alerts 1 so ..
    if ((switchElement.value == '1' || '2' || '3' )
    is the same as
    if ((switchElement.value == '1' )
    what you want is
    if ((switchElement.value == '1' ||switchElement.value == '2' ||switchElement.value == '3' )
    same with the other condition
    does this make sense to you ?

    ++++++++++EDIT-----------
    the above is just wrong
    see the next post by
    Old Pedant for the
    correction
    ----------------more edits--------
    If i had done ...
    alert(6 == '1' || '2' || '3' )
    I would have seen it's
    all one expression that
    returns true if comparison
    is true or it returns '2' and the
    '3' part is never evaluated.
    Last edited by DaveyErwin; 10-14-2011 at 01:46 AM. Reason: woops this is bad and not gettin much better

  • #3
    4jd
    4jd is offline
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Sorry still learning JS. Are you trying to create a 'variable'/'alert' with the values then output it in the 'if' statement?

    Where would I replace the code?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Davey's point is that YOUR code
    Code:
        switchElement.value == '1' || '2' || '3'
    does *NOT* do what you think it does.

    It *FIRST* evaluates the expression
    Code:
            '1' || '2' || '3'
    and the value of that is simply
    Code:
           '1'
    and then compares that to switchElement.value

    So your code is *ACTUALLY* doing
    Code:
         switchElement.value == '1'
    and ignoring the || '2' || '3'

    Okay, so now perform that same simplification to your other || conditions and this line
    Code:
            if ((switchElement.value == '1' || '2' || '3' )&&(switchElement.value == '4' || '5' || '6')&&(switchElement.value == '7' || '8' || '9')) {
    is reduced to this
    Code:
            if ( switchElement.value == '1'  && switchElement.value == '4'  && switchElement.value == '7' ) {
    HOWEVER...

    However, that is total nonsense. Because that is saying "if the value of switchElement is '1' *AND* the value of switchElement is '4' *AND* the value of switchElement is '7' then..."

    But of course there is no possible way for *ONE* value to match '1' and '4' and '7', so your condition will *NEVER* be true. NEVER.

    So you will *ALWAYS* end up doing
    Code:
             else {
                    tab3_button.style.visibility = 'hidden';  
            }
    ***********

    Now, tell us what you WANT to have happen and maybe we can make it do so.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    DaveyErwin (10-14-2011)

  • #5
    4jd
    4jd is offline
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Think I need to go right back to basics, maybe even open a book. Thanks for your explanation guys.

    What I was trying was....

    have 3 groups of radio buttons, with the continue button hidden. only when all 3 groups are checked then make the continue button visible.

    ....that's it.

    I also understand that the simplest way is to do it is to checked="checked" them and allowing the user to change them if needed but I want to avoid having them checked initially for other reasons.

    If you could help out, that would be brilliant.

  • #6
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 Posts
    If i had done ...
    alert(6 == '1' || '2' || '3' )
    I would have seen it's
    all one expression that
    returns true if comparison
    is true or it returns '2' and the
    '3' part is never evaluated.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Okay, for starters, ids and names can't start with a digit. (Well, names can, but only if you do some hokey things when accessing by name.)

    And you don't need ids when you have names.

    So how about this?
    Code:
    <html>
    <head>
    <script type="text/javascript">
    // function to get the value of a group of radio buttons
    // works even if there is only one button in the group:
    function getRBvalue(group)
    {
        if ( group.length == null ) /* if only one button */
        {
            return group.checked ? group.value : null;
        }
        /* if two more more buttons */
        for ( var g = 0; g < group.length; ++g )
        {
            if ( group[g].checked )
                return group[g].value;
        }
        return null;
    }
    
    function change(rb)
    {
        var tab3 = document.getElementById("tab3continue");
        var form = rb.form;
        if (    getRBvalue(form.rb1) == null 
             || getRBvalue(form.rb2) == null 
             || getRBvalue(form.rb3) == null )
        {
            // if any group is unchecked, leave tab3 hidden
            tab3.style.visibility = "hidden";
        } else {
            // only show it when each group has a button checked
            tab3.style.visibility = "visible";
        }
    }
    </script>
    </head>
    <body>
    <form>
    <input name="rb1" value="1" type="radio" onClick="change(this)"/>
    <input name="rb1" value="2" type="radio" onClick="change(this)"/>
    <input name="rb1" value="3" type="radio" onClick="change(this)"/>
    <br/>
    <input name="rb2" value="4" type="radio" onClick="change(this)"/>
    <input name="rb2" value="5" type="radio" onClick="change(this)"/>
    <input name="rb2" value="6" type="radio" onClick="change(this)"/>
    <br/>
    <input name="rb3" value="7" type="radio" onClick="change(this)"/>
    <input name="rb3" value="8" type="radio" onClick="change(this)"/>
    <input name="rb3" value="9" type="radio" onClick="change(this)"/>
    <br/>
    <div id="tab3continue" style="visibility: hidden;">
    Hello
    </div>
    </form>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Whoops...Davey is correct. My operator precedence was off.

    Still, the point that the value of the || expressions wasn't what you thought was correct.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Regular Coder
    Join Date
    Sep 2010
    Location
    Far far away
    Posts
    122
    Thanks
    0
    Thanked 16 Times in 16 Posts
    Quote Originally Posted by 4jd
    have 3 groups of radio buttons, with the continue button hidden. only when all 3 groups are checked then make the continue button visible.
    Take my five pences... Let's consider some kind of storage where one bit corresponds to one whole group of radiobuttons with the same name. Each checked radiobutton sets a flag in a storage and all setted flags (this is definite numeric value) mean that a hidden field should be visible.

    I wrote the example below that solves the requested issue. Some comments are present there.
    PHP Code:
    <input name="rb1" value="1" id="rb1" type="radio" onClick="change(this)">
    <
    input name="rb1" value="2" id="rb2" type="radio" onClick="change(this)">
    <
    input name="rb1" value="3" id="rb3" type="radio" onClick="change(this)">
    <
    br>
    <
    input name="rb2" value="4" id="rb4" type="radio" onClick="change(this)">
    <
    input name="rb2" value="5" id="rb5" type="radio" onClick="change(this)">
    <
    input name="rb2" value="6" id="rb6" type="radio" onClick="change(this)">
    <
    br>
    <
    input name="rb3" value="7" id="rb7" type="radio" onClick="change(this)">
    <
    input name="rb3" value="8" id="rb8" type="radio" onClick="change(this)">
    <
    input name="rb3" value="9" id="rb9" type="radio" onClick="change(this)">
    <
    div id="tab3continue" style="visibility: hidden;">Hello</div>
    <
    script>
    // the storage of flags. Each bit corresponds to one group of radiobuttons
    var flags 0;
    function 
    change(rb)
    {
        
    // get the name of the radiobutton
        
    var name rb.name;
        
    // get only a digital part of the name
        
    var index name.slice(2);
        
    // set a flag per a group
        // rb1 sets 1
        // rb2 sets 2
        // rb3 sets 4
        
    flags |= << (index 1);
        
    // all flags in sum give 7 this means that the filed should be visible
        
    document.getElementById('tab3continue').style.visibility flags == 'visible' 'hidden';
    };
    </script> 

  • #10
    New Coder
    Join Date
    Aug 2011
    Location
    Gold Coast, Australia
    Posts
    16
    Thanks
    1
    Thanked 1 Time in 1 Post
    Are you trying to find if switchElement.value is between 1 and 9?
    If so, to fix the problem change this line:
    Code:
            if ((switchElement.value == '1' || '2' || '3' )&&(switchElement.value == '4' || '5' || '6')&&(switchElement.value == '7' || '8' || '9')) {
    To this line:
    Code:
            if ((switchElement.value == '1' || switchElement.value == '2' || switchElement.value == '3' ) || (switchElement.value == '4' || switchElement.value == '5' || switchElement.value == '6')& || switchElement.value == '7' || switchElement.value == '8' || switchElement.value == '9')) {
    That'll check whether switchElement.value is one of those numbers.

  • #11
    4jd
    4jd is offline
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks everyone, but this these are my actual radio buttons. I have tried altering your code Old Pedant and Siberia-man to suit but with no luck,

    Code:
    <input name="id[18]" value="81" id="attrib-18-81" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-18-81"> Kola Cubes</label><br />
    <input name="id[18]" value="82" id="attrib-18-82" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-18-82"> Pineapple Cubes</label><br />
    <input name="id[18]" value="79" id="attrib-18-79" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-18-79"> Rhubarb and Custard</label><br />
    <input name="id[18]" value="80" id="attrib-18-80" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-18-80"> Strawberry and Cream</label><br /><br />
    
    <input name="id[19]" value="99" id="attrib-19-99" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-19-99"> Kola Cubes</label><br />
    <input name="id[19]" value="100" id="attrib-19-100" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-19-100"> Pineapple Cubes</label><br />
    <input name="id[19]" value="97" id="attrib-19-97" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-19-97"> Rhubarb and Custard</label><br />
    <input name="id[19]" value="98" id="attrib-19-98" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-19-98"> Strawberry and Cream</label><br /><br />
    
    <input name="id[20]" value="117" id="attrib-20-117" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-20-117"> Kola Cubes</label><br />
    <input name="id[20]" value="118" id="attrib-20-118" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-20-118"> Pineapple Cubes</label><br />
    <input name="id[20]" value="115" id="attrib-20-115" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-20-115"> Rhubarb and Custard</label><br />
    <input name="id[20]" value="116" id="attrib-20-116" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-20-116"> Strawberry and Cream</label><br /><br />
    
    <!--  MY CONTINUE BUTTON  -->
    <div id="tab3continue" style="visibility:hidden;">
    <img src="images/tabs/button_continue.gif" alt="CONTINUE"
    </div>
    I tried doing this to Old Pedant's code
    Code:
    <script type="text/javascript">
    // function to get the value of a group of radio buttons
    // works even if there is only one button in the group:
    function getRBvalue(group)
    {
        if ( group.length == null ) /* if only one button */
        {
            return group.checked ? group.value : null;
        }
        /* if two more more buttons */
        for ( var g = 0; g < group.length; ++g )
        {
            if ( group[g].checked )
                return group[g].value;
        }
        return null;
    }
    
    function change(rb)
    {
        var tab3 = document.getElementById("tab3continue");
        var form = rb.form;
        if (    getRBvalue(form.id[18]) == null 
             || getRBvalue(form.id[19]) == null 
             || getRBvalue(form.id[20]) == null )
        {
            // if any group is unchecked, leave tab3 hidden
            tab3.style.visibility = "hidden";
        } else {
            // only show it when each group has a button checked
            tab3.style.visibility = "visible";
        }
    }
    </script>
    and this to Siberia-man's code...
    Code:
    <script>
    // the storage of flags. Each bit corresponds to one group of radiobuttons
    var flags = 0;
    function change(rb)
    {
        // get the name of the radiobutton
        var name = id[.name.];
        // get only a digital part of the name
        var index = name.slice(2);
        // set a flag per a group
        // rb1 sets 1
        // rb2 sets 2
        // rb3 sets 4
        flags |= 1 << (index - 1);
        // all flags in sum give 7 this means that the filed should be visible
        document.getElementById('tab3continue').style.visibility = flags == 7 ? 'visible' : 'hidden';
    };
    </script>
    The name is auto generated, so not sure if the square brackets are making it not work or am I missing out other entries that need to be altered?
    ----------updated--------------
    Just did some research on the square brackets, if I've understood it correctly, javascript uses the brackets to define an array? so this would cause a problem? how would I tell javascript to ignore the brackets for the purpose of creating an array e.g. \" in php?
    Last edited by 4jd; 10-14-2011 at 07:51 AM.

  • #12
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 Posts
    <input name="id[18]" value="81" id="attrib-18-81" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-18-81"> Kola Cubes</label><br />
    <input name="id[18]" value="82" id="attrib-18-82" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-18-82"> Pineapple Cubes</label><br />
    <input name="id[18]" value="79" id="attrib-18-79" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-18-79"> Rhubarb and Custard</label><br />
    <input name="id[18]" value="80" id="attrib-18-80" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-18-80"> Strawberry and Cream</label><br /><br />

    <input name="id[19]" value="99" id="attrib-19-99" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-19-99"> Kola Cubes</label><br />
    <input name="id[19]" value="100" id="attrib-19-100" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-19-100"> Pineapple Cubes</label><br />
    <input name="id[19]" value="97" id="attrib-19-97" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-19-97"> Rhubarb and Custard</label><br />
    <input name="id[19]" value="98" id="attrib-19-98" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-19-98"> Strawberry and Cream</label><br /><br />

    <input name="id[20]" value="117" id="attrib-20-117" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-20-117"> Kola Cubes</label><br />
    <input name="id[20]" value="118" id="attrib-20-118" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-20-118"> Pineapple Cubes</label><br />
    <input name="id[20]" value="115" id="attrib-20-115" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-20-115"> Rhubarb and Custard</label><br />
    <input name="id[20]" value="116" id="attrib-20-116" type="radio" onClick="change(this)"><label class="attribsRadioButton zero" for="attrib-20-116"> Strawberry and Cream</label><br /><br />

    <!-- MY CONTINUE BUTTON -->
    <div id="tab3continue" style="visibility:hidden;">
    <img src="images/tabs/button_continue.gif" alt="CONTINUE"
    </div>

    <script>
    changedArray=[]
    function change(el){
    if(changedArray.indexOf(el.name == -1))changedArray.push(el.name);
    if(changedArray.length == 3)alert('DONE')
    }

    </script>

    ===========edit+++++++=
    here is way for IE

    changedArray=[]
    function change(el){
    if(changedArray.toString().indexOf(el.name == -1))changedArray.push(el.name);
    if(changedArray.length == 3)alert('DONE')
    }

    thankyou siberia-man
    Last edited by DaveyErwin; 10-14-2011 at 01:01 PM.

  • #13
    Regular Coder
    Join Date
    Sep 2010
    Location
    Far far away
    Posts
    122
    Thanks
    0
    Thanked 16 Times in 16 Posts
    The name is auto generated, so not sure if the square brackets are making it not work or am I missing out other entries that need to be altered?
    Oh! So we have to be sure that each time when the name is auto generated -- it is the same as it was last time and it will be the same as now. So can we be sure that the group marked as id[18] will have the same name always? This can be important if you will implement some algorythms depending on names. This cannot be important in the suggestion by DaveyErwin. But his way has serious shortcoming -- the Array.indexOf method is not defined in IE and should be implemented by yourself.

    Just did some research on the square brackets, if I've understood it correctly, javascript uses the brackets to define an array? so this would cause a problem? how would I tell javascript to ignore the brackets for the purpose of creating an array e.g. \" in php?
    Both yes and no. Square brackets are used to define an array in the server-side, for example in PHP, but not in JavaScript. When data come to PHP the interpreter parses data and their names and bracketized names converts to array.
    Last edited by siberia-man; 10-14-2011 at 12:44 PM.

  • Users who have thanked siberia-man for this post:

    DaveyErwin (10-14-2011)

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Because you use square brackets in your names, you can't just do form.id[18]

    Javascript sees that as the name id and expects an array of such names, with id[18] referencing the 19th one.

    But it's easy to change my code to work:
    Code:
    function change(rb)
    {
        var tab3 = document.getElementById("tab3continue");
        var form = rb.form;
        if (    getRBvalue(form.["id[18]"]) == null 
             || getRBvalue(form.["id[19]"]) == null 
             || getRBvalue(form.["id[20]"]) == null )
        {
            // if any group is unchecked, leave tab3 hidden
            tab3.style.visibility = "hidden";
        } else {
            // only show it when each group has a button checked
            tab3.style.visibility = "visible";
        }
    }
    That form of coding means "look up the name 'id[18]' in the form elements" and works no matter what weird characters you have in the name(s).
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    4jd (10-15-2011)

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Quote Originally Posted by siberia-man View Post
    Square brackets are used to define an array in the server-side, for example in PHP, but not in JavaScript.
    Ummm...that's confusing, siberia. Clearly square bracket *ALSO* are used to define an array in JavaScript.

    It's just that you can't use square brackets in a name and then use the form.name coding style, because the square brackets are indeed seen *AS* an array, and not as part of the name.

    Fortunately, you *can* use form.elements["id[18]"] or the shorter form["id[18]"] to force JavaScript to treat the literal name, with its square brackets, *as* a name.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    4jd (10-15-2011)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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