Conditionally setting a javascript function after posting of a form

Question

Apologies for the very basic question - crash course in javascript coming up! But before that, I have a javascript function:

 function toggle(request)

The function simply toggles a div as visible/invisible. I can trigger the behaviour I want from this function using an onclick event as follows:

<input type="radio" name="complete" value="true" id="complete_yes" 
onclick="toggle('true');"/>

This works fine, but after posting a form, under certain conditions I want the radio button to be automatically selected and the javascript function to be automatically set to:

toggle('true')

... thus revealing the div contents. I've got the "checked" part working, but how do I get the javascript function to conditionally be set to true aswell?

<input type="radio" name="complete" value="true" {if $data.complete == true}checked{/if} id="complete_yes" 
onclick="toggle('true');"/>

Answer 1

What about testing, in your JS toggle function, if the div has to be made visible or not depending on the "checked" status of your input ?

Something a bit like this, I guess :

function toggle()
{
    if (document.getElementById('YOUR_INPUT_ID').checked) {
        document.getElementById('YOUR_DIV_ID').style.display = 'block';
    } else {
        document.getElementById('YOUR_DIV_ID').style.display = 'none';
    }
}

Absolutly not tested, but I think you'll get the idea :-)
(I never know if the input in considered as "checked" before or after the JS function on onclick is called... So you might actually have to invert the 'block' and 'none' settings)

And, if you have several inputs/divs, you can pass their ids as parameters to the toggle function...

That way, you'd never have to worry about any kind of "initialization" for that function.

Note that you could also test if the div is visible, with something like this :

function toggle()
{
    if (document.getElementById('YOUR_DIV_ID').style.display == 'none') {
        document.getElementById('YOUR_DIV_ID').style.display = 'block';
    } else {
        document.getElementById('YOUR_DIV_ID').style.display = 'none';
    }
}

(not tested either)

That way, your function would really toggle the div's displaying, each time it is called.

Answer 2

Why not do something like:

{if $data.complete == true}
<script type="text/javascript">toggle('true');</script>
{/if}

Answer 3

Decided to learn jQuery instead! The syntax below achieves the desired result and is very maintainable!

$(document).ready(function () {
 $('#complete_yes').toggle(function () {
 $('#repair_complete').removeClass('hidden');
 }, function() {
 $('#repair_complete').addClass('hidden');
});
});