jQueryでフォームを動的に追加する際、value属性が空欄になる問題
Q&A
Closed
解決したいこと
Qiita内の以下の記事を参考に、jQueryでフォームの動的追加を試みました。
https://qiita.com/SiskAra/items/5f4bc7ee4e598b863add
追加はできたものの、ラジオボタンのvalue属性が空欄のままコピーされてしまいます。
複製元であるラジオボタンのvalue属性もコピーする方法を教えてください。
よろしくお願いいたします。
追加後のvalue属性が空欄のまま
<ul class="radio_btn">
<li>
<label class="radio">
<input type="radio" name="condition[]" id="condition_選択肢01" value="">
<p>選択肢01</p>
</label>
</li>
<li>
<label class="radio">
<input type="radio" name="condition[]" id="condition_選択肢02" value="">
<p>選択肢02</p>
</label>
</li>
<li>
<label class="radio">
<input type="radio" name="condition[]" id="condition_選択肢03" value="">
<p>選択肢03</p>
</label>
</li>
</ul>
<ul class="radio_btn">
<li>
<label class="radio">
<input type="radio" name="guarantee[]" id="guarantee_テスト01" value="">
<p>テスト01</p>
</label>
</li>
<li>
<label class="radio">
<input type="radio" name="guarantee[]" id="guarantee_テスト02" value="">
<p>テスト02</p>
</label>
</li>
<li>
<label class="radio">
<input type="radio" name="guarantee[]" id="guarantee_テスト03" value="">
<p>テスト03</p>
</label>
</li>
</ul>
読み込んでいるjQuery
$(function(){
// フォームカウント
var frm_cnt = 0;
// clone object
$(document).on('click', 'span.add', function() {
var original = $('#form_block\\[' + frm_cnt + '\\]');
var originCnt = frm_cnt;
var originVal = $("input[name='condition\\[" + frm_cnt + "\\]']:checked").val();
var originVal = $("input[name='guarantee\\[" + frm_cnt + "\\]']:checked").val();
frm_cnt++;
original
.clone()
.hide()
.insertAfter(original)
.attr('id', 'form_block[' + frm_cnt + ']') // クãƒãƒ¼ãƒ³ã®id属性を変更。
.find("input[type='radio'][checked]").prop('checked', true)
.end() // 一度é©ç”¨ã™ã‚‹
.find('input, textarea').each(function(idx, obj) {
$(obj).attr({
id: $(obj).attr('id').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']'),
name: $(obj).attr('name').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']')
});
$(obj).val('');
});
// cloneå–å¾—
var clone = $('#form_block\\[' + frm_cnt + '\\]');
clone.children('span.close').show();
clone.slideDown('slow');
// originalラジオボタン復元
original.find("input[name='condition\\[" + originCnt + "\\]'][value='" + originVal + "']").prop('checked', true);
// originalラジオボタン復元
original.find("input[name='guarantee\\[" + originCnt + "\\]'][value='" + originVal + "']").prop('checked', true);
});
// close object
$(document).on('click', 'span.close', function() {
var removeObj = $(this).parent();
removeObj.fadeOut('fast', function() {
removeObj.remove();
// 番å·æŒ¯ã‚Šç›´ã—
frm_cnt = 0;
$(".form-block[id^='form_block']").each(function(index, formObj) {
if ($(formObj).attr('id') != 'form_block[0]') {
frm_cnt++;
$(formObj)
.attr('id', 'form_block[' + frm_cnt + ']') // id属性を変更。
.find('input, textarea').each(function(idx, obj) {
$(obj).attr({
id: $(obj).attr('id').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']'),
name: $(obj).attr('name').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']')
});
});
}
});
});
});
});
以上です。
初めての質問の為、不足している点などございましたら、申し訳ございません。
お知恵をお貸しいただけますと幸いです。
0