hi.!!I have been developing an online enrolment system for a client in php...ive encountered a problem during the middle situation.The client added a situation that when the student click on the first year link, the subject of that year will just pop-up under the link.example:

first year
- Filipino
- Math
- Science

When the user click first year, the filipino,math, and science will appear, and will dissapear when they click another link.

Please help i dont know how to do this.!

Recommended Answers

All 6 Replies

As PHP is a server side language, PHP can't be used to modify the page once it has been sent to the browser. You need a client side language (that is executed by the viewers browser) such as Javascript to do what you are explaining. I haven't done much with javasript so I can't help you any further.

<html>
<head>
<style>
.year { width:25%; margin:3%; padding:3%; float:left; }
</style>
<script language="javascript" type="text/javascript">
<!--
(document.getElementById) ? dom = true : dom = false;
function hideIt(layer) {
 if (dom) {document.getElementById(layer).style.visibility='hidden';} //ie
 if (document.layers) {document.layers[layer].visibility='hide';} } //mozilla
function showIt(layer) {
 if (dom) {document.getElementById(layer).style.visibility='visible';} //ie
 if (document.layers) {document.layers[layer].visibility='show';} } //mozilla
onResize="window.location.href = window.location.href"
//--></script>
</head>
<body>
<noscript> This form requires Javascript to process</noscript>
<div class='year'>
<a href='#' onfocus="showIt('firstyear');" onclick="showIt('firstyear');"  onblur="hideIt('firstyear');" taborder=1>First Year</a> <!-- onfocus onclick allows for keyboard tab as well as mouseclick-->
<div id='firstyear' style='visibility:hidden'> <!-- initially invisible -->
<input type='checkbox' value='filipino'>filipino<br>
<input type='checkbox' value='math'>math<br>
<input type='checkbox' value='sci'>science<br>
</div></div>
<div class='year'>
<a href='#' onfocus="showIt('secondyear');" onclick="showIt('secondyear');"  onblur="hideIt('secondyear');" taborder=2>second Year</a> 
<div id='secondyear' style='visibility:hidden'> 
<input type='checkbox' value='filipino'>2filipino<br>
<input type='checkbox' value='math'>2math<br>
<input type='checkbox' value='sci'>2science<br>
</div></div>
<div class='year'>
<a href='#' onfocus="showIt('thirdyear');" onclick="showIt('thirdyear');"  onblur="hideIt('thirdyear');" taborder=3>third Year</a> 
<div id='thirdyear' style='visibility:hidden'>
<input type='checkbox' value='filipino'>3filipino<br>
<input type='checkbox' value='math'>3math<br>
<input type='checkbox' value='sci'>3science<br>
</div></div>
</body</html>

the javacript will hide or show any number of div span p textarea
Its been a long time since I coded anything new in javascript, if the script does not run, change the id='firstyear' to name='firstyear' edit** for tabulated data as
first year .. second year .. third year

i messed up
as above attempting to select a checkbox will hide them again, should be:: <a href='#' onfocus="showIt('firstyear');hideIt('secondyear');hideIt('thirdyear');" onclick="showIt('firstyear');hideIt('secondyear');hideIt('thirdyear');" tabindex=1>First Year</a>

thank you very much its working now..hope to see you again.!1

God bless.!

As PHP is a server side language, PHP can't be used to modify the page once it has been sent to the browser. You need a client side language (that is executed by the viewers browser) such as Javascript to do what you are explaining. I haven't done much with javasript so I can't help you any further.

Thank you for your advise>!!i will try to search and code this maybe tommorow in javascript.!

<html>
<head>
<style>
.year { width:25%; margin:3%; padding:3%; float:left; }
</style>
<script language="javascript" type="text/javascript">
<!--
(document.getElementById) ? dom = true : dom = false;
function hideIt(layer) {
 if (dom) {document.getElementById(layer).style.visibility='hidden';} //ie
 if (document.layers) {document.layers[layer].visibility='hide';} } //mozilla
function showIt(layer) {
 if (dom) {document.getElementById(layer).style.visibility='visible';} //ie
 if (document.layers) {document.layers[layer].visibility='show';} } //mozilla
onResize="window.location.href = window.location.href"
//--></script>
</head>
<body>
<noscript> This form requires Javascript to process</noscript>
<div class='year'>
<a href='#' onfocus="showIt('firstyear');" onclick="showIt('firstyear');"  onblur="hideIt('firstyear');" taborder=1>First Year</a> <!-- onfocus onclick allows for keyboard tab as well as mouseclick-->
<div id='firstyear' style='visibility:hidden'> <!-- initially invisible -->
<input type='checkbox' value='filipino'>filipino<br>
<input type='checkbox' value='math'>math<br>
<input type='checkbox' value='sci'>science<br>
</div></div>
<div class='year'>
<a href='#' onfocus="showIt('secondyear');" onclick="showIt('secondyear');"  onblur="hideIt('secondyear');" taborder=2>second Year</a> 
<div id='secondyear' style='visibility:hidden'> 
<input type='checkbox' value='filipino'>2filipino<br>
<input type='checkbox' value='math'>2math<br>
<input type='checkbox' value='sci'>2science<br>
</div></div>
<div class='year'>
<a href='#' onfocus="showIt('thirdyear');" onclick="showIt('thirdyear');"  onblur="hideIt('thirdyear');" taborder=3>third Year</a> 
<div id='thirdyear' style='visibility:hidden'>
<input type='checkbox' value='filipino'>3filipino<br>
<input type='checkbox' value='math'>3math<br>
<input type='checkbox' value='sci'>3science<br>
</div></div>
</body</html>

the javacript will hide or show any number of div span p textarea
Its been a long time since I coded anything new in javascript, if the script does not run, change the id='firstyear' to name='firstyear' edit** for tabulated data as
first year .. second year .. third year

Thank you so much.its working now..hope to see you again.!

God bless.!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.