This is related to How is the default submit button on an HTML form determined?
In my web app's design the user should be able to directly submit the form by pressing enter in a text input, in which case, none of the buttons in that form should be submitted as they have other functions. To avoid the default button problem, I handles the keydown event and submitted the form programmatically.
When I tested this in Firefox, it seems the first button in the form is pressed on the enter key. The simple solution is to disable that button in the keydown event handler.
Chrome, however, seems to 'intelligently' choose the first non-disabled button as the default button and will submit using that button even if that button will be immediately disabled by the keydown handler.
The effect can be tested using this jsFiddle. In Firefox, after the "first" button has been disabled by the checkbox, enter press in the input will only cause one submit. In Chrome, there will always be two submits, one from keydown and the other from button press, even after both buttons have been disabled!
This forces me to either change all keydown handlers in my code to return false or handle all button clicks and check if the button is disabled. Neither seems to be good code.
Any better suggestions?
May be you can hook it on blur. Try this:
<input type="text" ... onblur="submit();" />
Related
I am working with angular TD forms. There is a form field and a submit button. The button should be disabled only if there is no values in the form. Meanwhile, chrome saves the form fields value (Username and password saving in chrome), so there are still values in the form field.But the button is disabled . But it gets enabled after clicking anywhere in the web page. How to prevent this?
The following link explained the problem in jquery. How to do the same thing in angular 7?
Enable button when browser fills data automatically
Disable the autocomplete from your form as
<form action="/..." autocomplete="off">
for more info you can refer to Disabling Chrome Autofill
I have a button in a JSP which gets disabled after the first click. This is just to prevent multiple form submission at the same time. I want to enable the button once the form is submitted. My current logic keeps the button enabled and it seems like it bypass the disable property.
Without this.disabled = false button works perfectly fine by keeping the button disabled but I also want it to be enabled once the process is finished.
<input type="submit" class="esignReports" value="Export E-Sign Information" title="This function will provide you a 30 day download of all your eSign transactions." onclick="this.disabled=true;this.value='Please wait...';document.getElementById('viewIntegrationReport').submit();this.disabled = false">
Is there anyway to do it without JS
Thanks,
I think your button actually gets disabled but it gets re-enabled automatically because the submit is async, so you don't have enough time to see it's 'disabled' state. You could put console.log(this.state) before and after the submit() call to be sure.
There's no way to get a callback on submit() calls using plain Javascript (since it is supposed to send the info and reload the page). You'll need to use jQuery if you want to re-enable the button, using callbacks.
I use this to detect enter:
<input type="submit" name=hiddenbutton value=enter style="display: none">
When this is placed before all other form elements, then I get the appropriate $_REQUEST[hiddenbutton]when enter was used to submit the form.
Except with Chrome and other Webkit-based browsers, which don't activate the first button when enter is pressed.
Is there a way to make it work on all browsers? (preferably with as little JavaScript as possible)
I would recomend adding a focus listener to make sure the user is not justdoing something completely different like typing in a word document, because some browsers will detect key clicks without focus
I've created a reset button that resets all the data on my search criteria form. I've made it so my Search buttons fires when enter is pressed, but I'm wondering:
How can I make the RESET button fire when BACKSPACE is pressed?
Thanks!
Take a look at the form's OnKeyPress event: http://msdn.microsoft.com/en-us/library/aa213952%28v=office.11%29.aspx
I'm working on a Google Chrome extension, and using for a search box, the search displays results in an inline div rather than having a submit button and going off to a different page when it is clicked.
Is there any way to detect when the "X" button is pressed at the end of the search field, i need to close the inline div when it is but I don't know how to detect if its been pressed.
I believe there isn't a way to do that. But if you can listen on the search event, that occurs when the user presses the ENTER key or clicks on the "X" button.
If you want to see if you clicked on the "x" maybe this hack is good enough? Figure out if the contents is empty. (sure this will be true if you press "enter" on empty text"
search.addEventListener('search', function(e) {
console.debug(search.value.length == 0)
}, false);