Listening for a submit event from a dijit/Form/form using DojoX Mobile has stopped working in Chrome on Android. This used to work, but doesn't anymore:
<form data-dojo-type="dijit/form/Form">
<input data-dojo-type="dojox/mobile/TextBox"
name="user" placeholder="Email"> <br />
<input data-dojo-type="dojox/mobile/TextBox" placeholder="Password"
name="pass" type="password"> <br />
<button data-dojo-type="dojox/mobile/Button" type="submit">Log In</button>
</form>
on(registry.byId('loginForm'), 'submit', function (evt) {
evt.preventDefault();
if (!this.isValid()) { return; }
alert('valid submit fired');
});
After doing some digging, I've found that it started happening in Chrome 53. Testing this fiddle with the dev tools and the device emulator in Chrome 52 works, but gives this warning in the console:
A DOM Event generated from JavaScript has triggered a default action inside the browser. This behavior is non-standard and will be removed in M53, around September 2016. See https://www.chromestatus.com/features/5718803933560832 for more details.
My guess is that it's coming from a synthesized, un-trusted event within DojoX (and that Chrome page points that direction as well), since a plain <input type="submit" value="Log In"> successfully fires the event, but adding dojox/mobile/button causes it to fail.
Is this a bug that hasn't been addressed in Dojo (I've tested with 1.10.4 and 1.11.2)? Do I just need to use a workaround and have two separate listeners - one for the submit (i.e. the user hits enter) and one for the button click?
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.
I'm using HTML code like this:
<form method="post" action="#">
<input type="text" name="inputFIeld" id="someVal" value="" />
<button id="submitFun" type="submit">Dodaj</button>
</form>
The only thing I do is preventDefault on submit button click and then I make an ajax call to the server.
It works just fine on all browsers except chrome. Autocomplete on chrome just doesn't work.
I find a link on chrome site :
Chrome : You should have to activate autocomplete :
https://support.google.com/chrome/answer/142893?hl=en
I am writing a very simple web app with three text inputs. The inputs are used to generate a result, but all the work is done in Javascript, so there is no need to submit a form. I'm trying to find a way to get the browser to store input values for autocomplete as it would if they were in a form that was submitted.
I have tried giving the inputs autocomplete="on" manually, but without a form to submit, the browser has no way of knowing when it should store the values, so this has no effect.
I have also tried wrapping the inputs in a form that has onSubmit="return false;", but preventing the form from actually submitting appears to also prevent the browser from storing its inputs' values.
It is of course possible to manually use localStorage or a cookie to persist inputs and then generate autocomplete hints from those, but I'm hoping to find a solution that taps into native browser behavior instead of duplicating it by hand.
Tested with Chrome, IE and Firefox:
<iframe id="remember" name="remember" class="hidden" src="/content/blank"></iframe>
<form target="remember" method="post" action="/content/blank">
<fieldset>
<label for="username">Username</label>
<input type="text" name="username" id="username" value="">
<label for="password">Password</label>
<input type="password" name="password" id="password" value="">
</fieldset>
<button type="submit" class="hidden"></button>
</form>
In your Javascript trigger the submit, e.g. $("form").submit(); $("#submit_button").click() (updated from comments)
You need to return an empty page at /content/blank for get & post (about:blank didn't work for me but YMMV).
We know that the browser saves its information only when the form is submitted, which means that we can't cancel it with return false or e.preventDefault()
What we can do is make it submit the data to nowhere without reloading a page. We can do that with an iframe
<iframe name="💾" style="display:none" src="about:blank"></iframe>
<form target="💾" action="about:blank">
<input name="user">
<input name="password" type="password">
<input value="Login" type="submit">
</form>
Demo on JSfiddle (tested in IE9, Firefox, Chrome)
Pros over the currently accepted answer:
shorter code;
no jQuery;
no server-side page loaded;
no additional javascript;
no additional classes necessary.
There is no additional javascript. You normally attach an handler to the submit event of the form to send the XHR and don't cancel it.
Javascript example
// for modern browsers with window.fetch
document.forms[0].addEventListener('submit', function (event) {
fetch('login.php', {
method: 'post',
body: new FormData(event.target))
}).then(r => r.text()).then(() => { /* login completed */ })
// no return false!!
});
No-javascript support
Ideally, you should let the form work without javascript too, so remove the target and set the action to a page that will receive your form data.
<form action="login.php">
And then simply add it via javascript when you add the submit event:
formElement.target = '💾';
formElement.action = 'about:blank';
I haven't tested this, but it might work if you submit the form to a hidden iframe (so that the form is actually submitted but the current page is not reloaded).
<iframe name="my_iframe" src="about:blank"></iframe>
<form target="my_iframe" action="about:blank" method="get">...</form>
---WITHOUT IFRAME---
Instead of using iframe, you can use action="javascript:void(0)", this way it doesn't go to another page and autocomplete will store the values.
<form action="javascript:void(0)">
<input type="text" name="firstName" />
<button type="submit">Submit</button>
</form>
Maybe you can use this Twitter Typeahead...is a very complete implementation of a autocomplete, with local and remote prefetch, and this make use of localStorage to persist results and also it show a hint in the input element...the code is easy to understand and if you don't want to use the complete jquery plugin, I think you can take a look of the code to see how to achieve what you want...
You can use jQuery to persist autocomplete data in the localstorage when focusout and when focusin it autocompletes to the value persisted.
i.e.
$(function(){
$('#txtElement').on('focusout',function(){
$(this).data('fldName',$(this).val());
}
$('#txtElement').on('focusin',function(){
$(this).val($(this).data('fldName'));
}
}
You can also bind persistence logic on other events also depending on the your application requirement.
For those who would rather not change their existing form functionality, you can use a second form to receive copies of all the form values and then submit to a blank page before your main form submits. Here is a fully testable HTML document using JQuery Mobile demonstrating the solution.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<form method="post">
<input type="text" name="email" />
<input type="submit" value="GO" onclick="save_autofill(this);" />
</form>
<script>
function save_autofill(o) {
$(':input[name]', $('#hidden_form')).val(function () {
return $(':input[name=' + this.name + ']', $(o.form)).val();
});
$('#hidden_form').find("input[type=submit]").click();
}
</script>
<iframe name="hidden_iframe" style="display:none"></iframe>
<form target="hidden_iframe" id="hidden_form" action="about:blank" style="display:none">
<input type="text" name="email" />
<input type="submit" />
</form>
</body>
</html>
The save_autofill function just needs to be called on your main form submit button. If you have a scripted function that submits your form, place that call after the save_autofill call. You must have a named textbox in your hidden_form for each one in your main form.
If your site uses SSL, then you must change the URL for about:blank with https://about:blank.
From what i searched.. it seems you need to identify the names. Some standard names like 'name', 'email', 'phone', 'address' are automatically saved in most browser.
Well, the problem is, browsers handle these names differenetly. For example, here is chrome's regex:
first name: "first.*name|initials|fname|first$"
email: "e.?mail"
address (line 1): "address.*line|address1|addr1|street"
zipcode: "zip|postal|post.*code|pcode|^1z$"
But chrome also uses autocomplete, so you can customize the name and put an autocomplete type, but i believe this is not for custom fields..
Here is chrome's standard
And it's another thing in IE, Opera, and Mozilla. For now, you can try the iframe solution there, so you can submit it. (Maybe it's something semi-standard)
Well, that's all i can help.
Make sure you're submitting the form via POST. If you're submitting via ajax, do <form autocomplete="on" method="post">, omitting the action attribute.
you can use "." in both iframe src and form action.
<iframe id="remember" name="remember" style="display:none;" src="."></iframe>
<form target="remember" method="post" action=".">
<input type="text" id="path" size='110'>
<button type="submit" onclick="doyouthing();">your button</button>
</form>
I'm trying to find a cross browser compatible way of picking out the id attribute of a button that is clicked during a form submit that has two different submit buttons. I was able to accomplish this for FireFox with the following, but it won't work in IE 8 or Chrome because they don't support explicitOriginalTarget.
$("#postForm, #dialogPostForm, #pastPostForm").live('submit', function(event) {
event.preventDefault();
if (event.originalEvent.explicitOriginalTarget.id === 'pastPosts'){
...SNIP...
Can someone suggest a cross browser compatible way to do this?
UPDATE I've tried using the answer from How can I get the button that caused the submit from the form submit event?, but I'd like to use the .live jquery method and use the event object to select the originating input submit id.
UPDATE Here is my form that I am trying to get the originating submit button id from:
<form id="postForm" action="{% url account_tracker mashup.pk %}?fuzzy=true" method="post">
<div class="mygoal">Update Your Progress: {{ form.post }}
<input type="submit" value="+ 1" class="formbtn" style="font-size:18px;"/>
<input type="submit" value="This week" style="font-size:18px;" id="pastPosts" class="formbtn"/>
<span id="result" class="results"></span>
</div>
</form>
UPDATE I came up with my own solution. Add an onclick attribute that adds a "name" attribute to the form. Then in the form processing check if the form name is "past" and do something with it then remove the attribute after the form is finished processing. This works on all browsers as far as I can tell.
<input type="submit" value="This week" style="font-size:18px;" id="pastPosts" class="formbtn" onclick="$('#postForm').attr('name', 'past');" />
There is no alternative.
That is a Firefox-only property.
This is a really old question and needs to be answered.
I've Googled about this and found a solution on http://www.webmuse.co.uk/blog/using-forms-with-multiple-submit-buttons-and-jquery-events/
Basically, try to get the focused element.
An example:
(function($){
$(document).ready(function(){
$('#user_form').submit(function(event){
event.preventDefault(); //stops submission
$('#name_submit')
.text(
//searches all the submit buttons
$('input[type="submit"], button[type="submit"]',this)
.filter(':focus') //finds the focused one
.attr('name') //takes the name
);
});
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<form action="#" id="user_form">
<input type="email" placeholder="Email"/><br>
<input type="password" placeholder="Password"/><br>
<input type="submit" name="login" value="Login"/>
<input type="submit" name="register" value="Register"/>
</form>
<br>
Clicked submit name: <span id="name_submit">(none)</span>
I've tested this and it works in IE7 and Firefox (at least the current version).
Given:
<div id="parent">
<div id="child">
clicky
</div>
</div>
We can apply the following logic: (UPDATED)
$('#parent').live('click', function(e){
var target = e.originalEvent || e.originalTarget;
console.log($(target.srcElement || target.originalTarget).attr('id'));
});
This gives me 'child' in Chrome, IE9, and FF8 if I click on child.