これは私のJSFiddleです：https://jsfiddle.net/inchrvndr/7pwh9p8g/フォームフィールドの値は、JSONオブジェクトに渡され取得されていない正しく
The bordered form elements get cloned on click of "+" button.
すべてのクローン化されたフォーム要素の値は、そのクローン行われている親を除いてJSONに渡さなっています。
[保存]ボタンをクリックすると、最初の枠内のdivを除くすべてのフォームフィールド値のJSONオブジェクトのアラートが表示されます。
これはなぜですか？助けてください。 感謝:)
私は、ゾルを持って生成しますこの問題に賛成しました。それは、クローニング、つまり、上のクリックした後、 "+" ボタンの後に目に見えるようになるAnswerFiddle
I added the Join Operator into the same "to-be-cloned" div and hid its div before cloning.
：ここ
は答えフィドルです。 以前のクローンとクローン後のフォームフィールドの値はすべてJSONに渡されています。
あなたのページにはまだ重複IDの男性がいますか？ –
IDを動的に生成します。重複IDはありません。あなたは "検査する"ことができます。 –
はこれを試してください。..
UPDATE：
あなたはこのような重複した要素、持っている：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);
\t 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;
\t margin-bottom: 75px;
}
.parent-border-repeat{
\t 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>Umm no。 **最初の**式LHSをデータ型の値に変換することはまだ境界内にある値はまだJSONオブジェクトには入っていません –
私はそれを非難するのは 'reduce'だと思います –
あなたの時間と努力に感謝します。私は今答えを投稿しました。あなたは参照することができます:)ありがとう！ –
代わりに、 "jsfiddle.netへのリンクはコードを伴わなければならない"という警告を表示しています。質問には、[最小で完全で検証可能な例]（https：// stackoverflow。 – Andreas
@Andreasこの問題は、コード全体を投稿する必要があるため、私はJS Fiddleを選んだのです。私はそれに取り組んできましたが、何が間違っているのか見つけられませんでした。提案していただきありがとうございます:) –
_ "コード全体を投稿する" _いいえ、[最小、完全で検証可能な例]（https://stackoverflow.com/help/mcve）。そして、最初にマークアップのエラーを修正する必要があります（フィドルの明るい赤い "もの"） – Andreas