How can I tell if an HTTP form has been submitted?

Question

Let's use a simple little petition form designed to innocently gather billions of passwords:

<form action="/Petition/Sign" method="post">
    <input class="form-control password" id="Password" name="Password" type="password">
    <button type="submit" class="btn loginBtn">Sign</button>
</form>

I would like to be signaled in JavaScript code (as Angular-esque as possible) within this view when a successful post has taken place for whatever reason, the most obvious the being the 'Sign' button being clicked, but that even is only the beginning of the event I want to catch the end of.

The most simple I can think of is to create and clear a hidden input on the button's ngClick event, then poll for a fixed timeout until the value of that input is a constant one always expected back from POST requests.

NOTE: This is a tiny example of a great horde of such forms and converting then all to use Ajax calls with signaled completions is only on the very remote side of feasible and further from desirable. Unlike in other such questions I f have asked, I have no interest directly measuring the success of the call.

First of all, there isn't an "Angular-esque" form POST - form POST is a full-page event and the "end" result is an HTTP response that the browser catches to render a new page. If you are doing an Ajax POST (e.g. with `$http.post` in Angular), then the `.then`/`.catch` handler are the completion handlers. Beyond that, I'm afraid I don't understand your question — New Dev, Jul 07 '15 at 07:58
I think we need to define what " a successful post" means. If it means that the form returned data to the action address, then I don't see how this can be done purely client side. Why not just get the server to tell you? — Lucien Stals, Jul 08 '15 at 02:49

score 1 · Accepted Answer · edited May 23 '17 at 12:29

1

In pure javascript way-

var ele = [Your Form Element];
if(ele.addEventListener){
    ele.addEventListener("submit", callback, false);  //Modern browsers
}else if(ele.attachEvent){
    ele.attachEvent('onsubmit', callback);            //Old IE
}

In jquery -

  $(element).submit(function(){
      console.log('submitted);
});

Whereas in AngularJs-

There is ng-submit directive for this purpose.https://docs.angularjs.org/api/ng/directive/ngSubmit

<form ng-submit="callback()">

in controller

$scope.callback = function(){ /*...*/ };

Have a read here also - How can I listen to the form submit event in javascript?

edited May 23 '17 at 12:29

Community

1
1

answered Jul 07 '15 at 06:19

NeiL

791
8
35

The problem with all of these is that they fire at the beginning of the POST. I want my view to know when the post is finished, or aborted at worst. It seems the only solution is to wait for a hidden value to come back with form data. – ProfK Jul 07 '15 at 11:43
Seems there is no way to achieve what I want in a non-Ajax post, so you get the point for a good approach. – ProfK Jul 28 '15 at 10:32

How can I tell if an HTTP form has been submitted?

1 Answers1