Accessing javascript class change on the server side (C#)

[Pandyon]

So I have looked for days for a solution online to this, and I've tried different ways of doing this, but can't seem to find a complete solution. So please HELP!

I have a form that a user is filling out online. At one point in the form, they select keywords they want to associate with their input. I have created a table layout of buttons with each keyword in a button.
<asp:Button ID="button1" Text="Kid Friendly" CssClass="button_off" runat="server" onclientclick="change_select(this);" OnClick="return false;" ></asp:Button><br />
<asp:Button ID="button2" Text="Romantic" CssClass="button_off" runat="server" onclientclick="change_select(this);" OnClick="return false;" ></asp:Button><br />
..and so on.
The buttons have a background of blue. If a user clicks on a button, it runs javascript to change the class of the button, which changes the background to green.
function change_select(objs)
{
var mydoc = objs.className;
if (mydoc == "button_off") {
objs.className = "button_on";
document.getElementById("button1").setAttribute("SkinID", "3");



}
else {
objs.className = "button_off";
}


}

Then at the bottom, I have a button to submit the info:
<asp:Button ID="button4" Text="Verify" runat="server" onclick="verify" >

When I test the page, clicking on the buttons changes the class and the backgrounds change back and forth, but when I try to grab the class of each element on the server side, it always comes back as "button_off".
protected void verify(object sender, EventArgs e)
{

var myValue = button1.CssClass.ToString();
string myInfo = "<h3>Your buttons</h3><p>Here is the class: " + myValue;

myResults.InnerHtml = myInfo.ToString()



}

How can the C# on the server side get that the user has changed the class? I did try changing these to HTML elements <button ID="button1" >Kid Friendly</button>, but I couldn't figure out how to reference the HTML element on the Server side. I found posts on areas with code to do that (referencing HTMLElement), but that code never worked on my development machine.

Yes, I could just make the keywords labels and add checkboxes next to each one, but that is so boring; I was trying to create a more interesting interface here. Please help!

 

[jmeckley]

a couple things.

first

onclientclick="change_select(this);" OnClick="return false;"

would change the color of the button and then submit back to the server. onclientclick is the javascripts. onclick is the server code. onclick should point to an event handler in the code.
the correct code would be

onclientclick="change_select(this); return false;"

and being that there really isn't any server side functionality with this you could change it to pure html

<input type="button" click="change_select(this); return false;" value="text..."/>

as for the server functionality. the class name is purely a client side visual element. the code behind shouldn't be concerned with who, how or what submitted the request, only that a request was submitted. that request will contain the information available to the server.

In terms of making the buttons look pretty for visual appeal. there are many ways to bend the DOM to behave one way and be presented another. take a look at jqueryui's button. you can make a series of checkboxes look like toggle buttons.

Jason Meckley
Programmer

faq855-7190
faq732-7259

 

[Pandyon]

are you saying that I should be able to get the class information in the input button (if it is not asp:button) using Request.Form ? I tried that but didn't work.

I'll look at that jqueryUI button.

Thanks,

 

[jmeckley]

no, i'm saying information like style and classes are not available on the server (in the request) at all. all that's passed in the request is a series of key value pairs. when a form is submitted the name of the control is the key and the value is the value, selected option, or on switch, depending on the type of input.

Jason Meckley
Programmer

faq855-7190
faq732-7259