How do you send html form data using the action attribute without redirecting to another page?

Question

I'm using Angular and Plaid. I want to submit the following form, which posts the public_token to /authenticate using the 'action' attribute in the html form. How do I post the public_token to my server (/authenticate) without redirecting to a different page.

Step 2: Simple integration

Include the following markup (the and tags) in your site or web application:

-- A hidden input named public_token will be appended to this form once the user has completed the Link flow. Link will then submit the form, sending the public_token to your server. --

<form id="some-id" method="POST" action="/authenticate"></form>

<script
  src="https://cdn.plaid.com/link/stable/link-initialize.js"
  data-client-name="Client Name"
  data-form-id="some-id"
  data-key="test_key"
  data-product="auth"
  data-env="tartan">
</script>

The directions for this can be found here: https://plaid.com/docs/link/#step-1-get-your-public_key

No guidance is given on how to get the public_token from the form on the client side though it clearly states that it's safe to expose it on the client side.

C'mon guys! Any hints or theories? I'm really stuck on this. I'm sure it is something super simple but something that I'm not getting. I bet it is something idiosyncratic about html or JS and I just need something to point out for me. Please! — rashadb, Mar 08 '16 at 03:54
You are pretty specific about using the action attribute, but with angular you usually use `ng-submit="something()"` on the form. Then you can call `/authenticate` using $http or similar. https://docs.angularjs.org/api/ng/directive/ngSubmit — ippi, Mar 08 '16 at 04:40
I'm checking and working through all answers. Thanks! Will follow up soon! — rashadb, Mar 08 '16 at 04:55
Is it possible for me to get public_token and just send it to Angular $http? — rashadb, Mar 08 '16 at 05:53

omarjmh · Accepted Answer · 2016-03-08T04:47:58.077

0

you have to prevent the default action of the form: there are a couple ways to do it here are two with both jQuery and Vanilla JS:

jQuery

$('#form').submit(function (event) {
    event.preventDefault();
    window.history.back();
});

JS

if (element.addEventListener) {
    element.addEventListener("submit", function(event) {
        event.preventDefault();
        window.history.back();
    }, true);
}
else {
    element.attachEvent('onsubmit', function(event){
        event.preventDefault();
        window.history.back();
    });
}

Angular You can pass the $event object to your method, and call $event.preventDefault() on it, so that the default event wont occur:

<a href="#" ng-click="do($event)">Click</a>

// then in your controller.do($event) method
$event.preventDefault()

edited Mar 08 '16 at 04:47

answered Mar 08 '16 at 04:36

omarjmh

13,632
6
34
42

this answer does not work either. ng-click executes the form before any information has been submitted. If you copy and paste the code you will see what I mean. Submitting the form returns an object that I need to capture. Using action allows me to send it to the back end but not without redirecting the page. I'd like to send the form after action to a client side function and then use angular $http to send it to my server . . . – rashadb Mar 08 '16 at 05:31
what about this? You can call $event methods directly in your evaluated expression: `ng-click="do(); $event.preventDefault()` – omarjmh Mar 08 '16 at 05:33
I'm going to need you to be more detailed, most of the JS I write is on the server or functional with Angular/underscore so I don't know very much about the DOM or how JS works with HTML. – rashadb Mar 08 '16 at 05:42
`Click` you can have more than one JS/Angular expression in your tags – omarjmh Mar 08 '16 at 05:54
if you copy and paste the code in my question you'll see what i mean when I say that ng-click is not an option for this answer as I understand it and as you have shown. I need to get the public_token to my server without reloading the page. The way I understand best would be to send it to Angular's $http but I don't know how to grab the form via Angular after submitted in a way analogous to 'action'. Sorry this is such a pain . . . – rashadb Mar 08 '16 at 06:02

score 0 · Answer 2 · answered Mar 08 '16 at 04:42

0

Write a directive as like this and then inject this your angular application.

yourApp.directive('preventDefault', function() {
    return {
        restrict: 'AE',
        link: function(scope, element, attrs) {
            element.on('click', function(e){
                    e.preventDefault();
                });
        }
   };
});

And then Add the directive "prevent-default" in your form or any html tag that you want to stop the default behaviour as like

<form id="some-id" method="POST" action="/authenticate" prevent-default></form>

answered Mar 08 '16 at 04:42

Ahmad Sharif

4,141
5
37
49

thanks for your answer. I think that it is almost correct but there are a few points: 1) What is 'AE'? 2) Your directive prevents the page from changing but the page really just churns not turning over or settling down. 3) I'd prefer to send the form results to my angular $http but I can't figure out how to use the ng-submit; I didn't think it was an option so I did not try it or suggest it. Actually after churning for several minutes it did not work. – rashadb Mar 08 '16 at 05:03
1) 'AE' Simple means Attribute and Element. You can use either in your angular apps. Please read more from here https://docs.angularjs.org/guide/directive 2) Not clear 3) I don't know your actual problem. you can use "ng-click" instead of "ng-submit" – Ahmad Sharif Mar 08 '16 at 06:28

How do you send html form data using the action attribute without redirecting to another page?

2 Answers2