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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Help dynamically with changing class of button

    I have written some JS code to change the class of a button (see below). The problem is when the button is pressed the style changes for a millisecond then goes back to the original class declared in the html, I think this may be because the form containing the buttons is submitted using post - to allow php to display the correct menu so therefore the page is redisplayed with original class? If this is the case what can I do about it? Can I use sessions to store the page state (i.e., which button was pressed so state="starters") then access session data from within JavaScript code?

    Basically I'm using 4 buttons which allow the user to select which menu they wish to view, the menus are all displayed within the same page using php to display the correct menu, I want the style of the button to change to indicate to the user which menu they are currently viewing - so if they are viewing starters the starters button looks different from the other 3 buttons. I've written a function to change the class of the button which is called using the onclick event. So the code for the buttons looks like this:

    Code:
    <input type="submit" class="inputInactive" name="sandBtn" id="sandBtn" value="Sandwiches & Baguettes" onclick="updateButtons(this, 'sandBtn');"/>
    The function code:
    Code:
    function updateButtons(eleObj, btnID){
    	eleObj.className = "inputActive"; //change style of sleceted button
    	
            switch(btnID){ //set all other buttons back to inputInActive class
    	case "mainsBtn": {document.getElementById("dessBtn").className = "inputInactive";
    				document.getElementById("sandBtn").className = "inputInactive";
    				document.getElementById("startBtn").className = "inputInactive";break;}					
    	case "dessBtn": {document.getElementById("mainsBtn").className = "inputInactive";
    				document.getElementById("sandBtn").className = "inputInactive";
    				document.getElementById("startBtn").className = "inputInactive"; break;
    		}
    	case "startBtn": {document.getElementById("mainsBtn").className = "inputInactive";
    				document.getElementById("sandBtn").className = "inputInactive";
    				document.getElementById("dessBtn").className = "inputInactive"; break;
    		}
    	case "sandBtn": {document.getElementById("mainsBtn").className = "inputInactive";
    				document.getElementById("startBtn").className = "inputInactive";
    				document.getElementById("dessBtn").className = "inputInactive"; break;
    		}
    	}
    }
    Any ideas would be much appreciated
    Thanks

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I think this may be because the form containing the buttons is submitted using post - to allow php to display the correct menu so therefore the page is redisplayed with original class?
    Your assumption is right. All the effects applied by javascript will be lost upon page reload.

    Basically I'm using 4 buttons which allow the user to select which menu they wish to view, the menus are all displayed within the same page using php to display the correct menu, I want the style of the button to change to indicate to the user which menu they are currently viewing - so if they are viewing starters the starters button looks different from the other 3 buttons. I've written a function to change the class of the button which is called using the onclick event. So the code for the buttons looks like this:
    Why do you need to use input buttons there? Can't you use anchors and style them to get the effects you want?

    Anyway, http://www.codingforums.com/showthread.php?t=122490 (especially rmedek's post) may give you some idea about the trick.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts


  •  

    Tags for this Thread

    Posting Permissions

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