0

So let's say I am posting this form to some web service.

 <form name="myForm" id="myForm" method="post" action="https://servicelink.....etc" accept-charset="utf-8">
            <input type="hidden" name="accepturl" value="{{$ctrl.accepturl}}" ng-model="$ctrl.accepturl">
            <input type="hidden" name="callbackurl" value="{{$ctrl.callbackurl}}" ng-model="$ctrl.callbackurl">
            <input type="hidden" name="orderid" value="{{$ctrl.orderid}}" ng-model="$ctrl.orderid">
        </form>

Here is my Angular controller: (I'm using AngularJS 1.5.8 with components)

function controller(someservice) {
    var ctrl = this;
    ctrl.accepturl = $window.location.href;
    ctrl.callbackurl = "https://........";

    ctrl.placeOrder = function () {
        someservice.placeOrder(ctrl.amount).then(onOrderInitiation, onOrderInitiationError);
    }; //$http.post call is made there

    function onOrderInitiation(data) {
        ctrl.orderid = data;
        // I tried to set the input value by javascript as well with no success
        // document.getElementsByName('orderid').value = data;

        document.getElementById("flexwinSubmit").submit();
    }
}

here is the service where $http.post is done:

this.placeOrder = function(amount){
           return $http.post("/rest/.........)
               .then(function(response){
               return response.data.orderId;
           });
        };

So I have to update orderid input value in my html from the promise function data (onOrderInitiation) then submit the form. But I couldn't get it updated by any means. However ctrl.orderid is set correctly (I validated that in the logs.)

When I tried to set it the JavaScript way, the value is changed correctly -- when i console.log it. But when submitting the form, the value will not be set. 

document.getElementsByName('orderid').value = data;
Tim Grant
  • 3,300
  • 4
  • 23
  • 31
Hazu
  • 105
  • 1
  • 11
  • Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – baao Nov 29 '16 at 10:23
  • you must use ng-value not just value,that is ng-value="ctrl.orderid" – GraveyardQueen Nov 29 '16 at 10:23
  • @GraveyardQueen it doesn't make any difference :( the interesting thing when i inspect it in the browser so the value is set but not when submitting the form!! – Hazu Nov 29 '16 at 10:42
  • @baao i think it's different here as the variable is set with new value but not when submitting the form. as i mentioned when inspecting this DOM so the value is set correctly!! – Hazu Nov 29 '16 at 10:44
  • did you try checking whether you are getting the "data" from the service? – GraveyardQueen Nov 29 '16 at 11:05
  • @GraveyardQueen yeah i'm getting tha data and it's set to ctrl.order correctly but input value doesn't get updated when submitting the form. – Hazu Nov 29 '16 at 11:13
  • i think it is supposed to be {{ctrl.orderid}} not {{$ctrl.orderid}} because your controller alias in the js is "var ctrl=this" not "var $ctrl=this" – GraveyardQueen Nov 29 '16 at 11:15
  • No as i mentioned i have angular 1.5.8 with components so it has to be $ctrl.sth when binding data in html – Hazu Nov 29 '16 at 11:25
  • can you try it and see? – GraveyardQueen Nov 29 '16 at 11:26
  • I tried it. i tried it even with other inputs that works now as well and the data binding doesn't work at all then. – Hazu Nov 29 '16 at 11:34

1 Answers1

0

So i got it done by setting $timeout before submitting the form.

$timeout(function () {
                document.getElementById("myForm").submit();
            }, 200);
Hazu
  • 105
  • 1
  • 11