Help dynamically with changing class of button

[amandaPanda]

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:

<input type="submit" class="inputInactive" name="sandBtn" id="sandBtn" value="Sandwiches & Baguettes" onclick="updateButtons(this, 'sandBtn');"/>

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

[abduraooft]

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.

[alprazolam11]

online casino | buy alprazolam