Form field values are not getting passed into JSON object correctly

Question

This is my JSFiddle : https://jsfiddle.net/inchrvndr/7pwh9p8g/

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

The values of all the cloned form elements are getting passed into JSON except for the parent whose clone is being made.

On clicking "Save" button, you can see the alert for JSON object of all form field values except for the first bordered div.

Why is this so? Please help. Thanks :)

Answer 1

try this..

UPDATE:

you have duplicate elements, like this one: id="op" there can be only one ID unique on page.. I suggest that you drop id's or generate them

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

I have solved this issue.

Here is the answered fiddle : AnswerFiddle

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

It becomes visible after cloning, that is, after clicking on, "+" button. Now, all of the before clone and after cloned form fields' values are getting passed into the JSON.