adding/removing a class upon form submission

[Violet_82]

Hello guys, I wonder if you could kindly explain this to me.
Basically, I've got a form and a thank you message above it, here they are:

<asp:Content ID="Content5" ContentPlaceHolderID="contentPlaceholder" Runat="Server">
    <div class="thankYouMsg" id="thankYouMsg" runat="server">
        <h2>Thank you for your feedback.</h2>
    </div>
    <div class="contactForm" id="contactForm" runat="server">
        <h2>Contact me</h2>
        <div class="form" runat="server">
            <div class="control-group">        
                <label class="control-label" for="title">Title</label>
                <div class="controls">
                    <select id="title" runat="server">
                        <option>Select</option>
                        <option>Mr</option>
                        <option>Ms</option>
                        <option>Miss</option>
                        <option>Mrs</option>
                    </select>
                </div>
            </div>
            <div class="control-group">        
                <label class="control-label" for="name">Name</label>
                <div class="controls">
                    <input runat="server" type="text" id="name" />
                </div>
            </div>
             <div class="control-group">        
                <label class="control-label" for="email">Email</label>
                <div class="controls">
                    <%--<input id="email" runat="server" type="text" />--%>
                    <asp:TextBox ID="email" runat="server"></asp:TextBox>
                </div>
            </div>
             <div class="control-group">        
                <label class="control-label" for="enquiry">Enquiry<span>*</span></label>
                <div class="controls">
                    <textarea id="enquiry" runat="server" type="text"></textarea>
                    <%--<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>--%>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                        ErrorMessage="Please enter your message" ControlToValidate="enquiry"></asp:RequiredFieldValidator>
                </div>
            </div>
            <div class="submitButton">
                <input id="submitForm" type="submit" value="Submit" runat="server" onserverclick="submitData">
                <div class="clear"></div>
            </div>

        </div>
    </div>
</asp:Content>

The form is display:block; and the thank you message display:none; when you first land onto the page. What I wanted to do was to, upon form submission, display the thank you message and hide the form. well, it wasn't that obvious/easy I have to say and after quite a bit of research and tries,here is the method I used to achieve that, but I'm not convinced it's the best one:

protected void submitData(object sender, EventArgs e) {           
    ...
    //hide form and show thank you message
    contactForm.Attributes.Add("class", contactForm.Attributes["class"] + " hidden");
    thankYouMsg.Attributes.Add("class", thankYouMsg.Attributes["class"] + " active");
}

Right, why did I do that (and please note the space between the " and the hidden/active string otherwise I will end up with something like contactFormhidden and thankYouMsgactive). Well, because if I do it in any other way, my existing classes gets wiped out and my css rules - here for reference - won't work anymore:

.content .contactForm.hidden{
    display:none;   
} 
.content .thankYouMsg{
    display:none;   
}
.content .thankYouMsg.active{
    display:block;  
}

I give you that I'm a real beginner still, so maybe I'm missing something (and I don't want to use a darn Panel asp container by the way!)
Is there a better way rather than having to do this + " hidden"??!!
thanks

[hericles]

You could use AJAX and when the response comes back use jQuery to alter the CSS on the form and the message.
Unless you have some extra code somewhere, your method will display the thank you message regardless of how the submit process goes e.g. the code fails behind the scenes for whatever reason, the data isn't saved and the thank you message appears. User leaves happy thinking everything worked.

[JorgeM]

I would recommend the use of panels if you want to handle this server side instead of client side. If you simply use a style like display:block/none, all of the content will actually be sent to the browser and the browser itself is showing or hiding.

When you use panels and apply Visible=true/false, you control what is sent back to the browser.

Why do you not want to use a panel, if i may ask?

[Violet_82]

@hericles yes that crossed my mind when I was building the form, but I thought i'd use c# to practice; so, if the form gets submitted (if you don't feel in the enquiry field it won't submit) the message is displayed.

@JorgeM that's fine, if you tell me that the panel is a better approach I will use that, but I first need to have a look at how to use it as I've never used it. SO basically the form needs to be in a panel and the thank you message in another correct? Then both of them will have their own ID and when in the code behind the submitData method is called I set one active and one hidden?

[Violet_82]

All right, I did just that, wrapped the form and the thank you message in two separate panels and then

 ContactFormPanel.Visible = false;
  ThankYouPanel.Visible = true;

In the situation I had before when I was adding the class in that funky way:

//hide form and show thank you message with no panel
            //contactForm.Attributes.Add("class", contactForm.Attributes["class"] + " hidden");
            //thankYouMsg.Attributes.Add("class", thankYouMsg.Attributes["class"] + " active");

Is it really wrong?

[JorgeM]

Once you have the panels you don't use CSS to show and hide any longer.

[Violet_82]

Sure yes, I was more after what's good practice and what's not really. As you know I'm new, so the first approach didn't seem to be too wrong till you said that the panel was a better option. Still in the first attempt I was doing it server side

[JorgeM]

Yes but I meant that the hiding and showing with panels is handled server side while applying a class/style you did server side but the browser receives all if the data and then the browser will show/hide the content.

There are various reasons why you would not want to send the data to the client and allow the showing/hiding of information being done client side.

[Violet_82]

cool, thanks for that!