How to get values from each div using .js?

Question

I'm trying to store data from form created dynamiclly at runtime.

Please take under consideration that I'm hardcore noob at .js

I got the idea to append HTML with class like this:

<div class="formElement"> some code here </div>

... each time user clicks a buton.

It's all great, but I'm stuck on getting values using angular/jquery from each of those divs and then parsing them into json format that would match viewmodel class. Can you help me with getting all of them?

The types in each div are:

select list
number input
text input

html code

<div ng-app="formExample" ng-controller="ExampleController">

    <button class="btn btn-primary" ng-controller="addRow" ng-click="addLine()">Dodaj przycisk</button>

    <form novalidate class="simple-form">
        <div class="here">
            <div class="formElement">
                Klasa:<select class="optns" ng-model="user.class">
                    <option selected value="1"> Rodzaj... </option>
                    <option value="2">2</option>
                    @*tutaj beda dodane opcje*@
                </select>
                Ilość: <input type="number" ng-model="user.number" value=""/><br />
                Uwagi: <input type="text" ng-model="user.text" value=""/><br />
            </div>
        </div>
        <input type="button" ng-click="reset()" value="Reset" />
        <input type="submit" ng-controller="addRow" ng-click="getValues()" value="Save" />
    </form>
    <pre>user = {{user | json}}</pre>
    <pre>master = {{master | json}}</pre>
</div>

angular code

var app = angular.module('formExample', []);

app.controller('ExampleController', ['$scope', function ($scope) {
  $scope.master = {};
  $scope.nrofrows = 0;

  $scope.update = function(user) {
      $scope.master = angular.copy(user);



      $scope.another = angular.copy()
  };

  $scope.reset = function() {
    $scope.user = angular.copy($scope.master);
  };

  $scope.reset();
}]);
 app.controller('addRow', function ($scope) {

        $scope.getValues = function () {




            var allInputs = $(':input');

            @* przy selected ewentualnie jeszcze zamiania :select na klase/id*@
            var selected = $(".optns option:selected").each(function ($scope) {
                $scope.arraySels.push($(this));
            });
                var quantities = $('.formElement :input').attr['number'].each(function () {
                    $scope.arrayQuants.push($(this));
                });

                var texts = $('.formElement :input').attr['text'].each(function () {
                    $scope.arrayTexts.push($(this));
                });

                alert("works" + $scope.arrayQuants);
        };

Tojo Paul Mangaly · Accepted Answer · 2016-08-30 10:44:25Z

3

<div ng-app="formExample" ng-controller="ExampleController">
 <form novalidate class="simple-form">
    <div class="here">
        <div class="formElement">
            Klasa:<select class="optns" ng-model="user.class">
                <option selected value="1"> Rodzaj... </option>
                <option value="2">2</option>
                @*tutaj beda dodane opcje*@
            </select>
            Ilość: <input type="number" ng-model="user.number" value=""/><br />
            Uwagi: <input type="text" ng-model="user.text" value=""/><br />
        </div>
    </div>
    <input type="button" ng-click="reset()" value="Reset" />
    <input type="submit"  ng-click="update()" value="Copy" />
</form>
<pre>user = {{user | json}}</pre>
<pre>master = {{master | json}}</pre>
</div>

var app = angular.module('formExample', []);

app.controller('ExampleController', ['$scope', function($scope) {
$scope.master = {};
$scope.user = {};
$scope.nrofrows = 0;

$scope.update = function(user) {
$scope.master = {};
angular.copy($scope.user, $scope.master);
};
}]);

Check with this Demo .I think this will help you

answered Aug 30, 2016 at 10:44

Tojo Paul Mangaly

1961 silver badge11 bronze badges

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

2 Comments

Aleksander Dudek Over a year ago

thx for help Paul, though it's of no use without appending new html (the buton on the top of the code)

DavidDomain Over a year ago

@Tojo - this seams to be the right solution. Thx for your help. +1

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

I am not familiar with angular, but if you are using jQuery you can simply use the serializeArray() method to get your form data.

.serializeArray()

Description: Encode a set of form elements as an array of names and values.

Just make sure to add name attributes to your input elements.

Since your form elements are dynamically create you could add a submit event handler to them by delegating the event.

$(document).on('submit', '.simple-form', function(e) {...

Whenever the submit event is triggert you can pass the event target to your getValues function to serialize the form data.

Here is a pure jQuery example, hope it helps.

$(document).on('submit', '.simple-form', function(e) {
  getValues(this);
  e.preventDefault();
})

var getValues = function (currForm) {
  var formData = $(currForm).serializeArray();
  console.log(formData);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="formExample" ng-controller="ExampleController">

  <button class="btn btn-primary" ng-controller="addRow" ng-click="addLine()">Dodaj przycisk</button>

  <form novalidate class="simple-form">
    <div class="here">
      <div class="formElement">
        Klasa:<select name="select" class="optns" ng-model="user.class">
        <option selected value="1"> Rodzaj... </option>
        <option value="2">2</option>
        @*tutaj beda dodane opcje*@
        </select>
        Ilość: <input name="num" type="number" ng-model="user.number" value=""/><br />
        Uwagi: <input name="user" type="text" ng-model="user.text" value=""/><br />
      </div>
    </div>
    <input type="button" value="Reset" />
    <input type="submit" value="Save" />
  </form>
</div>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 30, 2016 at 10:36

DavidDomain

15.3k4 gold badges44 silver badges52 bronze badges

7 Comments

Aleksander Dudek Over a year ago

Hey David! Thx for help - I implemented it and it works meaning that it does the event and function you gave, but the object array is empty (meaning it doesn't take any values from the form)

Aleksander Dudek Over a year ago

EDIT It takes value only of the first element in the form and ignores the ones added dynamiclly

DavidDomain Over a year ago

Did you add name attributes to all your input elements and the select element ?

Aleksander Dudek Over a year ago

Yep. At first I missed it (no values) but then it worked only for the first (edit) element in the form.

Aleksander Dudek Over a year ago

btw David do you think this might be beacuse the document in the js isn't the document after appending html? meaning that it isn't refreshed or sth?

|

Collectives™ on Stack Overflow

How to get values from each div using .js?

2 Answers 2

2 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related