Calling JavaScript function from PHP echo within a radio button - php

Question

I have a series of radio buttons, which onClick will either reveal or hide a Div:
Reveal the Div:
<input type="radio" name="con[4]" value="1" onclick="toggleLayer4(this.checked);" id="con4" />
Hide the Div:
<input type="radio" name="con[4]" value="0" onclick="toggleLayer4(!this.checked);" checked="checked" id="con4" />
JavaScript:
function toggleLayer4(val)
{
if(val == '1' || val === true)
{
document.getElementById('con4').checked = true;
document.getElementById('con4PSTN').style.display = 'block';
}
else if(val == '0' || val === false)
{
document.getElementById('con4').checked = false;
document.getElementById('con4PSTN').style.display = 'none';
}
}
Now the problem, when the pag is recalled, I can get the radio button checked like this:
<input type="radio" name="con[4]" value="1" onclick="toggleLayer4(this.checked);" <? if ($conn_count[3] == 1){echo "checked=\"checked\"";}?> id="con4" />
But I need a away of calling the JavaScript function to reveal the div if the radio button is checked, I have tried to echo toggleLayer4(this.checked); within the PHP if statement inside tags, however this just seems to reurn the text in the html??
There must be a way, not really versed in JS.
Cheers,
B.

Answer 1

Here is a plain unobtrusive javascript for you which will save you some work - please notice there are no event handlers on the radios anymore.
I gave them unique IDs which is mandatory.
If you ever need to use jQuery for other stuff, this script can be a little more elegant.
I assume
<input type="radio" name="con[1]" value="1" id="con1_1" />
<input type="radio" name="con[1]" value="0" id="con1_0" />
<input type="radio" name="con[2]" value="1" id="con2_1" />
<input type="radio" name="con[2]" value="0" id="con2_0" />
<input type="radio" name="con[3]" value="1" id="con3_1" />
<input type="radio" name="con[3]" value="0" id="con3_0" />
<input type="radio" name="con[4]" value="1" id="con4_1" />
<input type="radio" name="con[4]" value="0" id="con4_0" />
and matching object to have conxPSTN where x is the number in the con[x]
window.onload=function() {
var conLength = <?php echo count($con); ?>;
for (var i=1;i<=conLength;i++) {
var cons = document.getElementsByName("con["+i+"]");
for (var j=0;j<cons.length;j++) {
cons[j].onclick=function() {
var id = this.id.split("_")[0];
document.getElementById(id+"PSTN").style.display = (this.value==1)?"block":"none"
}
if (cons[j].checked) cons[j].click();
}
}
}

Answer 2

<input type="radio" name="con[4]" value="0" onclick="toggleLayer4(0);" checked="checked" id="con4" />
<input type="radio" name="con[4]" value="1" onclick="toggleLayer4(1);" checked="checked" id="con4" />
function toggleLayer4(val)
{
if(val){
document.getElementById('con4PSTN').style.display = 'block';}
else{
document.getElementById('con4PSTN').style.display = 'none';
}
}

Answer 3

If you are echoing from php then you should do like
echo "<script type='text/javascript'>toggleLayer4(this.checked);</script>";
But you cant use this in there. You need to get the value of the radio button manually n pass it
EDIT
This is the case when you want to call the function explicitly in some part of the code and when the php code is not with the <script> tags.