CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
Aaron Oberländer
Aaron Oberländer

Reputation: 52

Autopopulate Form in Angular Js

I am trying to find a way populate a form group with text given the click of a button. I am using angularJs,JQuery, jsPDF, and html for this. The data will be partially pre formatted, e.g. "Thank you for joining us, for any questions call this number", and also to contain JSON Data, e.g. "To, {{client.name}}". Here is the html for the form group: 

`<div class="form-group">
 <label class="control-label" for="flyer-description">Description</label>
 <textarea class="form-control" id="flyer-description"   placeholder="Insert a short description taking care of the available space">This is where Header, Body, and Footer of Letter Go! Please click corresponding button to fill this area.</textarea>
 </div>`

I would like this button, on click event, to populate this text area with desired text:

<tr><td><a ng-href="" class="btn btn-primary">Client Welcome </a></td>

Here is my controller for client info:

function ClientCtrl($scope, $http) {
$scope.clients = [];
$http.get('/client').success(function(data, status, headers, config) {
    $scope.clients = data;
    if (data == "") {
        $scope.clients = [];
    }
}).error(function(data, status, headers, config) {
    console.log("Ops: could not get any data");
});

However, unfortunately I am a little lost as to the script to use to implement the such. I believe you would need to find id of the form, then insert a given text. I am not looking for anyone to write the script for me, but to suggest ways, directives, etc.. to use.

Upvotes: 0

Views: 189

Answers (1)

Jorge Hess
Jorge Hess

Reputation: 550

Angular way:

Plunker

I made an another example in jquery, on click of the button, get the json data, and set the value of the textarea, see the plunker to view the working code:

Plunker

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <textarea></textarea>
    <button>Client Welcome</button>
  </body>

</html>

$(function() {
  $('button').on('click', function() {
    $.getJSON('test.json', function(data) {
      $('textarea').val('Thank you for joining us, for any questions call this number, to ' + data.name);
    });
  });
});

Upvotes: 1

Related Questions