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.!
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 theid='firstyear'toname='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.!
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.