.jsを使用して各divから値を取得する方法は？

Question

実行時に動的に作成されたフォームからデータを保存しようとしています。私は、私はこのようなクラスでHTMLを追加するという考えだの.js

で筋金入りのnoobだと検討中

てください：

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

を...たびにユーザーがクリックブトン。

これはすばらしいですが、これらのdivの各 からangle/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> 

角度コード

Answer 1

私は角度に慣れていませんが、jQueryを使用している場合は、serializeArray()メソッドを使用してフォームデータを取得してください。

.serializeArray()

説明：は名前と値の配列としてフォーム要素のセットをコードします。

ちょうどあなたのinput要素にname属性を追加してください。

あなたのform要素が動的に作成されているので、イベントを委任することによって、サブミットイベントハンドラを追加することができます。 submitイベントがtriggertされるたびに

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

フォームデータをシリアル化するために、あなたのgetValues関数にイベントターゲットを渡すことができます。

ここでは純粋なjQueryの例を参考にしてください。このDemo .Iと

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

Answer 2

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

チェックは、これがねえ