...

View Full Version : function with css code for active button



newphpcoder
03-14-2012, 02:00 AM
Hi..

I don't know if my idea is possible and if how can I do that.

I have functions for button onclick.

I have 3 buttons and I want to change the color of my button if it is active

here is my code


<script type="text/javascript">
//=========display parameter settings==========//
function display_PS(){
document.loading_kanban.action="ParameterSettings.php";
document.loading_kanban.submit();
}
//=======display kanban=========//
function display_Kanban(){
document.loading_kanban.action="kanban_report.php";
document.loading_kanban.submit();
}
//=========display SR==========//
function display_SR){
document.loading_kanban.action="StockRequisition.php";
document.loading_kanban.submit();
}
</script>
<div id="main_button">
<input type="button" name="parameter_settings" value="Parameter Settings" onclick="display_PS()">
<input type="button" name="parameter_settings" value="Stock Requisition" onclick="display_SR()">
<input type="button" name="parameter_settings" value="Kanban Report" onclick="display_Kanban()">
</div>


Is it possible to add code in my function for css active button..If no what should I do to change the color of my button for the client to know what page she is.

Thank you

jmrker
03-14-2012, 02:29 AM
Consider this solution. Change colors a needed.


<script type="text/javascript">
function resetButtonColor() {
var info=document.getElementById('main_button').getElementsByTagName('input');
for (var i=0; i<info.length; i++) { info[i].style.backgroundColor = 'white'; }
}
//=========display parameter settings==========//
function display_PS(pick){
resetButtonColor();
pick.style.backgroundColor = 'lime';
document.loading_kanban.action="ParameterSettings.php";
document.loading_kanban.submit();
}
//=======display kanban=========//
function display_Kanban(pick){
resetButtonColor();
pick.style.backgroundColor = 'lime';
document.loading_kanban.action="kanban_report.php";
document.loading_kanban.submit();
}
//=========display SR==========//
function display_SR(pick){
resetButtonColor();
pick.style.backgroundColor = 'lime';
document.loading_kanban.action="StockRequisition.php";
document.loading_kanban.submit();
}
</script>
<div id="main_button">
<input type="button" name="parameter_settings" value="Parameter Settings" onclick="display_PS(this)">
<input type="button" name="parameter_settings" value="Stock Requisition" onclick="display_SR(this)">
<input type="button" name="parameter_settings" value="Kanban Report" onclick="display_Kanban(this)">
</div>

newphpcoder
03-14-2012, 02:48 AM
Consider this solution. Change colors a needed.


<script type="text/javascript">
function resetButtonColor() {
var info=document.getElementById('main_button').getElementsByTagName('input');
for (var i=0; i<info.length; i++) { info[i].style.backgroundColor = 'white'; }
}
//=========display parameter settings==========//
function display_PS(pick){
resetButtonColor();
pick.style.backgroundColor = 'lime';
document.loading_kanban.action="ParameterSettings.php";
document.loading_kanban.submit();
}
//=======display kanban=========//
function display_Kanban(pick){
resetButtonColor();
pick.style.backgroundColor = 'lime';
document.loading_kanban.action="kanban_report.php";
document.loading_kanban.submit();
}
//=========display SR==========//
function display_SR(pick){
resetButtonColor();
pick.style.backgroundColor = 'lime';
document.loading_kanban.action="StockRequisition.php";
document.loading_kanban.submit();
}
</script>
<div id="main_button">
<input type="button" name="parameter_settings" value="Parameter Settings" onclick="display_PS(this)">
<input type="button" name="parameter_settings" value="Stock Requisition" onclick="display_SR(this)">
<input type="button" name="parameter_settings" value="Kanban Report" onclick="display_Kanban(this)">
</div>


I tried your suggestion and the result is when I click the button the lime color diplay but it disappear.. I want to stay the color because it is active.

Thank you

jmrker
03-14-2012, 03:09 AM
It probably disappears because it goes to a php program
Or it needs a <form name="myForm" action="" method="post" onsubmit="return false">

Difficult to test with what you have provided.

newphpcoder
03-14-2012, 03:25 AM
It probably disappears because it goes to a php program
Or it needs a <form name="myForm" action="" method="post" onsubmit="return false">

Difficult to test with what you have provided.

is it ok that instead of using function I use <a href>?
is it much better?

Thank you

jmrker
03-14-2012, 03:34 AM
is it ok that instead of using function I use <a href>?
is it much better?

Thank you

I don't think it will have any difference in effect whether you use a link or a button. But give it a try, see what happens.

If it works, great!
If it does not, show some code to evaluate.
Good Luck!
:)

newphpcoder
03-14-2012, 03:53 AM
I don't think it will have any difference in effect whether you use a link or a button. But give it a try, see what happens.

If it works, great!
If it does not, show some code to evaluate.
Good Luck!
:)

if i used <a href> I need to have a css code for active button right?

Thank you

newphpcoder
03-14-2012, 03:56 AM
When I used this:



<form name="loading_kanban" <form name="loading_kanban" action="" method="post" onsubmit="return false">


Nothing was change..
Thank you

jmrker
03-14-2012, 04:21 AM
When I used this:



<form name="loading_kanban" <form name="loading_kanban" action="" method="post" onsubmit="return false">


Nothing was change..
Thank you

Probably should be closer to this...


<form name="loading_kanban" action="" method="post" onsubmit="return false">

But I'm not well versed in php

Also, don't forget the closing </form>

Probably could/should be able to use only one <form> tag for all.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum