How to stop on the Sign Up Form when web page performs Postback?

Question

I'm working on my final year project. In which:

I have Login and Signup forms on one page (WebForm):

When user click on anchor Sign Up the DropDown ddlType (hides) and TextBoxes - txtCustName, txtEmail and txtConfirmPassword (Displays) in Javascript client side:

function signupClick() {
  document.getElementById('divType').style.display = 'block' ? 'none' : 'block';

  document.getElementById('<%=txtCustName.ClientID%>').style.display = 'inherit';
  document.getElementById('<%=txtConfirmPassword.ClientID%>').style.display = 'inherit';

  document.getElementById('<%=btnLogin.ClientID%>').style.display = 'none';
  document.getElementById('<%=btnSignUp.ClientID%>').style.display = 'inherit';

  document.getElementById('lblLogin').style.display = 'inherit';
  document.getElementById('lblSignup').style.display = 'none';
}

Login Form:-

And when user click on anchor Login the DropDown ddlType (Displays) and TextBoxes - txtCustName, txtEmail and txtConfirmPassword (Hides) in Javascript client side:

function loginClick() {
  document.getElementById('divType').style.display = 'none' ? 'block' : 'none';

  document.getElementById('<%=txtCustName.ClientID%>').style.display = 'none';
  document.getElementById('<%=txtConfirmPassword.ClientID%>').style.display = 'none';

  document.getElementById('<%=btnLogin.ClientID%>').style.display = 'inherit';
  document.getElementById('<%=btnSignUp.ClientID%>').style.display = 'none';

  document.getElementById('lblLogin').style.display = 'none';
  document.getElementById('lblSignup').style.display = 'inherit';
}

Sign Up Form:-

The .aspx code of anchors and buttons is:

<label id="lblSignup" style="float: right">
    For new account?
  <a href="javascript:;" id="signup" onclick="signupClick()">Sign Up</a>
</label>
  <label id="lblLogin" style="float: right; display: none">
      For existing account?
  <a href="javascript:;" id="login" onclick="loginClick()">Login</a>
  </label>
</div>
<label style="width: 28%">
  <asp:HyperLink ID="hlHome" NavigateUrl="Index.aspx" Text="Home" CssClass="btn btn-default" Width="100%" runat="server" />
</label>
<label style="width: 70%; float: right">
  <asp:Button ID="btnLogin" OnClick="btnLogin_Click" CssClass="btn btn-success" Width="100%" runat="server" Text="Login" />
  <asp:Button ID="btnSignUp" OnClick="btnSignUp_Click" Style="display: none" Width="100%" CssClass="btn btn-primary" runat="server" Text="Sign Up" />
</label>

Question:

When user click on button Sign Up the DropDown ddlType (Displays) and TextBoxes - txtCustName, txtEmail and txtConfirmPassword (Hides) but I want to prevent this condition and the sign up form should be shown:

private void ShowMessage(string msg)
{
    ScriptManager.RegisterStartupScript(this, GetType(), null, "AutoHideAlert('" + msg + "');", true);
}
protected void btnSignUp_Click(object sender, EventArgs e)
{
    string cusname = txtCustName.Text;
    string email = txtEmail.Text;
    string pass = txtPassword.Text;
    string confirm = txtConfirmPassword.Text;

    if (string.IsNullOrEmpty(cusname) || string.IsNullOrEmpty(email) || string.IsNullOrEmpty(pass) || string.IsNullOrEmpty(confirm))
    {
        ShowMessage("Fill all cradentials of customer.");
    }
    else
    {
        //.. Register user

        Response.Redirect("~/CustomerPanel/Dashboard.aspx");
    }
}

--- JavaScript Function ---
function AutoHideAlert(msg) {
  // lblAlert is an asp:Label for displaying alert message 
  var al = document.getElementById('<%=lblAlert.ClientID%>');

  al.innerText = msg;

  // alert is a DIV to show message
  $("#alert").fadeTo(3500, 500).slideUp(1500, function () {
      $("#alert").slideUp(500);
  });
}

How I can stop it on the Sign Up Form?

Updated:

My problem is when click on Sign Up button it sets to the Login form as like:

Answer 1

Your btnSignUp_Click event isn't doing anything - it isn't sending the user anywhere else. So it just ends up reloading the page.

Finish your btnSignUp_Click by creating the user, completing the login and sending the user to another page.

Update: All the changes you are doing is via Javascript, so the server has no idea that you hid some fields and showed others. When you do a postback, the page gets rewritten with what the server sends back. The server still thinks the "Login" controls are visible, so that's what happens.

You will have to set the visibility of those controls in your server-side code if you have to stay on the page:

protected void btnSignUp_Click(object sender, EventArgs e)
{
    string cusname = txtCustName.Text;
    string email = txtEmail.Text;
    string pass = txtPassword.Text;
    string confirm = txtConfirmPassword.Text;

    if (string.IsNullOrEmpty(cusname) || string.IsNullOrEmpty(email) || string.IsNullOrEmpty(pass) || string.IsNullOrEmpty(confirm))
    {
        txtCustName.Visible = true;
        txtEmail.Visible = true;
        txtPassword.Visible = true;
        txtConfirmPassword.Visible = true;
        //etc....

        ShowMessage("Fill all cradentials of customer.");
    }
    else
    {
        //.. Register user

        Response.Redirect("~/CustomerPanel/Dashboard.aspx");
    }
}

Update 2: This is what's happening:

1. Server sends page to browser with login controls visible.
2. Within the browser, the Javascript hides the login controls and shows the signup controls without involving the server.
3. The button is clicked causing a postback.
4. The server resends the entire contents of the page, which resets all the controls to the last known state at the server, which means we're back at step 1 with the login controls visible.

Your only two solutions are:

1. In the btnSignUp_Click event, hide the login controls and show the signup controls (basically repeating what already happened in Javascript). This works since we know that if the btnSignUp_Click event is running at all, then that button must have been visible.
2. Use client-side Javascript to validate the data before doing a postback at all. You use a Javascript function and the OnClientClick property on the button to do this. There is an example in the documentation, but the key is to return false; from the function if you want to stop the postback.

Answer 2

The server side code needs to tell the client side know the form fields (Sign Up or Login) to be shown base on the validation result, one way to do that is adding a protected property in your code behind, like:

protected bool showSignUpDialog = false;

on validation failed:

if (string.IsNullOrEmpty(cusname) || string.IsNullOrEmpty(email) || string.IsNullOrEmpty(pass) || string.IsNullOrEmpty(confirm))
{
    txtCustName.Visible = true;
    txtEmail.Visible = true;
    txtPassword.Visible = true;
    txtConfirmPassword.Visible = true;
    //etc....

    ShowMessage("Fill all cradentials of customer.");
    showSignUpDialog = true;
}

in your javascript section, utilize the showSignUpDialog and existing loginClick/signupClick:

$(document).ready(function () {
    <% if (showSignUpDialog) {%>
        signupClick();
    <% } else {%>
        loginClick();
    <% } %>
});

by default the showSignUpDialog is false so it will call the loginClick() to show the login fields, which is the default behavior from your demo