jQuery, Javascript初心者なので質問させて頂きます。
タブ切り替え要素のinput
, textarea
の要素を一度に取得して確定を押した後にappend
に入力したいと思いますがうまくいきません。
他の記述方法やシンプルに書き換えることが可能でしたらご指導頂ければと思います。
function saveField(obj) {
var thisId = obj.parentNode.parentNode.parentNode.id;
var AAInputValue = $('div[thisId]').children('#AA').find('input').val();
var AATextValue = $('div[thisId]').children('#AA').find('textarea').val();
var BBInputValue = $('div[thisId]').children('#BB').find('input').val();
var BBTextValue = $('div[thisId]').children('#BB').find('textarea').val();
var CCInputValue = $('div[thisId]').children('#CC').find('input').val();
var CCTextValue = $('div[thisId]').children('#CC').find('textarea').val();
var DDInputValue = $('div[thisId]').children('#DD').find('input').val();
var DDTextValue = $('div[thisId]').children('#DD').find('textarea').val();
var EEInputValue = $('div[thisId]').children('#EE').find('input').val();
var EETextValue = $('div[thisId]').children('#EE').find('textarea').val();
var headingOutputAA = document.createElement('h3');
headingOutput.innerText = AAInputValue;
var contentOutputAA = document.createElement('p');
contentOutput.innerText = AATextValue;
var headingOutputBB = document.createElement('h3');
headingOutput.innerText = BBInputValue;
var contentOutputBB = document.createElement('p');
contentOutput.innerText = BBTextValue;
var headingOutputCC = document.createElement('h3');
headingOutput.innerText = CCInputValue;
var contentOutputCC = document.createElement('p');
contentOutput.innerText = CCATextValue;
var headingOutputDD = document.createElement('h3');
headingOutput.innerText = DDInputValue;
var contentOutputDD = document.createElement('p');
contentOutput.innerText = DDTextValue;
var headingOutputEE = document.createElement('h3');
headingOutput.innerText = EEInputValue;
var contentOutputEE = document.createElement('p');
contentOutput.innerText = EETextValue;
var outputOuter = document.createElement('div');
outputOuter.appendChild(headingOutputAA);
outputOuter.appendChild(contentOutputAA);
outputOuter.appendChild(headingOutputBB);
outputOuter.appendChild(contentOutputBB);
outputOuter.appendChild(headingOutputCC);
outputOuter.appendChild(contentOutputCC);
outputOuter.appendChild(headingOutputDD);
outputOuter.appendChild(contentOutputDD);
outputOuter.appendChild(headingOutputEE);
outputOuter.appendChild(contentOutputEE);
var child_object = document.getElementById('field');
child_object.appendChild(outputOuter);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<ul class="nav nav-pills" role="tablitst">
<li class="active">
<a href="#a" aria-controls="a" role="tab" data-toggle="tab">A</a>
</li>
<li>
<a href="#b" aria-controls="b" role="tab" data-toggle="tab">B</a>
</li>
<li>
<a href="#c" aria-controls="c" role="tab" data-toggle="tab">C</a>
</li>
<li>
<a href="#d" aria-controls="d" role="tab" data-toggle="tab">D</a>
</li>
<li>
<a href="#e" aria-controls="e" role="tab" data-toggle="tab">E</a>
</li>
</ul>
<div class="tab-content" id="field">
<div role="tabpanel" class="tab-pane active" id="a">
<div id="AA">
<div class="free-text">
<h4>
aaaa
</h4>
<input name="heading" type="text" rows="5" cols="80">
<h5>
bbbb
</h5>
<textarea name="content" id="" cols="80" rows="5"></textarea>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="b">
<div id="BB">
<!-- free text -->
<div class="free-text">
<h4>
cccc
</h4>
<input name="heading" type="text" rows="5" cols="80">
<h5>
dddd
</h5>
<textarea name="content" id="" cols="80" rows="5"></textarea>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="c">
<div id="CC">
<div class="free-text">
<h4>
eeee
</h4>
<input name="heading" type="text" rows="5" cols="80">
<h5>
ffff
</h5>
<textarea name="content" id="" cols="80" rows="5"></textarea>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="d">
<div id="DD">
<div class="free-text">
<h4>
gggg
</h4>
<input name="heading" type="text" rows="5" cols="80">
<h5>
hhhh
</h5>
<textarea name="content" id="" cols="80" rows="5"></textarea>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="e">
<div id="FF">
<div class="free-text">
<h4>
iiii
</h4>
<input name="heading" type="text" rows="5" cols="80">
<h5>
jjjj
</h5>
<textarea name="content" id="" cols="80" rows="5"></textarea>
</div>
</div>
</div>
<ul class="list-inline">
<li><a href="#">キャンセル</a>
</li>
<li><a href="#" onclick="saveField(this);">確定</a>
</ul>
</div>