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" />
Related
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>
Trying to build a 3 control input-group with Bootstrap 3.3.7, however the height of the first addon does not match the following input nor button.
<div class="input-group">
<span class="input-group-addon">Amount</span>
<input type="text" class="form-control" />
<div class="input-group-btn">
<button class="btn">Submit</button>
</div>
</div>
Anyone have a working sample to solve this design?
First and for all where is your <label> tag?
Do you want the submit in your input field? Or the submit button underneath it?
You need also to place form around it and your input can be declared as number because it's amount; your input field also needs a name. A submit button is an input button with type='submit':
example:
<input type="submit" class="btn btn-default" value="submit" id="submit">
You can also declare on your body class='container'
<body class="container">
<form id="youWantToGiveThisAName" class="form-group">
<label for="amountOfSomething"></label>
<div class="input-group">
<span class="input-group-addon">Amount</span>
<input type="number" name="amountOfSomething" id="amountOfSomething" class="form-control" value="0.00000121">
</div>
<div>
<input type="submit" class="btn btn-coinchecker pull-right" value="submit" id="submit">
</div>
</form>
</body>
Here's a fiddle to see the result
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.
I am VERY new to Watir, trying to test a popup window and am unable to get my script to click the Cancel Target button. When running the script, I get an error: element not visible (Selenium::WebDriver::Error::ElementNotVisibleError. This is the script I am using:
browser.div(:class => "modal-footer").button(:class => "btn btn-danger").click
Below is the code:
<div class="modal hide fade" id="target_modal" data-bind="with: target">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 data-bind="text: BusinessName"></h3>
</div>
<div class="modal-body">
<div class="row">
<div class="span3">
<label for="FirstName">First Name</label><input id="FirstName" type="text" data-bind="value:FirstName" />
<label for="LastName">Last Name</label><input id="LastName" type="text" data-bind="value: LastName" />
<label for="Email">Email</label><input id="Email" type="text" data-bind="value: Email" />
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bind="click: saveTarget">
<i class="icon-white icon-ok"></i>
Save Target
</button>
<button class="btn btn-danger" data-dismiss="modal">
<i class="icon-white icon-remove"></i>
Cancel Target
</button>
</div>
</div>
Any help would be greatly appreciated. Thanks!
I assume that this popup is part of the page (ie just an div tag overlaying the rest of the page), rather than a new browser window popup.
My guess is that Watir is trying to click the button before the popup finishes being displayed. Explicitly telling Watir to wait for the button may solve the problem:
cancel_button = browser.div(:class => "modal-footer").button(:class => "btn btn-danger")
cancel_button.when_present.click
I got it to work. Justin Ko's 1st answer got me thinking and this worked:
cancel = browser.div(:id => "target_modal")
cancel.div(:class => "modal-footer").button(:class => "btn btn-danger").i(:class => "icon-white icon-remove").click
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.