This question already has answers here:
Any Javascript event occurring when user clicks Stop load button?
(3 answers)
Closed 6 years ago.
Say I have an HTML form on a page with a submit button. I've attached some logic to the form submit event to change the display to show a loading icon (in addition to posting the form to the server). However, if I press escape or click the browser's stop button, the submission event will stop but right now, the loading icon won't go away.
Is it possible to attach some JS logic to the "form interrupt" event to then clear the loading icon?
window.onabort looks as though it may have been designed for this purpose, but it doesn't appear to have any browser support.
Solutions which use either JQuery or plain vanilla JS are fine.
Edit to with clarifying code example
<form action="/myServerRoute" method="post">
<input type="submit" value="Submit form" onclick="DisplayLoadingAnimation();" />
</form>
<script>
function DisplayLoadingAnimation() {
alert('Imagine this manipulates the DOM to render loading elements.');
}
function HideLoadingAnimation() {
alert('Imagine this manipulates the DOM to clear loading elements.');
}
</script>
Imagine I click the "Submit form" button but then press the browser's stop button before the server can respond. How can I make it so that HideLoadingAnimation is executed when this happens?
The basic structure for something like this is. When button is clicked, register a listener for keypress on the document ( make sure to remove it later if it is not needed ). The keypress event can check for which key is pressed ( you can add the code ) and then modify the html appropriately. Then if the key is pressed the listener should be removed.
There isn't a cross browser way to determine the stop button was clicked. IE has onstop event though, webkit doesn't support this.
function mySubmit( event ){
event.preventDefault();
document.querySelector('button').innerHTML = "Loading";
listenForEscapeAndStop();
}
function listenForEscapeAndStop(){
var reference = document.addEventListener("keyup", function(){
document.querySelector('button').innerHTML = "My Button";
document.removeEventListener("keyup", reference);
});
document.onstop = function(){ // IE only
document.querySelector('button').innerHTML = "My Button";
};
}
<button onclick='mySubmit( event )'> My Button </button>
Related
Hello Stackoverflow!
I am experimenting with getting a chrome extensions cript to click a page button to trigger an AJAX request, however it would seem that physically clicking said button is not the same as using the following:
document.getElementsByTagName('input')[10].click();
the results of the getElements line is this:
<input type="submit" value="Continue ...">
Using document.forms sort of works, but unfortunately reloads the page, which is not what happens when the Ajaxrequest is fired by the click event.
document.forms[1].submit();
Calling the form returns the following:
<form
action="/battle.php" method="post" name="2913" id="2913" onsubmit="get('/battle.php', '', this);
disableSubmitButton(this);
return false;">…</form>
Doesn't seem obvious to a beginner programmer like me, why using the .click(); in F12 console (chrome) would be any different from the physical click. Also i have verified (sorf of) that the button on the screen is in fact the one i'm calling with the getElementsByTagName('input').
The page reloads because the type of the button is "submit". You could attach an event handler to the "click" button that can submit the form without reloading the page. Your code will look something like this:
Using JQuery:
$('#submitButton').on('click', function(e){
e.preventDefault(); // stops default submit
$('#2913').submit(); // or the ID of your form
});
And your HTML will be :
<input type="button" value="Continue ..." id="submitButton">
This question already has answers here:
How can I get the button that caused the submit from the form submit event?
(22 answers)
Closed 7 years ago.
Basically my question is very similar to:
Click a specific submit button with JQuery
However, I am not wanting to trigger my event on the button's click, I am wanting to trigger the event on the submit, of the form - but only of a specific button (as I have multiple submit buttons).
How can this be achieved?
Basically I've got this:
$("#btnCompleteOrder").click(function(event) {
//Do stuff here
}
And it works properly - however I want that event to trigger after form validation - so on submit (on click happens before form validation). However I don't think I can do .submit() on a button.
Edit: Yes this is also similar to How can I get the button that caused the submit from the form submit event?
However none of these options worked for me and I was looking for a more elegant solution to fix the problem.
I think I understand the problem now. See if this works for you.
Add an submit button to your form if you don't have one, this is necessary for the HTML5 validation to occur.
<input id="invisibleSubmit" type="submit" class="submit" style="display:none">
Then for your button handler use this:
$('#btnCompleteOrder').click(function(e) {
//don't submit the form
e.preventDefault();
//click the submit button so the html5 validtion occurrs
$("#invisibleSubmit").click();
//do some other stuff
//really submit the form
$(this).unbind('submit').submit()
});
You can use the submit method to bind a handler to a form's submit event.
For example:
$('form').submit(function () {
// Do stuff here.
});
Substitute form for the selector matching the form element.
This approach is better than simply listening for click, as you're probably aware, because a form can be submitted in more ways than just mouse click. A form can also be submitted by hitting enter in a text field or by tabbing to a submit button and hitting the space key. Because of this, you want to bind the event handler on the form itself, not any one UI element like the submit button.
So here's the scenario-
Unlike the 3000 other questions on StackOverflow about how to INVOKE the click event on an input[type=file] element, I just want to respond to it. I'm looking for something like:
<input id="theFile" onclick="var that=this;setTimeout(function(){if(that.value){postTheForm();}}),0);" />
I'm not trying to call click() on the element, I just want to know when someone has selected a file so it we can submit the form. In IE, it works as expected, because the file dialog box sleeps the javascript thread until the user clicks Open or Cancel in the dialog. In FireFox, it seems like the dialog does not sleep the thread, and the anonymous function fires immediately - even while the dialog is still up.
I was thinking may I could use the onchange event, or something else in FireFox to simulate the IE behavior, but haven't had any luck so far. Any ideas as to how I can execute code AFTER the user clicks Open or Cancel in the dialog?
When you click the file upload tell jQuery to focus it, when you select a file and click open/cancel it will lose focus aka blur.
$(function() {
$("#fileUpload").click(function() {
$(this).focus();
});
$("#fileUpload").blur(function() {
alert("blurred");
});
});
I tested this in chrome.
use: onchange="submitForm()"
Well you could start up an interval timer to just check every 100 milliseconds or so.
$('input:file').click(function() {
var file = this, form = this.form, val = this.value, interval;
function checkValue() {
if (file.value !== val) {
cancelInterval(interval);
form.submit();
}
}
interval = setInterval(checkValue, 100);
});
Thing is, this is a little fragile because the "value" of a file input is not a complete path. However, since you're submitting the whole form anyway, the user really doesn't have a chance to click on the file element more than once.
edit — this is presuming that the "change" event really isn't working for you; I don't have Firefox available at the moment to see.
I have an <input type=text> with focusout event handler
I have a <button> with click event handler
Focusout checks whether format in input box is correct. It does so by testing input value against a regular expression. If it fails it displays a message (a div fades-in and -out after some time) and refocuses my input by calling
window.setTimout(function() { $(this).focus(); }, 10);
since I can't refocus in focusout event handler. focusout event can't be cancelled either. Just FYI.
Click collects data from input elements and sends it using Ajax.
The problem
When user TABs their way through the form everything is fine. When a certain input box failes formatting check it gets refocused immediately after user presses TAB.
But when user doesn't use TAB but instead clicks on each individual input field everything works fine until they click the button. focusout fires and sets time-out for refocusing. Since time-out is so short focusing happens afterwards and then click event fires and issues an Ajax request.
Question
I have implemented my formatting check as an independent jQuery plugin that I want to keep that way. It uses .live() to attach focusout on all input fields with a particular attribute where format regular expression is defined.
Data submission is also generic and I don't want to make it dependant on formatting plugin. They should both stay independent.
How can I prevent click event from executing without making these two plugins dependant?
Example code I'm fiddling with
After some searching I've seen that all major browser support document.activeElement but I can't make it work in Chrome. FF and IE both report this being the active element, but Chrome always says it's BODY that is active even though click fired on the button element.
Check this code http://jsfiddle.net/Anp4b/1/ and click on the button. Test with Chrome and some other browser and see the difference.
You could use a flag...
Live demo: http://jsfiddle.net/Anp4b/4/
So your question is:
How can I prevent click event from executing without making these two plugins dependent?
Well, you obviously cannot prevent the click event. If the user wants to click the button, he will, and the click event will trigger. There's nothing you can do about that.
So the answer to the above question is: You cannot.
Based on the current conditions, you have to - inside the click handler - retrieve the validation result, and based on that result, decide if form submission should or should not occur.
JS Code:
$("#Name").focusout(function(){
var that = this;
valid = this.value.length ? true : false;
!valid && window.setTimeout(function() {
$(that).focus();
}, 0);
});
$("#Confirm").click(function(e) {
if ( !valid ) { return false; }
e.preventDefault();
alert('AJAX-TIME :)');
});
HTML Code:
<input type="text" id="Name">
<button id="Confirm">OK</button>
Is there are reason you use .focusout instead of .blur?
Using a flag is a good idea, but I would rather use a class on the element. By using classes to determine the state you can also style it accordingly. Here's my example based on your fiddle.
Another solution that hopefully gives the result you are looking for.
1) Create a named click handler:
var clickHandler = function(e){ /** submit form or whatever you want to do**/ };
$("button").click(clickHandler);
2) Add the following to the focusout event when it's failing validation:
$("button").unbind("click", clickHandler).one("click", function(){ button.click(clickHandler); return false;});
You can find an example of this here.
When you have more than one submit button in a form, is there a way to know which one fired the onsubmit event without adding code to the buttons themselves?
Edit: I need to do the check on the client-side, i.e. with JavaScript.
The "submit" event is not fired by the button, but its fired by the "form". A quick test proves this:
<form id="myform">
<input id="email" type="text" value="1st Email" />
<input id="action1" type="submit" value="Action 1" />
<input id="action2" type="submit" value="Action 2" />
</form>
<script type="text/javascript">
document.getElementById("myform").onsubmit = function(evt) {
var event = evt || window.event;
alert(event.target.id); // myform
alert(event.explicitOriginalTarget.id); // action2 (if action2 was clicked)
// but only works in firefox!
}
</script>
Although in firefox, you can use event.explicitOriginalTarget property on event to get the input (submit) that was clicked causing the submit event to be fired. (if you want to know)
So best options for you are:
Have a different value to your submit buttons OR
Have those as normal buttons and click handlers to them via javascript.
There is a submitter attribute on SubmitEvent object.
See example:
<!DOCTYPE html>
<html>
<body>
<form action="./test.html" onsubmit="myFunction(event)">
Enter name: <input type="text" name="fname">
<button id="firstButton" type="submit">Button 1</button>
<button id="secondButton" type="submit">Button 2</button>
</form>
<script>
function myFunction(event) {
// This should log id of the button that was used for submition
console.log(event.submitter.id);
// Prevent sending the form (just for testing)
event.preventDefault();
}
</script>
</body>
</html>
See https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter
Does having an event listener on each button count as adding code? Otherwise, there's no way to see what button triggered the submit event, unless you want to get down and dirty and calculate the mouse position during the event and compare it to button positions.
Otherwise, the next best thing would be to assign an event handler for the click event of button and assign the name of that button to a variable you can check in the form's submit event.
There are a couple of ways that I can think of.
You can use different values, and your unobtrusive javascript can help with it.
One discussion on this approach (using different values for each button) is here:
http://www.chami.com/tips/internet/042599I.html
I tend to go with using different name attributes for each button.
A blog on that is here: http://www.codetoad.com/javascript/multiple.asp
I don't follow either of these, which approach will work best is going to depend on different factors, such as, are you handling the submit buttons in javascript, or will the server get the form, then have to figure out what the user wanted.
Personally, I prefer to use the ajax approach, now, where I just attach events to the buttons after the page is loaded, using unobtrusive javascript, and then based on the user choice call out to the correct function, but that depends on whether you can add a script link to the html page.
UPDATE:
In order to do this with javascript, the simplest way is to attach an event on the click of the button, and then look at the name to decide how to handle it.
In actuality, the form never truly has to be submitted to the server, but you can handle everything in the background by wrapping up the parameters (options) and sending them to the server, and let the user know the results.
Sorry to warm up this very old thread. The question hadn't been answered here but only approaches for practical workarounds have been given here before.
But the event-object does carry information about which object has initiated it. In a handler b4submit(e) you can get the submit-button like this:
function b4submit(e) {
var but = e.originalEvent.explicitOriginalTarget;
...
}
And but is an HTML Object with all the attributes you've assigned it with, like name, id, value etc.
I came across this after some debugging, and I thought it might be of a wider interest as a clean solution for this issue.
For me the simplest option that worked for me is to use document.activeElement if you want to get the id use document.activeElement.id if you want to get the text content you can simply put document.activeElement.textContent
const onSubmit = () => {
console.log('document.activeElement', document.activeElement.id)
if (document.activeElement.textContent === 'Suivant') {
handleNext()
return
}
if (document.activeElement.textContent === 'Confirmer') {
console.log('Payer')
return
}
}