Cross domain form post not working

[Sadha Sivam]

Hi All,

As per http://www.html5rocks.com/en/tutorials/cors/     this link mentions we can make cross domain request as simple form POST.

so, In my angular app(SPA), when navigating to following page, browser should change the url to https://otherdomain.com/processRequest

crossdomainreq.html

------------------------------

<div class="col-md-9">

        <form method="post" action="https://otherdomain.com/processRequest" name="f1">

          <table border="1">

            <tbody>

              <input type="hidden" name="ORDER_ID" value="645783663">

              <input type="hidden" name="CUST_ID" value="makeb42499">              

            </tbody>    

          </table>          

        </form>

        <script type="text/javascript">document.f1.submit();</script>

</div>  

but, when navigating to this page, Form submit request is NOT logged in chrome and browser url also not changing.

Not sure why this cross domain post request is not working. Please suggest me what i can do for this.

Thanks in Advance.

    

[Sander Elias]

Hi Sadha,

If you want to use form's in this way, don't load angular. If you do this inside angular, the form directive will prevent this form from being submitted.

What you should do is study angular, and how to handle forms with angular.

Regards

Sander

[Sadha Sivam]

Thanks for the reply Sander.

I have changed my experiment to use directives. but still not working.

html

------------

<form method="post" action="https://otherdomain.com/processRequest" name="f1" class="auto-submit" ng-controller="iController">

          <table border="1">

            <tbody>

              <input type="hidden" name="ORDER_ID" value="645783663">

              <input type="hidden" name="CUST_ID" value="makeb42499">              

            </tbody>    

          </table>          

 </form>

directive:

---------------

angular.module('formtest').directive('autoSubmit', ['$timeout',

function($timeout) {

return {

     restrict: 'C',

     link: function(scope, elem, attrs) {

$timeout(function() {

elem.find('form').submit(); 

              });      

   }

};

}

]);

[Sadha Sivam]

Thanks for the reply Sander. 

(Pls ignore previous post)

I have changed my experiment to use directives. but still form auto submit not working.

html

------------

<form method="post" action="https://otherdomain.com/processRequest" name="f1" class="auto-submit" ng-controller="iController">

          <table border="1">

            <tbody>

              <input type="hidden" name="ORDER_ID" value="645783663">

              <input type="hidden" name="CUST_ID" value="makeb42499">              

            </tbody>    

          </table>          

 </form>

directive:

---------------

angular.module('formtest').directive('autoSubmit', ['$timeout',

function($timeout) {

return {

     restrict: 'C',

     link: function(scope, elem, attrs) {

$timeout(function() {

elem.find('form').submit(); 

              });       

    }

};

}

]);

but when i add <input type="submit"> in html, on click of submit button, cross domain form post working.

Please let me know how i can do this auto form submit.

Thanks in Advance.

[Sander Elias]

Hi Sadha,

You are trying to shoehorn conventional html-forms into a frameworks that as a large part of its design is to avoid this.

If you want to do this in a modern Spa like way you do something in your code like:

$http.post("https://otherdomain.com/processRequest",{"ORDER_ID":"645783663", "CUST_ID": "makeb42499"}
   .then(function (result) {
      console.log(result, result.data)
   });

However, this will not redirect you to the new page, if that is your goal, use the $location service. 

Regards

Sander

[Sadha Sivam]

Thanks Sander.

My requirement is - should redirect to the page (mentioned in action attr) with cross domain POST method.

I'm not sure how $location service could be used for cross domain POST redirection.

Please clarify.

Thanks in Advance.

[Sander Elias]

Well, if that's the requirement, just don't use angular. Do it by plain JS.

<form action='blah' on-load='this.submit();'>

Or something similar to that. (not sure that this is 100% working. This kind of tricks is decades ago in my past!)

Regards

Sander

[Sadha Sivam]

Thanks Sander.

After changing link function like following, it works.

 link: function(scope, elem, attrs) {

$timeout(function() {

elem[0].submit(); 

              });