ograkb
@ograkb (ogr akb)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

jQueryでフォームを動的に追加する際、value属性が空欄になる問題

解決したいこと

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

1Answer

$(obj).val('');で明示的にvalueを空に戻しているため、ラジオボタンのvalueも空になってしまっています。
ラジオボタンの時は空にしないような条件分岐があれば、もとのvalueを保ったままコピーできると思います。
valueという属性を持っているかどうかで分岐してみて、正しくvalueがコピーされることが確認できました。

参考:

- $(obj).val('');

+ if(!$(obj).is('[value]')){
+   $(obj).val('');
+ }
0Like

Comments

  1. 別件ですが、同じ名前の「originVal」という変数に二度代入しているため、元の値が正しく復元できていないと思います。
    違う名前の変数に退避してあげる必要があると思います。
  2. @ograkb

    Questioner

    早速のご回答ありがとうございます!
    ご教授いただきました点を修正してみたいと思います。
    また、別の問題点もご指摘いただき感謝です。
    お試した結果は後ほどご連絡させていただきます。
  3. @ograkb

    Questioner

    先程はご教授いただきありがとうございます。
    早速お試ししたところ、無事に問題が解決いたしました!
    突破口を開いていただき大変嬉しく思います。
    プロ中のプロが世の中にはいるのだな、と感動いたしました。
    この度はありがとうございました。
  4. 解決したようでよかったです!

Your answer might help someone💌