如何使用.js从每个div获取值？

Question

我正在尝试存储运行时动态创建的表单中的数据。

请考虑我是.js的顽固菜鸟

我想到了用这样的类添加HTML的想法：

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

...每次用户单击按钮时。

一切都很好，但我一直坚持从每个div中使用angular / jquery获取值，然后将其解析为与viewmodel类匹配的json格式。 您能帮我得到所有这些吗？

每个div中的类型为：

• 选择清单
• 数字输入
• 文字输入

HTML代码

<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>

角度代码

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 1

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

查看此演示 。我认为这会为您提供帮助

Answer 2

我不熟悉angular，但是如果您使用的是jQuery，则只需使用serializeArray()方法即可获取表单数据。

.serializeArray（）

说明：将 一组表单元素编码为名称和值的数组。

只要确保将name属性添加到您的input元素即可。

由于form元素是动态创建的，因此可以通过委派事件向它们添加一个提交事件处理程序。

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

每当submit事件是triggert你可以通过活动对象到您getValues函数序列化表单数据。

这是一个纯jQuery的示例，希望对您有所帮助。

 $(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>