How to stop the registration form when the web page is posting back?

Question

I am working on my project last year. Wherein:

I have a login and registration form on one page (WebForm):

When the user clicks on the anchor Register DropDown ddlType (hides) and TextBoxes - txtCustName , txtEmail and txtConfirmPassword (displays) on the client side Javascript:

 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 the user clicks on the anchor DropDown Login ddlType (Displays) and Text Boxes - txtCustName , txtEmail and txtConfirmPassword ( txtConfirmPassword ) on the client side Javascript:

 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'; } 

Registration form: -

Code of anchors and .aspx buttons:

 <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 the user clicks the Sign Up DropDown ddlType (Displays) and Text Boxes - txtCustName , txtEmail and txtConfirmPassword (Hides), but I want to prevent this condition, and the registration 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 can I stop it in the registration form?

Updated:

My problem is when you click on the “Register” button, it sets up the “Login” form as such:

Answer 1

Your btnSignUp_Click event btnSignUp_Click nothing - it does not send the user anywhere. So the page reload just ends.

Complete your btnSignUp_Click by creating a user by logging in and sending the user to another page.

Update: All the changes you make are through Javascript, so the server does not know that you hid some fields and showed others. When you do the postback, the page is overwritten with what the server sends back. The server still believes that the "Login" controls are visible, what is happening.

You will need to set the visibility of these controls in your server code if you need 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 happens:

• The server sends the page to the browser with visible controls.
• In a browser, Javascript hides login controls and shows subscription controls without involving a server.
• A button is pressed that causes a reverse gear.
• The server retransmits the entire contents of the page, which resets all controls to the last known state on the server, which means that we returned to step 1 with the visible input controls.

Your only two solutions:

• In the btnSignUp_Click event, btnSignUp_Click input controls and show the registration controls (basically repeating what has happened in Javascript). This works because we know that if the btnSignUp_Click event is btnSignUp_Click at all, then this button should be visible.
• Use client-side Javascript to validate data before performing postbacks. To do this, you use the Javascript function and the OnClientClick property. There is an example in the documentation , but the key is in return false; out of function if you want to stop the postback.

Answer 2

The server-side code should let the client know the form fields (Registration or Login) that will be shown based on the result of the check, one way to do this is to add a protected property to your code behind, for example:

 protected bool showSignUpDialog = false; 

at check completion:

 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, use showSignUpDialog and existing loginClick / signupClick:

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

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

Answer 3

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

Another mistake is that the server controls do not save their names on the client side, so you need to use the ClientId property inside the server’s built-in tags to display the proper names in the script.

To start resolving the problem, create a client-side event handler, duplicating validation criteria from a C # handler to JavaScript. Then add the OnClientClick attribute to the server button.

So, the solution to the problem will be as follows.

 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 prevents unnecessary trips to the server, and the user interface in the browser does not change.

Answer 4

Use jquery, which "writes less and does more," which is also easy and flexible for hidden and demo functionality. In the example below, I use a simple Html element, but you can also use it for an 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/>