php and innerhtml

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
User avatar
sulen
Forum Commoner
Posts: 79
Joined: Wed Jul 09, 2003 4:55 pm
Location: los angeles
Contact:

php and innerhtml

Post by sulen »

I am having trouble using a php variable in some javascript code, maybe I am not doing it right any help will be appreciated

Code: Select all

<input type="radio" name="nm" value="1" onClick="document.getElementById('textbox').innerHTML='<? echo $mrtg; ?>'"/> 1
</td>
</tr>
</table>
<span id="textbox" align="left"></span>
in this case the variable mrtg has like complete html form which needs to be displayed when the radio button is clicked. The error i get is syntax error and it doesnt work. Thanks
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

why not place that code in the span to begin with and simply toggle the span's visibility when the radio button is selected?
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

instead of echoing out HTML using PHP you can put it there and display it selectively...

Code: Select all

<input type="radio" name="nm" value="1" onClick="document.getElementById('textbox').style.display='block';" /> 1
</td>
</tr>
</table>
<span id="textbox">
<form id="frm">
<!-- whatever -->
</form>
</span>
edit: I see feyd has been too fast for me :)
User avatar
sulen
Forum Commoner
Posts: 79
Joined: Wed Jul 09, 2003 4:55 pm
Location: los angeles
Contact:

Post by sulen »

First when I load the page I want nothing to be displayed and when the click the radio buttons 1, 2 or 3 the content will change accordingly. So this is what I have

Code: Select all

<input type="radio" name="nm" value="1" onClick="document.getElementById('mrtg1').style.display='block'" /> 1
<input type="radio" name="nm" value="2" onClick="document.getElementById('mrtg2').style.display='block'"  /> 2
<input type="radio" name="nm" value="3" onClick="document.getElementById('mrtg3').style.display='block'" /> 3
<input type="radio" name="nm" value="4" onClick="document.getElementById('mrtg4').style.display='block'" checked="checked" /> None

<span id="mrtg1">
display if 1 is clicked
</span> 
<span id="mrtg2">
display if 2 is clicked
</span> 
<span id="mrtg3">
display if 3 is clicked
</span> 
<span id="mrtg4">
empty span tags so that nothing displays
</span>


So when the page loads no content should be visible and as the choose 1, 2 or 3 respective content should become visible and if they click "none" then the content should disappear. Any help will be appreciated
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

Code: Select all

<style type="text/css">
.mrtg1, .mrtg2, .mrtg3 {
 display:none;
}
</style>
<script type="text/javascript">
var currDisp;

function showInfo(num)
{
 if(currDisp)
  document.getElementById('mrtg'+currDisp).style.display = 'none';
 if(num >= 1 && num <= 3)
 {
  document.getElementById('mrtg'+num).style.display = 'block';
  currDisp = num;
 }
 else
  currDisp = '';
}
</script>
<input type="radio" name="nm" value="1" onClick="showInfo(1)" /> 1
<input type="radio" name="nm" value="2" onClick="showInfo(2)" /> 2
<input type="radio" name="nm" value="3" onClick="showInfo(3)" /> 3
<input type="radio" name="nm" value="4" onClick="showInfo(4)" /> None

<span id="mrtg1">
display if 1 is clicked
</span>
<span id="mrtg2">
display if 2 is clicked
</span>
<span id="mrtg3">
display if 3 is clicked
</span>
User avatar
sulen
Forum Commoner
Posts: 79
Joined: Wed Jul 09, 2003 4:55 pm
Location: los angeles
Contact:

Post by sulen »

I tried another approach using dropdown instead of radio buttons but I am running into an an issue I need to embed a php variable in a javascript array but I am not sure of the syntax for that.

Code: Select all

<form name="myform">
<select name="nm" size="1" onChange="displaydesc(document.myform.nm, thetext1, 'textcontainer1')">
<option value="0" selected>None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<span id="textcontainer1" align="left"></span>
</form>

<script type="text/javascript">

var thetext1=new Array()
thetext1[0]=""
thetext1[1]="php variable1"
thetext1[2]="php variable2"
thetext1[3]="php variable3"

function displaydesc(which, descriptionarray, container){
if (document.getElementById)
document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
}

</script>
The php variable contains the entire html form code assigned to it. If I am able to assign the php variable to the array it will be perfect because I tested it out otherwise and it is exactly how I want it. Any help will be appreciated. Thanks
Post Reply