I have a simple form with one text box that pass data to SQL and I want it to submit when the user hits the enter key.
In Firefox, this works great. The user puts a number hits enter gets back the results.
However in IE 8 and IE 9 this is not working.
<form id="form1" runat="server" accept="cmdclick"
style="background-position: center; background-image: url('BG.gif'); background-repeat: no-repeat;">
<div style="text-align: center">
<br /><br /> <br /><br /><br /> <br /><br /><br />
<asp:TextBox ID="txttrack" runat="server" Height="20px"
Width="175px" Wrap="False"></asp:TextBox>
<asp:Button ID="cmdclick" runat="server"
CommandName="cmdclick" BackColor="White" BorderStyle="None" />
I am not sure what would cause this. I see a lot of people using JavaScript to go around the problem however I do not know how to write JavaScript code.
How can this be done (preferably without JavaScript)?
Set the DefaultButton-Property in Form-Tag:
<form defaultbutton="cmdclick" runat="server">
You can also set the DefaultButton on ASP.NET-Panels. This might not be important in this case but
when you're using MasterPages, because the ID of a Button in a ContentPage is unknown in a MasterPage (Form-Tag is inside the Masterpage)
when you want to have more than one DefaultButton you can set different DefaultButtons to every Panel
If you have recursive form elements (which is against standards compliance) then IE will basically ignore the enter key and not submit the form when it is detected as it doesn't know which form you are trying to submit.
Related
I have a problem with the trigger of the OnCheckedChanged. When I click the checkbox (switch toggle), the OnCheckedChanged is not firing. I already tried many solutions like trigger it in JS part but no luck.
Below is the checkbox code:
<input type="checkbox" data-toggle="toggle" data-onstyle="info" data-offstyle="secondary" data-on="Ja" data-off="Nee" data-size="xs" runat="server"
oncheckedchanged="showProductFoto_CheckedChanged" AutoPostBack="true"
style="margin-top: -5px;" runat="server" id="showProductFoto" onchange="IncludeWithoutPhotos(this)" ClientIDMode="Static"/>
Well, then get the css working for the check box, and then you back to using the standard asp.net controls - and they are a pure joy to use, and easy to use.
So, say I have this check box:
<asp:CheckBox ID="CheckBox1"
runat="server" Text="Confirm to send email"
OnCheckedChanged="CheckBox1_CheckedChanged" >
We get this ugly thing:
so, I can see your motivation to want to dump that ugly above.
but, a check box gets renderd as a html input (type = checkbox), and also puts in a label for you.
So, you can style it anyway you want.
Say, like this:
<style>
.bigcheck input {width:28px;height:28px;cursor:pointer;
box-shadow: 5px 5px 5px grey}
.bigcheck label {position:absolute;margin-left:15px;margin-top:10px}
</style>
<asp:CheckBox ID="CheckBox1" CssClass="bigcheck"
runat="server" Text="Confirm to send email"
OnCheckedChanged="CheckBox1_CheckedChanged" />
And now we get this:
so, you still have quite much unlimited css you can apply against that check box.
Considering the fact that I was not able to find a single instance of someone else needing this functionality anywhere else, this might be an off the wall requirement. That said:
A website that I am working on uses several dozen different validator controls (everything from RequiredFieldValidaotrs to CustomValidators) throughout for form validation. As part of our Section 508 compliance, we have to support users who disable CSS, which is problematic because the validators render the error text to the page and use the CSS display property to hide it. When CSS is disabled all of the error messages are both visible and read by screen readers.
Short of using labels and postbacks to show and hide said labels, is there any known method for using ASP.Net validator controls with CSS disabled?
Use the Display="None" attribute on the FieldValidator control and a ValidationSummary tag to contain the messages.
<form id="form1" runat="server">
<asp:TextBox runat="server" ID="TextBox1" /> <br />
<asp:TextBox runat="server" ID="TextBox2" /> <br />
<asp:Button runat="server" Text="Go" />
<div class="messages">
<asp:ValidationSummary id="summery1" runat="server"/>
</div>
<div>
<asp:Panel ID="Panel1" runat="server" >
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ErrorMessage="Required Field Validator1 empty" ControlToValidate="TextBox1" Display="None" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ErrorMessage="Required Field Validator2 empty" ControlToValidate="TextBox2" Display="None" />
</asp:Panel>
</div>
</form>
HOWEVER....(there's always a catch)... with this method, the Validation Messages themselves are stored in the JavaScript only. Meaning that it won't work if Javascript is disabled. I'm assuming that's not a huge problem since you are working in WebForms (which rely on JS), but I figure it's worth mentioning.
And for the record, accessibility concerns are mostly a crock of horse-crap. I THOUGHT I knew about accessibility until I actually worked with a visually impaired programmer (100% blind). Then, I learned that JS works just fine (assuming they know to look for new content...) and that they just skip around the page from link to link until they find what they are after. And table-based layouts didn't slow them down for 1 second. Boy that was a tough pill to swallow after being SOOO unbearably preachy about CSS for a few years....
I am trying to use the ASP.NET ajax rating control on my ASP.NET website. I have followed the exact steps from the video tutorial to use this rating control.
Here's my HTML code.
<div id="Rating" style="float:right; width:400px">
<div class="demoheading">Rating demonstration
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="float:left;width:230px">
How much do you like this profile?
</div><br />
<asp:Rating ID="LikeRating" runat="server" CurrentRating="3" MaxRating="5"
StarCssClass="ratingStar" WaitingStarCssClass="savedRatingStar" FilledStarCssClass="filledRatingStar"
EmptyStarCssClass="emptyStarRating"
style="float:left" onchanged="LikeRating_Changed1" Height="40px"
Width="400px">
</asp:Rating><br />
<div style="clear:left;">
<asp:Button ID="ButtonSubmit" runat="server" Text="Submit" />
<asp:Label ID="LabelResponse" runat="server" Text="[No response provided yet]"></asp:Label>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<br /><br />
</div>
</div>
My rating control is not appearing in the designer. However, when I hover that blank space it should be, it shows me the rating number as in the figure below. I did check the path of the images and the css I used for the star rating. Is there still something I am missing?
You do not have the proper path to your image or the images do not exist. The control is there, the styles that you declare for the different type of stars do not have the images.
Also, you are missing a semicolon here:
emptyStarCssClass="emptyStarRating"
style="float:left"
should be
emptyStarCssClass="emptyStarRating"
style="float: left;"
I would recommend inspecting the element to check what it shows the image path is.
I missed the in designer part. I have experienced some issues where designer does not quite understand the image paths and will flag the path as bad, but in actuality it is fine. Have you tested the page in debug mode?
<asp:UpdatePanel ID="LoginPanel" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<div id="login">
<div class="row">
<div class="label">
<asp:Label ID="lblUsername" Text="<%$ Resources:Login, UserNameField %>" runat="server" />
</div>
<div class="field">
<asp:TextBox ID="txtUsername" MaxLength="12" runat="server" />
<asp:RequiredFieldValidator ID="rfvUsername" ControlToValidate="txtUsername" ValidationGroup="vgLogin" SetFocusOnError="true"
ErrorMessage="*" ToolTip="<%$ Resources:Login, UserNameRequired %>" runat="server" />
</div>
</div>
<div class="row">
<div class="label">
<asp:Label ID="lblPassword" Text="<%$ Resources:Login, PasswordField %>" runat="server" />
</div>
<div class="field">
<asp:TextBox ID="txtPassword" MaxLength="12" TextMode="Password" runat="server" />
<asp:RequiredFieldValidator ID="rfvPassword" ControlToValidate="txtPassword" ValidationGroup="vgLogin" SetFocusOnError="true"
ErrorMessage="*" ToolTip="<%$ Resources:Login, PasswordRequired %>" runat="server" />
</div>
</div>
<div class="row">
<div class="label">
<asp:Label ID="lblRemember" Text="<%$ Resources:Login, RememberField %>" runat="server" />
</div>
<div>
<asp:CheckBox ID="chkRemember" Checked="true" ToolTip="<%$ Resources:Login, RememberToolTip %>" runat="server" />
</div>
</div>
<div class="buttons">
<asp:Button ID="btnLogin" Text="<%$ Resources:Login, Command %>" OnClick="btnLogin_Click" ValidationGroup="vgLogin" CausesValidation="true" runat="server" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
The first time around, validators won't check whether the fields are completed or not, the form just gets submitted no matter what, after that initial hiccup, the form validates correctly each time.
I know I can just ask (and should, regardless) if Page.IsValid at server-side, but I still would like the validation to correctly alert the user input mistake the first time around instead of waiting for the server response first.
What am I doing wrong?
The load order of the JS files may be causing problems here, if there are dependencies between them. Because of random latency some dependencies might not have been satisfied yet, causing functionality to break. Your console might give hints if this is the case. On subsequent page loads everything appears to be fine, because the JS files were cached and are now loaded without latency in their proper order.
Things to try:
Play around with JS inclusion order
Try to postpone the use of
dependencies until after body.onload
fired.
You may also want to try out
the rather involved solution
offered on aspdotnetfaq.
Hope this helps.
I've had something similar happen when there was a large amount of javascript being loaded, or when there is an unrelated javascript error (usually but not always related to the large amount of javascript.
This may not be much of an answer, but Ive run into similar issues in the past. ASP Validation Controls dont really seem to "play nice" inside of UpdatePanels. I think the reason is that when they attempt to perform any type of validation, they also attempt to write to the pages viewstate. The viewstate however is outside of the Update Panel's area, meaning that you are update the "middle" of the page, without the entire page's state getting updated, making the status of your controls out of sync.
In any case, to prove this, remove the update panel from around your controls, submit your form, and check if your validation controls work.
Unfortunately, for a workaround, Ive created custom javascript functions to perform client side validation, and then also perform server side validation and display any errors. In these scenario's, Ive avoided using ASP .NET Validation controls.
Good luck =\
I have a simple form written in asp.net/C# and when trying to hit enter while in the form's input box doesn't submit the form for some reason. I had implemented a fix for a previous bug where pressing enter would merely refresh the page without submitting the form data but now pressing enter just does nothing, the fix is below:
<div style="display: none">
<input type="text" name="hiddenText" />
</div>
anybody know about a fix for this or a workaround?
I'm assuming you have a button somewhere on your page, as well as an event handler for it.
Have you tried wrapping your form (with the button) inside a Panel control and setting the default button attribute?
i.e.
<asp:Panel id="pnlMyForm" runat="server" DefaultButton="btnMyButton">
<asp:textbox id="txtInput" runat="server" />
<asp:Button id="btnMyButton" text="Submit" runat="server" />
</asp:Panel>
You can specify a default button for a form, which means hitting enter on any input control will fire that button (i.e. target the submit button). I haven't heard of this not working in any specific browser. This should eliminate your need for a workaround/hack.
<form id="form1" runat="server">
<asp:Panel ID="pnlFormContents" runat="server" DefaultButton="btnSubmit">
<!-- add some input controls as needed -->
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click"/>
</asp:Panel>
</form>
Hope this helps...
I don't remember the specifics of the rules, but most browsers have the capability of submitting forms when ENTER is pressed if conditions are met. I think it had to do with whether you had 1 or more-than-one field, or whether or not there was at least one submit button (even if you hide it). I've done it in a site I recently did, but I don't have the code handy, but I can tell you it works without any special scripting. Check this posting for more details:
http://manfred.dschini.org/2007/09/20/submit-form-on-enter-key/