...

View Full Version : Help dynamically with changing class of button



amandaPanda
09-01-2010, 09:31 PM
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
09-02-2010, 07:39 AM
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
09-02-2010, 01:06 PM
online casino (http://www.casino-start.com/) | buy alprazolam (http://www.occidentalpress.com/)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum