I have a form with a textbox and a button. IE is the only browser that will not submit the form when Enter is pressed (works in FF, Opera, Safari, Chrome, etc.). I found this javascript function to try to coax IE into behaving; but no avail:
function checkEnter(e){
var characterCode
if (e && e.which) {
e = e
characterCode = e.which
} else {
e = event
characterCode = e.keyCode
}
if (characterCode == 13) {
document.forms[0].submit()
return false
} else {
return true
}
}
Implementation:
searchbox.Attributes("OnKeyUp") = "checkEnter(event)"
Any advice?
EDIT: This page on CodeProject outlines what Dillie was saying, and it works perfectly.
Just create a text input in a hidden div on the page. This will circumvent the IE bug.
Example div:
<!-- Fix for IE bug (One text input and submit, disables submit on pressing "Enter") -->
<div style="display:none">
<input type="text" name="hiddenText"/>
</div>
The other thing I have done in the past is wrap the form area in a Panel and set the DefaultButton attribute to the submit button you have. This effectively maps the enter key to the submission as long as you have a form element in focus in the panel area.
There is a good write up of this problem here, and a nice jquery based solution:
http://www.thefutureoftheweb.com/blog/submit-a-form-in-ie-with-enter
// Use the following Javascript in your HTML view
// put it somewhere between <head> and </head>
<script language="JavaScript" type="text/javascript"><!--
function KeyDownHandler(btn)
{
if (event.keyCode == 13)
{
event.returnValue=false;
event.cancel = true;
btn.click();
}
}
// -->
</script>
// Put this in your TextBox(es) aka inside <asp:textbox ... >
onkeydown="KeyDownHandler(ButtonID)"
When using display:none, IE won't see the button and therefore won't be able to use it to submit the form. Instead, you could use z-index and absolute positioning to hide it under another element, e.g. with the style:
position:absolute; bottom: -20px; left: -20px; z-index: -1;
Now it'll still be there, usable by IE, but hidden beneath another element.
Hide the button - not using display:none, but with the following styles:
position: absolute; /* no longer takes up layout space */
visibility: hidden; /* no longer clickable / visible */
If you do this, you won't need to add any other elements or hidden inputs.
This is due to a peculiarity in IE for single text field inputs.
A simple solution is to stop the page having a single text field by adding another hidden one.
<input type="text" name="hidden" style="visibility:hidden;display:none;" />
see..
https://web.archive.org/web/20210125133120/https://www.4guysfromrolla.com/articles/060805-1.aspx
Does it use a GET instead of a POST? Is the URL too long? I've seen that...
Basically, a form needs either a button, input type="submit" or an input type="image" to enable the builtin behaviour to submit a form on enter. You shouldn't need a javascript to submit it.
Related
Some browsers provide a hint to the user for an input field based on the type of the input, e.g. here for type="email":
<input accesskey="e" name="email" id="email" type="email" required>
Chrome:
Firefox:
My questions are:
Are these part of any spec?
Is there a way to control that message (the message itself and also disable/enable it)?
Is there a way to style this tooltip?
its browser behavior so its cant be modified but you can done something like the tool-tip or hint using bootstrap css framework
Hover over me
Hover
Hover
Hover
Hover
You can find examples here
This is the solution from Mozilla
var email = document.getElementById("mail");
email.addEventListener("input", function (event) {
if (email.validity.typeMismatch) {
email.setCustomValidity("I expect an e-mail, darling!");
} else {
email.setCustomValidity("");
}
});
To customize the appearance and text of these messages, you must use JavaScript, there is no way to do it using just HTML and CSS.
You can use something like this:
var email = document.getElementById("mail");
email.addEventListener("input", function (event) {
if (email.validity.typeMismatch) {
email.setCustomValidity("I expect an e-mail, pls!");
} else {
email.setCustomValidity("");
}
});
HTML5 introduced new mechanisms for forms: it added new semantic types for the element and constraint validation to ease the work of checking the form content on the client side.
Check this documentation
If you want to disable client side validation for a form in HTML5 add a novalidate attribute to the form element. Fx:
<form method="post" action="/foo" novalidate>...</form>
just give a title attribute and use your content to show , and there is no way to style it, to style it you need to include jquery library
<input type="text" title="this is how i did that" />
I found this nice looking button on the web. Now I was wondering is it even possible to link something with it? The <a href""> is needed for the status of the button and the second href indside of the div doesn't work. Did the creator make a small mistake or would a button like this never work?
http://codepen.io/seansean11/pen/wHIae
I think the point of this button is to send something (probably a form) with AJAX and then show the thank you-side.
If you use it with a href to another page you will not see the thank you-side as you are leaving the page.
The href on the div will never work without some JavaScript. The button effect works without JavaScript but is kind of pointless on it's own.
Updated with example to use it as download link
In order to make the button work for non-JS users you should set the href to the file you want them to download. For non-JS users it doesn't show the thank you-side unfortunately.
I also added an ID (#btn-download) to the button to make it easy to get it in the JS.
HTML
<a id="btn-download" href="http://www.domain.com/some_file.pdf" class="flipper-container">
<div id="id" class="flipper">
<div class="front-face" data-icon="➣">Click Me</div>
<div class="back-face" data-icon="✓">Thank You</div>
</div>
</a>
JavaScript
(function (d, w) {
var button = d.getElementById('btn-download');
// Store the download link
var downloadLink = button.href;
// Set the href back to the id of .flipper
button.href = '#' + d.getElementById('id').id;
// Add the cross browser event listener
addEvent('click', button, function() {
// Send the user to the download link
w.location = downloadLink;
});
}(document, window));
// Taken from http://stackoverflow.com/a/6927800/3351720
// This is only to support IE8 and below
function addEvent(evnt, elem, func) {
if (elem.addEventListener) { // W3C DOM
elem.addEventListener(evnt, func, false);
}
else if (elem.attachEvent) { // IE DOM
elem.attachEvent('on' + evnt, func);
}
else { // Not much to do
elem[evnt] = func;
}
}
I haven't tested it in various browsers but I think it should work in all modern browsers (Chrome, Firefox, Opera and Safari) and Internet Explorer to atleast version 7.
altough a href attribute will work on a element only you may add a click event to any element to call a url
or you can wrap a span with an a
i want a anchor should act like and input type submit button.
i am using a jquery plugin library that actually uses input type submit but i have styled my buttons on anchors. i dont want to use
<input type="button">
or
<input type="submit">
i want to use anchors such as
<a href="javascript to submit the form" ></a>
and here is my jquery code where i want to use
{
var submit = $('<button type="submit" />');
submit.html(settings.submit);
}
$(this).append(submit);
}
if (settings.cancel) {
/* if given html string use that */
if (settings.cancel.match(/>$/)) {
var cancel = $(settings.cancel);
/* otherwise use button with given string as text */
} else {
var cancel = $('<button type="cancel" />');
how to use anchors instead of button.
If you want an anchor tag to act like a button just do this
<!--YOUR FORM-->
<form id="submit_this">.....</form>
<a id="fakeanchor" href="#"></a>
<script>
$("a#fakeanchor").click(function()
{
$("#submit_this").submit();
return false;
});
</script>
Since you're using jQuery, just use $() to select the form element, and call submit on it; hook all this up to the anchor via $() to find the anchor and click to hook up the handler:
$("selector_for_the_anchor").click(function() {
$("selector_for_the_form").submit();
return false;
});
Probably best to return false; to cancel the click on the anchor.
Off-topic: But note that this makes your page completely unusable without JavaScript, as well as making it confusing even for JavaScript-enabled browsers employed by users requiring assistive technologies (screenreaders, etc.). It makes the markup completely un-semantic. But since you'd said quite clearly that this was what you wanted to do...
<a id='anchor' href="javascript to submit the form" ></a>
now you can use jquery to add an event handler
$('#anchor').click(function (e) {
// do some work
// prevent the default anchor behaviour
e.preventDefault();
})
now you can style your anchor as you wish and it will act as a regular button
And what about:
<form id="formOne">
...
link here
</form>
you can use input of type image (it works as a submit button for a form) or in jquery:
$("a").click(function(event){
event.preventDefault();
$('form').submit();
})
How can I change the visibility of a control with jQuery? I have a control that its visible property to false (not css).
When I used show() function for it nothing happened, it seems that hide() and show() methods are for css set of a control, not visible property.
You can't do this with jQuery, visible="false" in asp.net means the control isn't rendered into the page. If you want the control to go to the client, you need to do style="display: none;" so it's actually in the HTML, otherwise there's literally nothing for the client to show, since the element wasn't in the HTML your server sent.
If you remove the visible attribute and add the style attribute you can then use jQuery to show it, like this:
$("#elementID").show();
Old Answer (before patrick's catch)
To change visibility, you need to use .css(), like this:
$("#elem").css('visibility', 'visible');
Unless you need to have the element occupy page space though, use display: none; instead of visibility: hidden; in your CSS, then just do:
$("#elem").show();
The .show() and .hide() functions deal with display instead of visibility, like most of the jQuery functions :)
.show() and .hide() modify the css display rule. I think you want:
$(selector).css('visibility', 'hidden'); // Hide element
$(selector).css('visibility', 'visible'); // Show element
Here's some code I use to deal with this.
First we show the element, which will typically set the display type to "block" via .show() function, and then set the CSS rule to "visible":
jQuery( '.element' ).show().css( 'visibility', 'visible' );
Or, assuming that the class that is hiding the element is called hidden, such as in Twitter Bootstrap, toggleClass() can be useful:
jQuery( '.element' ).toggleClass( 'hidden' );
Lastly, if you want to chain functions, perhaps with fancy with a fading effect, you can do it like so:
jQuery( '.element' ).css( 'visibility', 'visible' ).fadeIn( 5000 );
It's been more than 10 years and not sure if anyone still finding this question or answer relevant.
But a quick workaround is just to wrap the asp control within a html container
<div id="myElement" style="display: inline-block">
<asp:TextBox ID="textBox1" runat="server"></asp:TextBox>
</div>
Whenever the Javascript Event is triggered, if it needs to be an event by the asp control, just wrap the asp control around the div container.
<div id="testG">
<asp:Button ID="Button2" runat="server" CssClass="btn" Text="Activate" />
</div>
The jQuery Code is below:
$(document).ready(function () {
$("#testG").click(function () {
$("#myElement").css("display", "none");
});
});
The Javascript checkbox script (by ryanfait) worked beautifully when I used it at first. Then I needed to alter the form I made so that asp.net could process the form, but now the checkboxes are default.
Is there a way to alter the script to make it work on the asp:checkbox?
I call the function like so:
$(document).ready(function() {
$('input[type=checkbox]').checkbox();
});
And here is the actual javascript.
I have two different types of checkboxes on my page at the moment, one <asp:Checkbox ... /> and one <input type="checkbox" ... />. The second one gets styled, the asp checkbox doesn't...
I haven't contacted Ryan Fait yet, as I hoped this was a common "bug".
EDIT:
The way the script works is, it finds all elements with class="styled", hides it and then puts a span next to the element. Somehow in my sourcecode, for the asp:checkbox this happens too early I think. Look:
<input type="checkbox" class="styled" /><span class="styled"><input id="ctl00_contentPlaceHolderRightColumn_newsletter" type="checkbox" name="ctl00$contentPlaceHolderRightColumn$newsletter" /></span>
The span is there, visible and all, which it should not (I believe, as the first checkbox shows up in the style I want it to be, the second doesn't).
So far, I found a part of the problem. The javascript cannot change the asp checkbox somehow, but when I manually add the span the javascript is supposed to create, the checkbox doesn't work as a checkbox anymore. I added some details in my answer below.
Set an ID on your checkbox and then reference it by that ID, like so:
<asp:checkbox id="mycheck" />
Then reference it like this:
$('#mycheck').checkbox();
If that doesn't work, do what many, many web developers before you have done: download Firefox, install Firebug, and check your selector logic in the console. I find it's always easier to develop in Firefox, even when my target platform is IE.
I found part of the answer.
When I add the span the plugin creates manually like so:
<span class="checkbox" style="background-position: 0pt 0pt;"><asp:CheckBox ... /></span>
I do get the nicely looking checkbox UNDERNEATH the actual checkbox!
However, the styled box is not interactive. It doesn't change when I click it or hover over it nor does it register the click. It's basically not a checkbox anymore, just a goodlooking square. The actual asp checkbox that shows up does register clicks, but it's the ugly standard one.
<span class="checkbox" style="background-position: 0pt 0pt;"><asp:CheckBox ID="anId" runat="server" style="visibility: hidden;" /></span>
The visibility: hidden makes the "real" checkbox dissappear and leaves the goodlooking yet broken one.
Got it.
Forget about the RyanFait Solution, this one works on ALL checkboxes. :D
var boxes;
var imgCheck = 'Images/checkbox-aangevinkt.png';
var imgUncheck = 'Images/checkbox.png';
function replaceChecks(){
boxes = document.getElementsByTagName('input');
for(var i=0; i < boxes.length; i++) {
if(boxes[i].getAttribute('type') == 'checkbox') {
var img = document.createElement('img');
if(boxes[i].checked) {
img.src = imgCheck;
} else {
img.src = imgUncheck;
}
img.id = 'checkImage'+i;
img.onclick = new Function('checkChange('+i+')');
boxes[i].parentNode.insertBefore(img, boxes[i]);
boxes[i].style.display='none';
}
}
}
function checkChange(i) {
if(boxes[i].checked) {
boxes[i].checked = '';
document.getElementById('checkImage'+i).src=imgUncheck;
} else {
boxes[i].checked = 'checked';
document.getElementById('checkImage'+i).src=imgCheck;
}
}
I think that your problem could be caused by the fact that asp:CheckBox controls are automatically wrapped in a span tag by default, and setting the CssClass attribute on the asp:CheckBox control actually adds the class to the span (not the input) tag.
You can set the class on the input tag using the 'InputAttributes' as follows:
chkMyCheckbox.InputAttributes.Add("class","styled");
...
<asp:checkbox id="chkMyCheckbox" />
This should then allow you to target the checkbox with your existing JavaScript.
You don't need to use the 'type' attribute. Does the following work for you?
$(document).ready(function() {
$('input:checkbox').....etc
});