CODEWITHSUNDEEP
javascriptangularjs
Bob Barker
Bob Barker

Reputation: 236

sending old school form post requst from within angularJS

I more or less need to make this work:

 <form name="goToExchange" action="{{onExchange.data.saml_url}}" method="post">
    <input type="hidden" value="{{onExchange.data.onexchange_saml}}" name="SAMLResponse">
    <button type="submit" class="btn btn-warning btn-lg pointer">Continue application on  Healthcare.gov <i class="fa fa-arrow-right"></i>
</form>

Right now When I try to run this I get this nifty error on page load:

Error: [$interpolate:interr] Can't interpolate: {{onExchange.data.saml_url}} Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. URL: https://www.healthcare.gov/marketplace/brokerService http://errors.angularjs.org/1.3.0-beta.19/$sce/insecurl?p0=https%3A%2F%2Fwww.healthcare.gov%2Fmarketplace%2FbrokerService http://errors.angularjs.org/1.3.0-beta.19/$interpolate/interr?p0=%7B%7BonEx…3Dhttps%253A%252F%252Fwww.healthcare.gov%252Fmarketplace%252FbrokerService at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.19/angular.js:78:12 at parseStringifyInterceptor (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.19/angular.js:9163:24) at Object.interceptedExpression (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.19/angular.js:11493:22) at Scope.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.19/angular.js:12805:40) at Scope.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.19/angular.js:13079:24) at done (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.19/angular.js:8600:45) at completeRequest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.19/angular.js:8814:7) at XMLHttpRequest.xhr.onreadystatechange (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.19/angular.js:8753:11)

I am really at a loss on how to proceed. The end goal is that the user be redirected to the url with the value from the hidden input field. I tried attaching a directive onto the form that set terminal to true, but that was a dead end. Any help would be appreciated.

Upvotes: 1

Views: 252

Answers (1)

Bob Barker
Bob Barker

Reputation: 236

So it turns out that the problem is that my "old school" form was nested inside of an ng-form directive. Once I moved the form outside of the ng-form directive it worked fine. There are a few other gotcha's with angularJS not playing nicely with hidden input fields. The html snippet below will serve as a helpful guide map to anyone navigating the same challenge:

<form name="goToExchange" action="https://www.healthcare.gov/marketplace/brokerService" method="post" novalidate>
        <input type="hidden" ng-value="exchange.data.onexchange_saml" name="SAMLResponse">
    <button type="submit" class="btn btn-warning btn-lg pointer">Continue application on Healthcare.gov <i class="fa fa-arrow-right"></i></button>
</form>

Upvotes: 0

Related Questions