For a Drupal site I've developed a rather simple module to prevent users of pressing multiple times on a submit button. When the submit button is pressed it's replaced with a small message to have some patience.
The problem in all browsers it seems to work fine with the exception of Safari.
$("input[id^='edit-submit']").click(function(e){
var message = Drupal.t('Please wait...');
$(this).hide();
$('<span>' + message + '</span>').insertAfter(this);
});
When I look into the debugger I see an attribute appearing style="display: none;" but Safari seems to ignore it. When I manually (through the developer tools) add a display:none the button disappears.
I don't know it jQuery doesn't run in Safari on form submit is related because when I add a console.log() between the click function body it is executed once (the $(this) value also points to the correct element) but it doesn't respond to any changes on that button.
It seems that from the moment you click on the submit button it is in some kind of locked state - which would also prevent double submits - but I want to be rather sure this is standard behaviour for safari then a bug that could haunt me in the future.
I've tried googling on certain keywords but I couldn't find anything documentation that describes this behaviour in Safari.
EDIT: I also tried removing (and detaching) the button on the onclick which makes the button disappear, but then the form doesn't get submitted anymore.
Try to use:
.css('display', 'none');
Related
I have an event I want to execute on key down in an input field. It does as much in Firefox. In chrome, however, it executes the event (a redirect) when I give the page any input (click, key down, etc). I can't seem to figure out why. Any ideas?
Here's the javascript:
var yum = document.getElementById("username");
var form = document.querySelector("div.resp-wrapper form[name='register']");
form.setAttribute("autocomplete", "off");
yum.addEventListener("keydown", function handler() {
window.location.href = "https://giphy.com/gifs/troll-you-mad-face-eVy46EWyclTIA";
this.removeEventListener("keydown", handler);
});
This is the page I'm working on [Link Deleted]; you can see the problem there while it's live. I'll be removing this link eventually.
Oh I guess I should probably mention that this is an invisible form field (it's a honeypot). It's between the captcha and the last visible form field. You can run a test by clicking where the field would be and pressing any key.
UPDATE: I am able to reproduce on my Windows machine; chrome version 74.0.3729.131 (Official Build) (64-bit). On my android, the behavior is the same as well (touching anywhere on the page redirects me) - version 74.0.3729.136. But was not able to reproduce on my Mac chrome version 71.0.3578.98.
Figured it out; and, of course, it was something stupid. I removed the CSS from the form field and realized that, even though I had cleared my cache and browser history, several times, that didn't prevent Chrome's autofill feature from populating that field EVERY time.
When I removed the CSS I could see the field was always populated whenever I visited the page. Chrome had been filling in my email address (oddly, considering it's not an email field). I cleared my Chrome autofill settings and now the code works as expected. It's unfortunate that the autocomplete="off" attribute doesn't prevent this. I've read that usually this attribute is moot because the browser will override it anyway.
I'm forced to use the Enter key to submit a form in automated testing (the submit button can't be targeted by an automated click event). client.Keys.ENTER works golden in all browsers... except Safari. In Safari it absolutely refuses to press Enter. Return doesn't work either. Is there some Safari Webdriver specific issue that is causing this?
UPDATE: Found the click event. It was counter intuitive and the person who made the page gave me the wrong info. Either way, still can't hit Enter, which is a problem.
The work around is using sendKeys("\n") in a form field in the form that you want to submit. This is equal to hitting the Return key. Another option may be to use submit() in a form field but I am sure the first suggestion works.
http://nycweb.io/test.html
Its html is
click
In chrome's console, if you do
document.getElementsByTagName('a')[0].click()
It will open a new page of google.com. Surprisingly, in Safari, this doesn't work. I searched around and found this page saying there is a bug with Mobile Safari which prevents the click event from being triggered. Also it lists some workarounds. I was hoping it would help when I started reading it, but it actually makes me more confused.
First of all, it says the bug only happens with Mobile Safari, but anyone with a Macbook can test from the link above that it doesn't work with Safari either; second of all, it says it only happens with "elements that aren't typically interative", and the workaround includes adding "href" to <a> to make it interative. But my test above shows that it doesn't work with <a> at all, no matter it has href or not.
The actual problem I am trying to solve is this page "http://fbnydob.applinzi.com/test.php", where you can see a warning message pushed by the Hosting company, which can only be prevented by click the little 'x'. I was trying to click it programmatically but it is an <a> even without href, so my program fails to work on Apple devices and my users keep seeing this unpleasant message.
Any workaround for this that actually works?
Could you try firing the click event?
document.getElementsByTagName('a')[0].fire('click')
This will call the click handler and close the popup window.
Based on someone's advice I added this line $('body').on('touchstart', function(event){ event.preventDefault() }) in my mobile webapp to disable the native app bouncing in iOS. It works great for disabling the bounce but gives me some weird behavior elsewhere in DOM.
Click events that don't work, etc. I was hoping to get a better understanding of what this does and how to work around it's effects elsewhere in the DOM.
Thanks!
EDIT:
I have these two lines:
$('body').on('touchstart', function(e){ e.preventDefault() };
$('#home').on('click', function(){ alert('home') };
If I comment out the preventDefault line then the #home line works. If I leave it in the #home line doesn't respond. #home is just a div nested in the body.
Any idea what could be causing this behavior? It's part of a bigger codebase so it;s hard to give you all the details but I don't even know where to start.
Thanks Again!
e.preventDefault() tells the browser that if there is a default behavior for this event on this object, then skip that default behavior.
So, for example, if you had a submit button that the default behavior was to submit a form and you had a click handler on that button that did a preventDefault(), then the browser would not submit the form when the button was clicked. A classic use of this might be when the form doesn't validate so you show the user an error message and don't want the form to be submitted to the server.
Or another example. If you set up a click handler for a link and you call e.preventDefault() in that click handler, then the browser will not process the click on the link and will not follow the href in the link.
For reasons I won't go into we need to click a submit button (as opposed to a plain button) via Javascript.
We do this by getting a handle to the submit button, then executing the .click() method on this button. This works perfectly in FireFox, but in IE6 it only works partially.
The button receives the click, and code associated with the buttons "onClick" event fires (we can observe this by watching the server-side code in the debugger) however, the page never "refreshes" the way it should when clicking a "submit" button.
Since this works in FireFox, we assume it is yet another IE6 bug, but I'm not having any luck finding a work-around. We can't simply refresh the page directly because we need it drawn as though it were drawn from the submit button POST request.
Wouldn't it be easier to get a reference to the form element and fire the submit event?
var form = document.forms[0];
form.submit();
I have the same issue in ASP.net. We must "click" the button because there is more that happens in ASP.net with a form than just the normal .submit() on the form. It has to know which button you clicked so it can match it up to the Click event on the server-side for that button.
Try using setTimeout to delay the click by 1 millisecond.