Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    712
    Thanks
    165
    Thanked 0 Times in 0 Posts

    function with css code for active button

    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
    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

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts
    Consider this solution. Change colors a needed.
    Code:
    <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>

  • Users who have thanked jmrker for this post:

    newphpcoder (03-14-2012)

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    712
    Thanks
    165
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    Consider this solution. Change colors a needed.
    Code:
    <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

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts
    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.

  • Users who have thanked jmrker for this post:

    newphpcoder (03-14-2012)

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    712
    Thanks
    165
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    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

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Exclamation

    Quote Originally Posted by newphpcoder View Post
    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!

  • Users who have thanked jmrker for this post:

    newphpcoder (03-14-2012)

  • #7
    Regular Coder
    Join Date
    Aug 2010
    Posts
    712
    Thanks
    165
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    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

  • #8
    Regular Coder
    Join Date
    Aug 2010
    Posts
    712
    Thanks
    165
    Thanked 0 Times in 0 Posts
    When I used this:

    Code:
    <form name="loading_kanban" <form name="loading_kanban" action="" method="post" onsubmit="return false">
    Nothing was change..
    Thank you

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb

    Quote Originally Posted by newphpcoder View Post
    When I used this:

    Code:
    <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...
    Code:
    <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.

  • Users who have thanked jmrker for this post:

    newphpcoder (03-14-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •