jqueryで動的なフォーム

lang
1<form method="post" action="confirm">
2    <div class="form-block" id="form_block[0]">
3        <!-- Closeボタン --> <span class="close" title="Close" style="display: none;">-</span>
4
5        <p>Name:
6            <input type="text" name="name[0]" id="name[0]" />
7        </p>
8        <p>Sex:
9            <input type="radio" name="sex[0]" id="sex_male[0]" value="male" checked>male
10            <input type="radio" name="sex[0]" id="sex_female[0]" value="female">female</p>
11        <p>Memo:
12            <textarea name="memo[0]" id="memo[0]" rows="3"></textarea>
13        </p>
14    </div>
15    <!-- Addボタン -->
16    <div class="form-block" id="form_add"> <span class="add" title="Add">+</span>
17
18
19    </div>
20</form>

lang
1var frm_cnt = 0;
2 var $original = '#form_block\\[' + frm_cnt + '\\]';
3 var originCnt = frm_cnt;
4 var $originVal = $("input[name='sex\\[" + frm_cnt + "\\]']:checked").val();
5
6 frm_cnt++;
7
8 $original.clone()
9     .hide()
10     .insertAfter(original)
11     .attr('id', 'form_block[' + frm_cnt + ']') // クローンのid属性を変更。
12 .find("input[type='radio'][checked]").prop('checked', true)
13     .end() // 一度適用する
14 .find('input, textarea').each(function (idx, obj) {
15     $(obj).attr({
16         id: $(obj).attr('id').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']'),
17         name: $(obj).attr('name').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']')
18     });
19     if ($(obj).attr('type') == 'text') {
20         $(obj).val('');
21     }
22 });
23 // clone取得
24 var clone = $('#form_block\\[' + frm_cnt + '\\]');
25 clone.children('span.close').show();
26 clone.slideDown('slow');
27 // originalラジオボタン復元
28 $original.find("input[name='sex\\[" + originCnt + "\\]'][value='" + $originVal + "']").prop('checked', true);
29 var removeObj = $(this).parent();
30 removeObj.fadeOut('fast', function () {
31     removeObj.remove();
32     // 番号振り直し
33     frm_cnt = 0;
34     $(".form-block[id^='form_block']").each(function (index, formObj) {
35         if ($(formObj).attr('id') != 'form_block[0]') {
36             frm_cnt++;
37             $(formObj)
38                 .attr('id', 'form_block[' + frm_cnt + ']') // id属性を変更。
39             .find('input, textarea').each(function (idx, obj) {
40                 $(obj).attr({
41                     id: $(obj).attr('id').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']'),
42                     name: $(obj).attr('name').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']')
43                 });
44             });
45         }
46     });
47 });

としたのですが
うまく動きません。
どこがまちがっていますか

行動規範の内容に同意します

回答1件

IDに[や]は利用できません。
またPHPの場合は、<input type="text" name="name[0]" id="name[0]" />とせず
<input type="text" name="name[]"/>と書けば添え字を書き換えなくても想定通りに動作するはずです。

投稿2015/08/10 15:35