How to get entire HTML including attributes and form values

Question

I would like to get an entire form's (or div's) HTML including values of each control. I've tried innerHtml/outerHtml. Although they give me the HTML, I'm not able to get the values for the controls.

Business scenario: I have a landing page with a placeholder ("loadHtml") for loading different html forms. Based on user request, I retrieve standard html forms from the server and load them inside "loadhtml" div and have the user entire data in the various fields. Once the user is done with data entry and clicks "Save", I would like to extract the HTML (including textboxes & checkboxes) along with the values and send it to the server and store it as an HTML form.

<div id="loadHtml"></div>

<div class="form-group">
  <div class="col-sm-offset-4">
    <button class="btn btn-success" ng-click="save()">Save</button>
   </div>
</div>

Possible duplicate of [How to get the innerHTML of an input control including the values?](http://stackoverflow.com/questions/14357222/how-to-get-the-innerhtml-of-an-input-control-including-the-values) — Heretic Monkey, Jul 07 '16 at 21:43
If you are already grabbing from the server, why not post back and save it there? — Adam Buchanan Smith, Jul 07 '16 at 21:47

score 0 · Answer 1 · answered Jul 08 '16 at 00:28

Well, If I understood well you want to get the entire HTML of another page and show it, so here's the way:

You can run a $http.get to the HTML page and show it simply using ngSanitize in your view.

Here's an example:

(function() {
  "use strict";
  angular.module('app', ['ngSanitize'])
    .controller('mainCtrl', function($scope, $http) {
      $scope.html = '';
      $scope.get_html = function() {
        $http.get('https://httpbin.org/').then(
          function(response) {
            $scope.html = response.data;
          },
          function(response) {
            console.log(response);
          });
      }
    });
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-sanitize.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <span ng-bind-html="html"></span>
  <button type="button" ng-click="get_html()">Get entire HTML</button>
</body>

</html>

How to get entire HTML including attributes and form values

1 Answers1