Search code examples
c#htmlasp.netformsrunatserver

multiple runat server forms in asp.net


Help!

I have a login and and a signup html form, each toggle on clicking respective links on the form itself and there is no postback or page refresh event.

the problem is asp.net does not allow me to have two runat=server forms. i can access input fields of the forms.

i have added asp:Button in place of input type="submit" in the forms in order to acces onclick methods, but then again asp.net does not allow me to add asp button (server side control) when i remove runat="server" from any of the forms which is having this asp button!

The question:

How can i access submit button of the forms so that i can perform necessary code behind operations for signup and login

Is there a way to achieve my goal? (may be some way to hide one of the forms in starting and show it when i click toggle link )

Here's the login register form's

Code:

<div>
<header>

        </header>
        <section>               
            <div id="container_demo" >

                <a class="hiddenanchor" id="toregister"></a>
                <a class="hiddenanchor" id="tologin"></a>
                <div id="wrapper">
                    <div id="login" class="animate form">
                        <form id="form1"  action="#" runat="server" > 
                            <h1>Log in</h1> 
                            <p> 
                                <label for="username" class="uname" data-icon="u" > Your email </label>
                                <input id="username" name="username" runat="server" required="required" type="text" placeholder="myusername or [email protected]"/>
                            </p>
                            <p> 
                                <label for="password" class="youpasswd" data-icon="p"> Your password </label>
                                <input id="password" name="password" runat="server" required="required" type="password" placeholder="eg. X8df!90EO" /> 
                            </p>
                            <p class="keeplogin"> 
                                <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> 
                                <label for="loginkeeping">Keep me logged in</label>
                            </p>
                            <p class="login button">
                                <asp:Button Text="Submit" runat="server" OnClick="Submit" /> 
                                <!--<input type="submit" value="Login" />--> 
                            </p>
                            <p class="change_link">
                                Not a member yet ?

                                <a href="#toregister" class="to_register">Join us</a>             //toggle link
                            </p>
                        </form>
                    </div>

                    <div id="register" class="animate form">
                        <form id="form2" action="#" runat="server" > 
                            <h1> Sign up </h1> 
                            <p style="margin-top:4px;margin-bottom:2px;"> 
                                <label for="usernamesignup" class="uname" data-icon="u">Your username</label>
                                <input id="usernamesignup" name="usernamesignup" runat="server" required="required" type="text" placeholder="mysuperusername690" />
                            </p>
                            <p style="margin-top:4px;margin-bottom:2px;"> 
                                <label for="emailsignup" class="youmail" data-icon="e" > Your email</label>
                                <input id="emailsignup" name="emailsignup" runat="server"  required="required" type="email" placeholder="[email protected]"/> 
                            </p>
                            <p style="margin-top:4px;margin-bottom:2px;"> 
                                <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>
                                <input id="passwordsignup" name="passwordsignup" runat="server" required="required" type="password" placeholder="eg. X8df!90EO"/>
                            </p>
                             <p style="margin-top:4px;margin-bottom:2px;"> 
                                <label for="mob1" class="uname" data-icon="u">Your mob no.</label>
                                <input id="mob" name="mob" runat="server" required="required" type="text" placeholder="9450.." />
                            </p>

                            <p class="signin button"> 
                                 <asp:Button Text="Submit" runat="server" OnClick="Submitr" />
                                <!--<input type="submit" value="Sign up"/> -->
                            </p>
                            <p class="change_link">  
                                Already a member ?
                                <a href="#tologin" class="to_register"> Go and log in </a>          //toggle link
                            </p>
                </form>
                    </div>

                </div>
            </div>  
        </section>





</div>

Solution

  • Ok finally i got it after applying my brains!

    this is what i did:

    applied asp buttons on both server side forms

    on signup form:

    <asp:Button Text="tologin" runat="server" OnClick="changetologin" ForeColor="#1DA2C1" BackColor="#F7F8F1" /> 
    

    on login form:

    <asp:Button Text="Join us"  runat="server" OnClick="changetosignup" ForeColor="#1DA2C1" BackColor="#F7F8F1" />
    

    on page load:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (Session["form2"] == null && Session["form1"] == null) //show login hide signup
        {
            form1.Visible = true;
            form2.Visible = false; 
    
        }
    
    
        if (Session["form2"] != null && Session["form1"]==null ) //show signup hide login
        {
            form1.Visible = false;
            form2.Visible = true;
            Session["form2"] = null;
        }
        if (Session["form1"] != null && Session["form2"] == null)     //show login hide signup
        {
            form1.Visible = true;
            form2.Visible = false;
            Session["form1"] = null;
        }
    
    }
    

    on signup form on click of toggle button:

    protected void changetologin(object sender, EventArgs e)
    {
    
        Session["form1"] = "clicked";
    
        Response.Redirect("#tologin");
    
    }
    

    on login form on click of toggle button:

     protected void changetosignup(object sender, EventArgs e)
    {
        Session["form2"] = "clicked";
    
         Response.Redirect("#toregister");
    
    
    }
    

    In short: combo of form visible property and session variable did the trick !!