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

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:

4 Answers

Answers 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.

Answers 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

Answers 3

In ASP.NET WebForms the default behavior of a button (asp:Button) is to post-back the page to the server. As you already find out this is what you need to prevent because the server responds with the new HTML which is the login screen in your case.

Another pitfall is that the server controls don't keep their names on the client side, so you need to use the ClientId property within inline server tags to render proper names in a script.

To begin resolving the issue, do create a client side event handler by duplicating your validation criteria from the C# handler to JavaScript. Then add the OnClientClick attribute to the server button.

So the solution of the problem would look like the following.

function btnSignUp_Click(e) {     var cusname = $("<%=txtCustomerName.ClientId%>").val();     var email = $("<%=txtCustomerName.ClientId%>").val();     var password = $("<%=txtEmail.ClientId%>").val();     var confirmPassword = $("<%=txtPassword.ClientId%>").val();      var isValid = cusName !== "" && email !== "" && password !== ""          && password === confirmPassword;      return isValid; } 

Then, in the markup of the asp:Button element add the OnClientClick attribute:

<asp:Button runat="server" ... OnClientClick="btnSignUp_Click">SignUp</asp:Button> 

This way the unnecessary round trip to the server is prevented and the UI in the browser doesn't change.

Answers 4

Use jquery which is "write less and do more", which is also easy and flexible for hide and show functionality. In the Below example i use simple Html element but you can also use it for asp.net element.

$(document).ready(function(){  sigin();  });    function sigin()  {  $("#Idselection").show();    $("#cutname").hide();  $("#cpass").hide();    }  function signUp()  {  $("#Idselection").hide();    $("#cutname").show();  $("#cpass").show();    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <select id="Idselection">  <option>opt1</option>  <option>opt2</option>  <option>opt3</option>  </select><br/>  <input id="cutname" type='text' placeholder="Customer Name" /><br/>  <input id="email" type='text' placeholder="Email *" /><br/>  <input id="pass" type='text' placeholder="Password *" /><br/>  <input id="cpass" type='text' placeholder="Confirm Password *" /><br/>    <input id="btnsigin" type='Button' onclick="sigin()" value="SignIn"/>  <br/>  <input id="btnsignup" type='Button' onclick="signUp()" value="Sign Up" /><br/>

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati