Radio Button event

[BuildMyWeb]

i am trying to make a block element show/hide based upon one of two radio buttons in a group being checked.  think of the two radio buttons as a toggle switch.

 

here is my HTML radio group:

<tr>
<td class="form_label">Account Type:</td>            
<td>
                                                                                General Contractor: <input type="radio" name="acct_type" value="gc" id="input_gc" <?php if( $_SESSION['reg_acct_type'] == "gc" ){ echo"checked='checked'"; } ?> />
                                                                                Subcontractor: <input type="radio" name="acct_type" value="sc" id="input_sc" <?php if( $_SESSION['reg_acct_type'] == "sc" ){ echo"checked='checked'"; } ?> />
                                                                            </td>
                    </tr>

and here is the javascript:

function show_hide( curr_page )
{
    // REGISTER page
    if( curr_page == "register" )
    {
        alert("register");
        var input_gc     = document.getElementById("input_gc");
        var input_sc     = document.getElementById("input_sc");
        
        input_gc.onclick    = hide_select;
        input_sc.onclick    = show_select;       
        
        function hide_select()
        {
            alert("h");
            var sc_dropdown = document.getElementById("sc_dropdown");
            sc_dropdown.style.display     = 'none';
        }
        
        function show_select()
        {
            alert("s");
            var sc_dropdown = document.getElementById("sc_dropdown");
            sc_dropdown.style.display     = 'block';
        }
    } // close if( curr_page == "register" )
} // close function show_hide( curr_page )

i can get 'alert("register");' to trigger so i know the if statement is true

 

'alert("h");' and 'alert("s");' does not trigger when i click either radio button.

 

 

[BuildMyWeb]

noticed something... it works fine in IE9 and Chrome.  doesnt work in FF

[jazzman1]

Check, if the checked attribute is true.

 

So, the easiest way to achieve this (no tested)

 

js code:

<script>

function show_hide( curr_page )
{
    // REGISTER page
    if( curr_page == "register" )
    {
        
        var input_gc = document.getElementById("input_gc");
        var input_sc = document.getElementById("input_sc");
        
        if(input_gc.checked) hide_select();
        
        if(input_sc.checked) show_select();
        
    } // close if( curr_page == "register" )
    
    function hide_select()
        {
            alert("h");
            // procceed your logic
        }
        
        function show_select()
        {
            alert("s");
            // proceed your logic
            
        }
} // close function show_hide( curr_page )

</script>

Radio buttons:

<tr>
    <td class="form_label">Account Type:</td>            
    <td>
        General Contractor: <input type="radio" name="acct_type" value="gc" id="input_gc" />
        
        Subcontractor: <input type="radio" name="acct_type" value="sc" id="input_sc" />
    </td>
<tr><td><button onclick="show_hide('register')">Click me</button> </td></tr>
</tr>

Edited August 10, 2013 by jazzman1

[BuildMyWeb]

thx for the help jazz.  when i try ".checked", it stops working in all browsers :/

[jazzman1]

Did you try my sample above?

I ran the code on my dev setup and looks fine.

You have a php code, so you may get an error message(s) somewhere. 

Check this out:

Debugging: A Beginner's guide

[BuildMyWeb]

yes i tried using your suggestion as such;

function show_hide( curr_page )
{
    // REGISTER page
    if( curr_page == "register" )
    {
        var input_gc     = document.getElementById("input_gc");
        var input_sc     = document.getElementById("input_sc");
        var sc_dropdown = document.getElementById("sc_dropdown");
        
        // hide drop-down when page is refrshed or first loads
        sc_dropdown.style.display     = 'none';

        //input_gc.onclick    = hide_select;
        //input_sc.onclick    = show_select;
        if(input_gc.checked){ hide_select(); }
        if(input_sc.checked){ show_select(); }

        function hide_select( sc_dropdown )
        {
            var sc_dropdown = document.getElementById("sc_dropdown");
            sc_dropdown.style.display     = 'none';
        }
        
        function show_select( sc_dropdown )
        {
            var sc_dropdown = document.getElementById("sc_dropdown");
            sc_dropdown.style.display     = 'block';
        }
    } // close if( curr_page == "register" )
} // close function show_hide( curr_page )

as i said, my attempt is working in IE and Chrome but not FF.  when i tried the above that you suggested (which i had also tried yesterday at one point on my own) it stops working in all browsers. 

 

i have php writing errors to a log file and there are none in there.  well, there was one unrelated header error i fixed but now nothing.  logically, it seems to me like it should work.  i dont understand why FF is failing.  js drives me bonkers.

[jazzman1]

No, it's not exactly the same.

 

Take a look at my js code, where are the hide_select() and the hide_select() functions!

[BuildMyWeb]

ahhh, missed that.  i didnt think that would be an issue.  that why i suck with js.  so moving those two functions outside of my conditional makes it work with my version.  but i cannot get yours to work and validating a "checked" status seems like the better way to go.  so my questions are:

 

1. any idea why if i use your "if(input_sc.checked){ show_select(); }" conditional its still not working for me?

2. why do i need to move hide_select() and show_select() outside the conditional?

 

thanks for all of your help jazz.

 

this is working:

function show_hide( curr_page )
{
    // REGISTER page
    if( curr_page == "register" )
    {
        var input_gc     = document.getElementById("input_gc");
        var input_sc     = document.getElementById("input_sc");
        
        // hide drop-down when page is refrshed or first loads
        sc_dropdown.style.display     = 'none';

        input_gc.onclick    = hide_select;
        input_sc.onclick    = show_select;
        //if(input_gc.checked){ hide_select(); }
        //if(input_sc.checked){ show_select(); }

    } // close if( curr_page == "register" )
    
    function hide_select()
    {
        var sc_dropdown = document.getElementById("sc_dropdown");
        sc_dropdown.style.display     = 'none';
    }
    
    function show_select()
    {
        var sc_dropdown = document.getElementById("sc_dropdown");
        sc_dropdown.style.display     = 'block';
    }
} // close function show_hide( curr_page )

[jazzman1]

Hey BuildMyWeb,

 

 

1. any idea why if i use your "if(input_sc.checked){ show_select(); }" conditional its still not working for me?

 

Are you sure that you're exactly running the same script? I don't think so

 

 

2. why do i need to move hide_select() and show_select() outside the conditional?

 

 

So, what happens here?

 

First of all, you should be aware how the programming languages work.  

 

Well, when JavaScript encounters the function name that you already called in the script, it completes the instructions only if that function has been found somewhere inside the <script></script> tags. When the instructions have all been performed, JavaScript comes back and process the remainder of the script. But, actually you're creating that function inside the if statement after you're calling it. So, the parser of the language stops executing the script and says - " Hey, I cannot find the name of this function" and returns a false result. That's all. This was a logical error!

I highly recommend, you to wach this video created by Doug Crockford. Somewhere in the middle, he speaks about the proper way using of functions.

Edited August 10, 2013 by jazzman1

[BuildMyWeb]

i have the javascript in an external file that is referenced from the bottom of the head section.  then i was placing the following in the body section to call the function for this page:

<script type="text/javascript">
        show_hide("register");
    </script>

i removed both and simply pasted your javascript into the actual page, in the head section, and it still isnt working for me. 

[jazzman1]

"It still isnt working for me" does not help us! Did you get any errors?

 As developer, you need js debugging tools to help quickly discover the cause of an issue and fix it efficiently.