The following code works in Chrome Version 47.0.2526.73 but on Firefox and IE 11 doesn't work. Any ideea why
HTML:
<form action="#Url.Content("~/Account/LogOn/")" method="post" id="login_form">
<input type="text" id="username" name="username" placeholder="Username" value=""/>
<input type="password" id="password" name="password" placeholder="Password" value=""/>
<button id="btnLogin" class="btn btn-inverse pull-right" type="submit" onclick="OpenPage()">Sign In</button>
</form>
JAVASCRIPT
function OpenPage() {
$('body').empty().load('../../../Content/LoaderHtml/loader.html');
return false;
}
The code must call an ActionResult method from MVC.
EDIT: Only the onclick event get's fired in Firefox and IE (in Chrome the form also triggers the Controlller's method), if i remove the onclick event everthing works well in firefox and ie and chrome
EDIT2: I need to trigger the onclick event and also to post the form to server (The Chrome behaviour is ok, but how can i make this work even in firefox and IE).
Thanks for help!
The form contains the submit button witch is call the javascript witch is prevent the form from submit.
<button onclick="OpenPage()">Sign In</button>
On your question
The following code works in Chrome Version 47.0.2526.73 but on Firefox
and IE 11 doesn't work.
The onclick is called but not return used inline. From the moment that the OpenPage function returns false, the correct format must be onclick="return OpenPage()" and then on all browsers you have the same response, the form will not submit.
Why the one browser is act different than the others, it may be for that reason, it may be some other javascript error.
How to make it submit.
return true; on your javascript call, and set onclick="return OpenPage()"
I have a form with a file control and a separate button that causes the click event to fire on that file field. The problem is that if you click the button, then the submit button at the bottom of the page requires two clicks in IE. How do I prevent that?
In it's most simply form, here's the code:
HTML:
<form action="#">
<input type="file" id="myFile" />
<button id="myButton">** My Choose **</button>
<input type="submit" value="Submit" />
</form>
JavaScript:
$(function() {
$('#myButton').click(function(e) {
e.preventDefault();
$('#myFile').click();
});
});
A more in-depth sample at JSFiddle: http://jsfiddle.net/XPqQB/6/
In IE, clicking on the "My Choose" button will then require two clicks on "Submit" to actually post. (Usually "myFile" would be hidden, but for demo purposes I'm leaving it visible.)
Test steps:
Case 1:
Refresh page.
Click "Submit". Confirm submission (via dev tools).
Case 2:
Refresh page.
Click "Browse..." next to file input, select file.
Click "Submit". Confirm submission (via dev tools). (Sometimes even this requires two clicks!)
Case 3:
Refresh page.
Click "My Choose", select file.
Click "Submit". No action.
You can also see that in case 2 and 3 that sometimes the .click() or .submit() events are not being triggered either.
A further interesting aspect of this is when there's more than one file input on the page. If there are three, and you do the above three times, you have to click on the submit button four times total to submit the page.
the solution is to use a label that points to the file input, you can apply any styling to the label and it will work
<label for="myFile">** My Label **</label><br/>
<input type="file" id="myFile" name="myFile" />
as i understand it is caused by IE9 security restrictions
How can I disable safari from saving a user/pass from a form using html or javascript?
I've had this issue that came up with safari 7.0.2 where you can save a user/pass to a keychain and when you goto that same form it automatically overrides those fields? Personally I think this is horrible behavior. I don't think fields should ever be overridden.
I've created an isolated version that you can demo the issue here.
http://dev.davidsalazar.com/issues/safari-autofill/
Steps to replicate (ensure you use latest safari 7.0.2)
Type and user/pass click save. It should prompt you to save to keychain, accept the save.
Now click on the link load random data and you will notice that safari will now be overriding those fields with your perviously saved fields.
Workaround: create another (fake) password field and Safari is probably confused by it - autofill will be "disabled" in this case
tested in Safari 7.0.2 and 7.0.3
demo (with red fake password): http://js.pejsa.info/~jam/safari-autofill/
<form method="post" autocomplete="off">
<input type="text" name="username" id="username" value="abc" />
<input type="password" name="password" id="password" value="def" />
<input type="submit" name="submit_btn" value="Save" />
<input type="password" id="fakePassword"
style="border:0;width:10px;height:10px;background-color:red;" />
</form>
it is not possible due to new behavior in all browsers - autocomplete="off" is now ignored
for details see http://raesene.github.io/blog/2014/04/17/changing-times-the-end-of-autocomplete-equals-off/
i search this problem before day for my project. and finally i found the solution wit plug-in below.
this plug-in work structure like this. It get your input and clone it.
Use this clone and create same input properties and clone it another hidden input. After that remove your orginal input and put hidden and cloned input same position.
It's reason that. Modern browser (has keychain) control input (type password) when page loaded and mapped over DOM. After page load plug-in get input and clone and remove orginal input. this operation changes DOM mapping. So brovser cannot access this control when page redirect. So don't suggest yo to save password.
You can use this plug-in for this problem.
Notes:
If you use another plug-in like me. Forexample jquery-keyboard plug-in for password secure enter. you shoul modify your initkeyboard method. becasue keyboard control your input and init near this input. you could change this init method like below
init keyboard changing
before
var _inputwidth = $(elm).parent().find('input').width();
after
var _inputwidth = $(elm).parent().find('input[type=text],input[type=password]').width();
because plug-in output like this
<input type="hidden" id="txtPass" name="txtPass" spellcheck="false" autocomplete="off">
<input type="text" id="txtPass" name="txtPass" spellcheck="false" autocomplete="off">
If you have any keypress or keydown event initialize for this input put this codes after plug-in init. because this plug-in change DOM mapping
this plug-in usage like below
$('input[type=password]').disableAutocomplete();
this is creator desctiption
This jQuery plug-in enforces the autocomplete=off HTML attribute on
password (and other) fields. Recent browsers have chosen to ignore
this attribute in favor of user preferences. However, some financial
(and other) institutions may have good reasons to enforce this
practice.
jQouery Disable AutoComplete
Old comment
I have a page with 2 inputs. one of these input type password, other text (username password form). Safari doesn't work with autocomplete="off". I use for this problem two inline hidden input. These inputs have generic names as below. My original username password input has different name so Safari first looks for a keychain to get or set these inputs. You can use this solution to prevent Safari using a keychain for your secure page.
<input type="text" name="Username" style="display:none;"/>
<input type="password" name="Password" style="display:none;" />
I have a huge and annoying problem.
I'm using jQuery (version 1.7.1, it's not an option to update jQuery or the browser).
I added some Javascript to handle <ctrl>+s as a submit, instead of a save.
It works perfectly well in every browser, except Opera.
In Opera, it submits, but to a new page.
If anyone has found a way to fix this, can you please provide some help? I would appreciate a lot!
This is quite an annoying bug and I use that feature a lot in the backoffices I'm developing.
Here is an example of the Javascript code used:
$(window).keydown(function(e){
if(e.ctrlKey&&e.keyCode==83)
{
e.preventDefault();//disable page saving
var a=$(':focus');//gets the focused element
if(!a.length){a=$('form:eq(0)');}else{a=a.parents('form');}//if no element is focused, gets the 1st form
a.find("input[type=button].submit, button[type=submit], input[type=submit], form a.submit").click();//triggers the click in the button
if(a.find('input[type=submit]'))a.submit();//'silly' line added as a desperate attempt, ignore it
}
});
The HTML code is a simple form like this:
<form action="#" method="POST" [target="_self"]>
<input type="text" name="fld">
<input type="submit" name="sub" value="Submit">
</form>
Using a <button type="submit"> submits to the same page AND to a new tab.
I found a solution!
This is a really UGLY hack.
This is the new Javascript:
$(window).keydown(function(e){
if(e.ctrlKey&&e.keyCode==83)
{
e.preventDefault();
var a=$(':focus');
if(!a.length){a=$('form:eq(0)');}else{a=a.parents('form');}
a.find("input[type=button].submit, form a.submit").click();
if(window.opera&&a.find('input[type=submit],button[type=submit]').length)a.submit();
else a.find("input[type=submit],button[type=submit]").click();
}
});
And the HTML must change to this:
<form action="#" method="POST" [target="_self"]>
<input type="text" name="fld">
<input type="hidden" name="sub" value="1"><!-- to validate if the form was submitted on opera -->
<input type="submit" name="sub" value="Submit">
</form>
Since the form submission works perfectly on the other browsers, we can leave the default behavior for them, changing only the way that Opera works.
As I said: it's an UGLY hack, but works.
Thank you #Bergi for your idea. I just had to adapt it.
Can someone please tell me how to submit an HTML form when the return key is pressed and if there are no buttons in the form?
The submit button is not there. I am using a custom div instead of that.
To submit the form when the enter key is pressed create a javascript function along these lines.
function checkSubmit(e) {
if(e && e.keyCode == 13) {
document.forms[0].submit();
}
}
Then add the event to whatever scope you need eg on the div tag:
<div onKeyPress="return checkSubmit(event)"/>
This is also the default behaviour of Internet Explorer 7 anyway though (probably earlier versions as well).
IMO, this is the cleanest answer:
<form action="" method="get">
Name: <input type="text" name="name"/><br/>
Pwd: <input type="password" name="password"/><br/>
<div class="yourCustomDiv"/>
<input type="submit" style="display:none"/>
</form>
Better yet, if you are using javascript to submit the form using the custom div, you should also use javascript to create it, and to set the display:none style on the button. This way users with javascript disabled will still see the submit button and can click on it.
It has been noted that display:none will cause IE to ignore the input. I created a new JSFiddle example that starts as a standard form, and uses progressive enhancement to hide the submit and create the new div. I did use the CSS styling from StriplingWarrior.
I tried various javascript/jQuery-based strategies, but I kept having issues. The latest issue to arise involved accidental submission when the user uses the enter key to select from the browser's built-in auto-complete list. I finally switched to this strategy, which seems to work on all the browsers my company supports:
<div class="hidden-submit"><input type="submit" tabindex="-1"/></div>
.hidden-submit {
border: 0 none;
height: 0;
width: 0;
padding: 0;
margin: 0;
overflow: hidden;
}
This is similar to the currently-accepted answer by Chris Marasti-Georg, but by avoiding display: none, it appears to work correctly on all browsers.
Update
I edited the code above to include a negative tabindex so it doesn't capture the tab key. While this technically won't validate in HTML 4, the HTML5 spec includes language to make it work the way most browsers were already implementing it anyway.
Use the <button> tag. From the W3C standard:
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.
Basically there is another tag, <button>, which requires no javascript, that also can submit a form. It can be styled much in the way of a <div> tag (including <img /> inside the button tag). The buttons from the <input /> tag are not nearly as flexible.
<button type="submit">
<img src="my-icon.png" />
Clicking will submit the form
</button>
There are three types to set on the <button>; they map to the <input> button types.
<button type="submit">Will submit the form</button>
<button type="reset">Will reset the form</button>
<button type="button">Will do nothing; add javascript onclick hooks</button>
Standards
W3C wiki about <button>
HTML5 <button>
HTML4 <button>
I use <button> tags with css-sprites and a bit of css styling to get colorful and functional form buttons. Note that it's possible to write css for, for example, <a class="button"> links share to styling with the <button> element.
Here is how I do it with jQuery
j(".textBoxClass").keypress(function(e)
{
// if the key pressed is the enter key
if (e.which == 13)
{
// do work
}
});
Other javascript wouldnt be too different. the catch is checking for keypress argument of "13", which is the enter key
I believe this is what you want.
//<![CDATA[
//Send form if they hit enter.
document.onkeypress = enter;
function enter(e) {
if (e.which == 13) { sendform(); }
}
//Form to send
function sendform() {
document.forms[0].submit();
}
//]]>
Every time a key is pressed, function enter() will be called. If the key pressed matches the enter key (13), then sendform() will be called and the first encountered form will be sent. This is only for Firefox and other standards compliant browsers.
If you find this code useful, please be sure to vote me up!
Use the following script.
<SCRIPT TYPE="text/javascript">
<!--
function submitenter(myfield,e)
{
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return true;
if (keycode == 13)
{
myfield.form.submit();
return false;
}
else
return true;
}
//-->
</SCRIPT>
For each field that should submit the form when the user hits enter, call the submitenter function as follows.
<FORM ACTION="../cgi-bin/formaction.pl">
name: <INPUT NAME=realname SIZE=15><BR>
password: <INPUT NAME=password TYPE=PASSWORD SIZE=10
onKeyPress="return submitenter(this,event)"><BR>
<INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>
I use this method:
<form name='test' method=post action='sendme.php'>
<input type=text name='test1'>
<input type=button value='send' onClick='document.test.submit()'>
<input type=image src='spacer.gif'> <!-- <<<< this is the secret! -->
</form>
Basically, I just add an invisible input of type image (where "spacer.gif" is a 1x1 transparent gif).
In this way, I can submit this form either with the 'send' button or simply by pressing enter on the keyboard.
This is the trick!
Why don't you just apply the div submit styles to a submit button? I'm sure there's a javascript for this but that would be easier.
If you are using asp.net you can use the defaultButton attribute on the form.
I think you should actually have a submit button or a submit image... Do you have a specific reason for using a "submit div"? If you just want custom styles I recommend <input type="image".... http://webdesign.about.com/cs/forms/a/aaformsubmit_2.htm
Extending on the answers, this is what worked for me, maybe someone will find it useful.
Html
<form method="post" action="/url" id="editMeta">
<textarea class="form-control" onkeypress="submitOnEnter(event)"></textarea>
</form>
Js
function submitOnEnter(e) {
if (e.which == 13) {
document.getElementById("editMeta").submit()
}
}
Similar to Chris Marasti-Georg's example, instead using inline javascript.
Essentially add onkeypress to the fields you want the enter key to work with. This example acts on the password field.
<html>
<head><title>title</title></head>
<body>
<form action="" method="get">
Name: <input type="text" name="name"/><br/>
Pwd: <input type="password" name="password" onkeypress="if(event.keyCode==13) {javascript:form.submit();}" /><br/>
<input type="submit" onClick="javascript:form.submit();"/>
</form>
</body>
</html>
Since display: none buttons and inputs won't work in Safari and IE, I found that the easiest way, requiring no extra javascript hacks, is to simply add an absolutely positioned <button /> to the form and place it far off screen.
<form action="" method="get">
<input type="text" name="name" />
<input type="password" name="password" />
<div class="yourCustomDiv"/>
<button style="position:absolute;left:-10000px;right:9990px"/>
</form>
This works in the current version of all major browsers as of September 2016.
Obviously its reccomended (and more semantically correct) to just style the <button/> as desired.
Using the "autofocus" attribute works to give input focus to the button by default. In fact clicking on any control within the form also gives focus to the form, a requirement for the form to react to the RETURN. So, the "autofocus" does that for you in case the user never clicked on any other control within the form.
So, the "autofocus" makes the crucial difference if the user never clicked on any of the form controls before hitting RETURN.
But even then, there are still 2 conditions to be met for this to work without JS:
a) you have to specify a page to go to (if left empty it wont work). In my example it is hello.php
b) the control has to be visible. You could conceivably move it off the page to hide, but you cannot use display:none or visibility:hidden.
What I did, was to use inline style to just move it off the page to the left by 200px. I made the height 0px so that it does not take up space. Because otherwise it can still disrupt other controls above and below. Or you could float the element too.
<form action="hello.php" method="get">
Name: <input type="text" name="name"/><br/>
Pwd: <input type="password" name="password"/><br/>
<div class="yourCustomDiv"/>
<input autofocus type="submit" style="position:relative; left:-200px; height:0px;" />
</form>