Login OnClick Event not firing - asp.net

This is my first attempt at creating an asp.net website so please be kind. I'm attempting to fire a click event on a submit button in ASP.NET, the template I'm using has this html
<div id="lightbox"></div>
<div id="loginbox-panel">
<form action="#">
<fieldset>
<div class="frame">
<h4>TestSite</h4>
<small>Sign in to your account.</small>
<div class="clear"></div>
<input type="text" value="Username" class="input-text autoclear" />
<input type="password" value="Password" class="input-text autoclear" />
</div>
<div class="separator"></div>
<div>
<input type="submit" value="Sign in" class="input-submit float-right" />
Forgot your password?
</div>
</fieldset>
</form>
</div>
I believe the input type="submit" is client side but could be made to run a server side event using
<input type="submit" value="Sign in" class="input-submit float-right"
runat="server"
onserverclick="LoginButton_Click"/>
with code behind
protected void LoginButton_Click(object sender, EventArgs e)
{
//login handler
}
However, the event is not firing! Please can someone advise how I can get the LoginButton_Click event to fire
Thanks

Your form needs to be runat=server to be able to send the form back to the server and wire up the click event on the button.

Related

how to show search results page in an overlay not a new tab?

I need to display the search results page in an overlay. now when I submit the search button I lost focus on my site and the results open on a new page. how can I show results overlay?
<form action="https://google.com/search" method="get" class="form-inline d-flex justify-content-
center md-form form-sm active-cyan active-cyan-2 mt-2">
<input type="hidden" name="q" value="site:www.forexample.com" />
<input type="text" name="q" class="form-control form-control-sm ml-3 w-75" />
<a onclick="this.closest('form').submit();return false;"></a>
</form>

validate html5 two submit buttons .net

I have a master page with a form field and a page with form fields in asp.net using html5 validation. Both sets of form fields have a submit button. I am aware that they are on the same form once the page is compiled.
My problem is that all of the fields require validation. I am using the required="required" attribute. I prefer not to use the group validation from c#.
I need one field to be submitted if one button is selected and the other 3 fields to be submitted if the other button is selected. As of right now, if either button is submitted, ALL form fields must be filled out. One of the form fields and button is in the master page for a newsletter subscription and the other fields and button are on a page.
Any help would be greatly appreciated.
Thanks,
Justice
Page Code:
<div class="form-group">
<input runat="server" type="text" placeholder="Enter Email" name="register_email" id="register_email" class="form-control" required="required" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input runat="server" type="text" placeholder="Enter Phone" name="register_phone" id="register_phone" class="form-control" required="required" />
</div>
</div>
<div class="col-sm-12">
<div class="form-group text-center">
<button runat="server" data-loading-text="Please wait..." class="btn btn-dark btn-theme-colored btn-sm btn-block mt-20 pt-10 pb-10" id="submit2" name="submit2" onServerClick="Submit_Click2">Send Now</button>
</div>
</div>
Mater Page Code:
<div class="input-group">
<input runat= "server" name="emailOut" id="emailOut" placeholder="Your Email" class="form-control input-lg font-16" data-height="45px" />
<span class="input-group-btn">
<button runat="server" data-height="45px" class="btn btn-colored btn-theme-colored btn-xs m-0 font-14" type="submit" id="submit" name="submit" onServerClick="Submit_Click" formnovalidate="formnovalidate" >Get Started</button>
</span>
</div>

Using OnServerClick with "required" field

I'm building an asp.net web application. In the login page, the username and password text boxes are required and I get a really nice message when the user tries to validate without filling both the boxes, as shown below:
But when I add an onserverclick event handler to the submit button, this functionality no longer works - nothing happens if the user validates with empty text boxes. Here is the code for the login form.
<fieldset>
<%--Input--%>
<div class="form-group">
<label for="UsernameTextBox" class="col-lg-2 control-label text-right">Username</label>
<div class="col-lg-10">
<input type="text" class="form-control" placeholder="username" required id="UsernameTextBox" runat="server">
</div>
</div>
<div class="form-group">
<label for="PasswordTextBox" class="col-lg-2 control-label text-right">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" placeholder="password" required id="PasswordTextBox" runat="server">
</div>
</div>
<%--Buttons--%>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="submit" class="btn btn-primary btn-lg" onserverclick="Login_Click" id="LoginBtn" runat="server"><i class="glyphicon glyphicon-ok"></i>
</button>
<button type="reset" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-repeat"></i>
</button>
</div>
</div>
</fieldset>
I have just been trying this out. When I put a break point on the button server side function and click, I see it hit the break point, if I then click the button again the Required message comes up.
MSDN for onserverclick states "This event causes a round trip to occur from the client to the server and back. It is deliberately different from the client-side OnClick event."
https://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlbutton.onserverclick(v=vs.110).aspx
The button gets setup with an onclick attribute which will be doing the postback and bypassing the browser required validation.
<button onclick="__doPostBack('ctl00$MainContent$btnSubmit','')" id="MainContent_btnSubmit"> Submit </button>
I found that if you use a standard asp:button then the required validation fires.
<asp:Button runat="server" ID="btnSubmit" OnClick="btnSubmit_Click" />

How to add a bootstrap form element in asp.net content page

I am trying to add a bootstrap form in asp.net content page(.aspx). but it gives me an error regarding "Element form must not be nested with in a element form"
But i want to use the form element for a Login purpose in the page.
<div class="container">
<h2>Vertical (basic) form</h2>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<%-- --%>
</asp:Content>
Thanks in Advance
All asp webpages are already in a form, so you don't need the form tag, all you can do is instead of using, you can see the form tags at your main master page <form> you can use <div class="form"> hope this helps also for the best result
you should use CssClass instead of class in asp tags when adding the styling classes. e.g <asp:TextBox ID="TextBox14" runat="server" CssClass="form-control"></asp:TextBox>
you have simply use
<div class="container">
<h2>Vertical (basic) form</h2>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
The message is clear.
Remove the extra form tags <form> and </form> from your code. Beside that your form did not post anywhere - use the asp.net form to post to code behind, you do not need other form there.

second form action attribute not working

I have 2 form action below and whenever I click the 2nd form action (post /logout), the first action (get /journey) get triggered.
<form action="/journey" method="get"><input type="submit" value="Journey" />
<form action="/logout" method="POST"><input type="submit" value="Logout" />
The second action works if I didn't add in the /journey action.
Anyone can tell me what's wrong? Thanks.
try after closing form tags as shown below :
<div style="float:left">
<form action="/journey" method="get">
<input type="submit" value="Journey" />
</form>
</div>
<div>
<form action="/logout" method="POST">
<input type="submit" value="Logout" />
</form>
</div>

Resources