Aleksander Dudek Aleksander Dudek - 3 months ago 14
HTML Question

How to get values from each div using .js?

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

Answer

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>

Comments