表單字段值未正確傳遞到JSON對象中

Question

這是我的JSFiddle： https ://jsfiddle.net/inchrvndr/7pwh9p8g/

The bordered form elements get cloned on click of "+" button. 

所有克隆表單元素的值都將傳遞到JSON中，但要進行克隆的父對象除外。

單擊“保存”按鈕后，您可以看到除第一個帶邊框的div以外的所有表單字段值的JSON對象警報。

為什么會這樣呢？ 請幫忙。 謝謝 ：）

Answer 1

嘗試這個..

更新：

您有重復的元素，例如： id="op" ，頁面上只能有一個唯一的ID。我建議您刪除ID或生成它們

 $( document ).ready(function() { $('#deleteRow').closest('.form-group').hide(); $('#addRow').on('click', function (e) { var len = $('.child-border').length; $('.parent-border-repeat').clone().find(':input').each(function (idx, ele) { ele.name = ele.name + len; ele.id = ele.id + len; ele.value = ''; }).end().find('.form-group').toggle(true).end() .toggleClass('parent-border-repeat child-border').hide() .appendTo('#container').slideDown('slow'); }); $('button.btn:contains("Save")').on('click', function (e) { var jsonData = $('form.form-horizontal') .find(':input:not(button)').get() .reduce(function (acc, ele) { acc[ele.id] = ele.value; return acc; }, {}); // console.log(jsonData); alert(JSON.stringify(jsonData, null, 4)); }); $('#container').on('click', '[id^=deleteRow]', function(e) { var jsonData = $(this).closest('.child-border, .parent-border-repeat') .find(':input:not(button)').get() .reduce(function (acc, ele) { acc[ele.name || ele.id] = ele.value; return acc; }, {}); $(this).closest('.child-border, .parent-border-repeat').remove(); console.log(jsonData); }); }); 

 .navbar-nav li { margin-top: 8px; margin-bottom: 8px; } .tabs-container { margin-top: 100px; margin-bottom: 75px; } .parent-border-repeat{ display: none; } .parent-border, .child-border { border: 1px solid #CCC; border-radius: 4px; padding: 15px; margin-bottom: 15px; } .btn-circle.btn-lg { width: 50px; height: 50px; padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 25px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header pull-right"> <ul class="nav navbar-nav"> <li> <button class="btn btn-md btn-success">Login</button> </li> </ul> </div> </div> </nav> <div class="container"> <div class="row tabs-container"> <div class="col-sm-offset-2 col-sm-8"> <div class="panel with-nav-tabs panel-default"> <div class="panel-heading"> <ul class="nav nav-tabs"> <li class="active"> <a href="#tab1default" data-toggle="tab">Rules</a> </li> <li> <a href="#tab2default" data-toggle="tab">Events</a> </li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1default"> <form class="form-horizontal"> <div class="form-group"> <label class="control-label col-sm-2" for="nameRules">Name:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="nameRules" name="nameRules" placeholder="Enter name"></div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="typeRules">Type:</label> <div class="col-sm-10"> <select class="form-control" id="typeRules" name="typeRules"> <option>Type1</option> <option>Type2</option> <option>Type3</option> <option>Type4</option> </select> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="descriptionRules">Description:</label> <div class="col-sm-10"> <textarea class="form-control" rows="4" cols="50" name="descriptionRules">XYZ</textarea> </div> </div> <div class="parent-border col-sm-offset-2 col-sm-10"> <div class="form-group"> <div class="col-sm-offset-10"> <button type="button" id="deleteRow" class="btn btn-danger btn-circle btn-lg"> <i class="glyphicon glyphicon glyphicon-trash"></i> </button> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="elhs">Expression LHS:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="elhss" name="elhs" placeholder="Enter LHS" name="lhs"></div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="op">Operator</label> <div class="col-sm-10"> <select class="form-control" id="opp" name="op"> <option> <=</option> <option>>=</option> <option>!==</option> <option> <</option> <option>></option> <option>==</option> </select> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="erhs">Expression RHS:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="erhss" name="erhs" placeholder="Enter RHS" name="rhs"></div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="datatype">Datatype:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="datatypee" name="datatype" placeholder="Enter datatype" name="datatype"></div> </div> </div> <div class="parent-border-repeat col-sm-offset-2 col-sm-10"> <div class="form-group"> <div class="col-sm-offset-10"> <button type="button" id="deleteRow" class="btn btn-danger btn-circle btn-lg"> <i class="glyphicon glyphicon glyphicon-trash"></i> </button> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="joinop">Join Operator</label> <div class="col-sm-10"> <select class="form-control" id="joinopp"> <option>&&</option> <option>||</option> </select> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="elhs">Expression LHS:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="elhs" name="elhs" placeholder="Enter LHS" name="lhs"></div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="op">Operator</label> <div class="col-sm-10"> <select class="form-control" id="opp" name="op"> <option> <=</option> <option>>=</option> <option>!==</option> <option> <</option> <option>></option> <option>==</option> </select> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="erhs">Expression RHS:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="erhs" name="erhs" placeholder="Enter RHS" name="rhs"></div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="datatype">Datatype:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="datatype" name="datatype" placeholder="Enter datatype" name="datatype"></div> </div> </div> <div id="container"></div> <div class="form-group"> <div class="col-sm-offset-6"> <button type="button" id="addRow" class="btn btn-success btn-circle btn-lg"> <i class="glyphicon glyphicon-plus"></i> </button> </div> </div> </form> </div> <div class="tab-pane fade" id="tab2default"> <form class="form-horizontal"> <div class="form-group"> <label class="control-label col-sm-2" for="nameEvents">Name:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="nameEvents" name="nameEvents" placeholder="Enter name"></div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="typeRules">Type:</label> <div class="col-sm-10"> <select class="form-control" id="typeRules" name="typeRules"> <option>Type1</option> <option>Type2</option> <option>Type3</option> <option>Type4</option> </select> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="descriptionEvents">Description:</label> <div class="col-sm-10"> <textarea class="form-control" rows="4" cols="50" name="descriptionEvents">XYZ</textarea> </div> </div> </form> </div> </div> </div> </div> </div> </div> <!-- /.container --> <div class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="navbar-footer pull-right"> <ul class="nav navbar-nav"> <li> <button class="btn btn-md btn-success">Save</button> </li> </ul> </div> </div> </div> </div> 

Answer 2

我已經解決了這個問題。

這是答案的小提琴： AnswerFiddle

I added the Join Operator into the same "to-be-cloned" div and hid its div before cloning.

克隆后，即單擊“ +”按鈕后，它變為可見。 現在，所有之前的克隆和克隆后的表單字段的值都將傳遞到JSON中。