AngularJS dynamically create and submit a form

Question

I want to create a form object and submit it inside my controller when a user performs some action. I don't want to show this form on my DOM.

I found a similar question here, but it's based on Jquery.

 $('<form action="form2.html"></form>').appendTo('body').submit();

How can do this using AngularJS. Thanks

@Ramesh Rajendran after form submit i'm gonna redirect to another url. so until that i don't want to show this on my DOM — Sachila Ranawaka, Jul 06 '17 at 07:19
Why don't you just send an asynchronous request using $http and then redirect when it resolves? — Nikolaj Dam Larsen, Jul 06 '17 at 07:21

score 0 · Answer 1 · answered Jul 06 '17 at 07:29

If you REALLY want to send a request by submitting a hidden form, you could create a directive that creates the form, submits it and then immediately removes the form from the DOM again. Like this:

app.directive('test', function(){
  return {
    restrict: 'E',
    compile: function(element){
      var form = angular.element('<form action="form2.html" method="POST"></form>');
      element.append(form);

      form[0].submit();

      form.remove();
    }
  };
});

There are other ways you could do this as well though.

But I don't see any reason why you would want to do this, when you could just use $http like this:

$http.post('form2.html');

AngularJS dynamically create and submit a form

1 Answers1