Autopopulate Form in Angular Js

Question

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.

The data will be partially pre formatted, e.g. "Thank you for joining us", and also to contain JSON Data, e.g. "To, {{client.name}}". — Aaron Oberländer
– Aaron Oberländer, Commented Jun 7, 2016 at 22:25
I suspect that no one is going to be able to answer your question with so little code to review. You need to include the js controller showing where your data is coming from. Is it an http call? Is is static? You need to provide much more than what you have thus far. I will try to help you, but I can't offer any assistance given so little information. — Rani Radcliff
– Rani Radcliff, Commented Jun 7, 2016 at 22:32
I do apologize for the lack of information. I am getting my json data via http call. — Aaron Oberländer
– Aaron Oberländer, Commented Jun 8, 2016 at 0:05

Jorge Hess · Accepted Answer · 2016-06-07 22:48:39Z

1

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);
    });
  });
});

edited Jun 7, 2016 at 22:48

answered Jun 7, 2016 at 22:35

Jorge Hess

5502 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Win Over a year ago

OP attached AngularJS in the tag. If so, using jQuery to manipulate DOM is not a good practice in AngularJS.

Jorge Hess Over a year ago

I did another example in angular

Aaron Oberländer Over a year ago

To implement multiple buttons, can I give each button an id and put: $('buttonid').on('click', function() { ..... ?

Jorge Hess Over a year ago

yes, if you have the same code in your function click, it would be better you create a class to all buttons, if it's a different code you can use the id, remember, the id must be unique, please mark my answer as correct :D

Aaron Oberländer Over a year ago

I will mark as correct as soon as I can get to work. I am trying your code with one button, but unfortunately I cannot get it to work just yet.

|

Collectives™ on Stack Overflow

Autopopulate Form in Angular Js

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related