Q&A
id=etc_option_txt[0]とか競合していますが大丈夫ですか？
また、おなじnameなので後ろが優先されますが
いつも勉強させていただいております。
下記のようにフォーム内のselectやinputをクローンできるものを作りました。
追加ボタンを押すと最大5個まで部品がクローンされ、
削除を押すと、部品を消すことができます。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7</head> 8<body> 9 <form action="" class=""> 10 <section> 11 <input type="text" name="etc_option_txt[0]" class="form-control" id="" placeholder=""> 12 </section> 13 <section class="box" data-formno="0"> 14 <h4>フォーム<span class="no">1</span></h4> 15 <a class="deletformbox btn btn-danger text-white">削除</a> 16 <select name="fruit[0]" class="custom-select mr-sm-2"> 17 <option value="りんご">りんご</option> 18 <option value="レモン">レモン</option> 19 <option value="もも">もも</option> 20 <option value="ばなな">ばなな</option> 21 <option value="ぶどう">ぶどう</option> 22 </select> 23 <input type="text" name="etc_option_txt[0]" class="form-control" id="" placeholder=""> 24 <select name="status[0]" class="custom-select mr-sm-2 status"> 25 <option value="おいしい">おいしい</option> 26 <option value="まずい">まずい</option> 27 <option value="興味なし">興味なし</option> 28 29 </select> 30 </section> 31 <a class="addformbox btn btn-primary text-white">追加</a> 32 </form> 33 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 34 integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 35 crossorigin="anonymous"></script> 36 <script> 37 //追加 38 $('.addformbox').click(function () { 39 //クローンを変数に格納 40 var clonecode = $('.box:last').clone(true); 41 42 43 //数字を＋１し変数に格納 44 var cloneno = clonecode.attr('data-formno'); 45 46 47 if (cloneno < 4) { 48 // console.log(cloneno); 49 var cloneno2 = parseInt(cloneno) + 1; 50 var cloneno3 = parseInt(cloneno) + 2; 51 52 //data属性の数字を＋１ 53 clonecode.attr('data-formno', cloneno2); 54 55 //数値 56 clonecode.find('.no').html(cloneno3); 57 58 //name属性の数字を+1 [status] 59 var namecode = clonecode.find('select.status').attr('name'); 60 namecode = namecode.replace(/status[[0-9]{1,2}/g, 'status[' + cloneno2); 61 clonecode.find('select.status').attr('name', namecode); 62 63 //HTMLに追加 64 clonecode.insertAfter($('.box:last')); 65 } 66 67 }); 68 //削除 69 $('.deletformbox').click(function () { 70 //クリックされた削除ボタンの親のクラス名を取得 71 var size = $('.box').length; 72 // console.log(size); 73 if (size > 1) { 74 $(this).parents(".box").remove(); 75 var scount = 0; 76 77 //番号振り直し 78 $('.box').each(function () { 79 var scount2 = scount + 1; 80 81 //data属性の数字 82 $(this).attr('data-formno', scount); 83 $('.no', this).html(scount2); 84 scount += 1; 85 86 87 }); 88 } 89 90 }); 91 </script> 92</body> 93</html>
実現したいこと
js
1//name属性の数字を+1 [status] 2var namecode = clonecode.find('select.status').attr('name'); 3namecode = namecode.replace(/status[[0-9]{1,2}/g, 'status[' + cloneno2); 4clonecode.find('select.status').attr('name', namecode);
現状では要素名と属性を指定して連番を置換しています。
１つ１つの部品のname属性を指定すれば、すべてのname属性を増やすことはできますが
クラスなどで指定するのではなく、一括で[]内の数字を増やせれるようにしたいです。
一括で増やす場合はどのようにすればよいでしょうか？
よろしくお願いいたします。
追記
結果として、
部品を増やすたびにfruit[0]やstatus[0]の数字を1、2と増やしていきたいです。
上のコードではvar namecode = clonecode.find('select.status').attr('name');という風に
クラス名を指定していますが、クラス名で指定することなく
一括置換のようにすべてのname属性値の[0]を増やしたいです。
回答1件
0
ベストアンサー
フォームをクローンするなら、nameがかぶっててもどれか一つしか送られないから
nameをわざわざ連番に変える必要はないのでは？
同じフォーム内のnameが競合するときには配列風にする意味がありますが・・・
投稿2020/04/15 03:42
総合スコア114784
すいません。フォームの部品を増やしてはいるんですが、<form></form>を増やしているのではなく
<form>内の<section>内を増やしています。フォームを増やすという記載に語弊がありました。
正しくはフォームの部品を増やすです。
なので、１つのform内でnameが同じものがあるということになります。
こまかい例外処理は無視して・・・
こんな感じでどうでしょう？
<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('#btn').addEventListener('click',e=>{
var f=e.target.form;
var d=f.querySelector('div');
f.insertBefore(d.cloneNode(true),d.nextElementSibling);
for(var i=0;i<f.elements.length;i++){
var elem=f.elements[i];
var name=(elem.name.match(/(.+?)[\d+]$/)||[])[1]||null;
var names=[...f.elements].filter((x,y)=>y<i&&x.name.match(new RegExp(name+"\[\d+\]$"))).map(x=>x.name);
if(names.length>0){
elem.name=name+"["+names.length+"]";
}
}
});
});
</script>
<form>
<div>
<input type="text" name="hoge[0]">
<input type="text" name="hoge[1]">
<input type="text" name="hoge[2]">
<input type="text" name="fuga[0]">
</div>
<input type="button" id="btn" value="clone">
</form>
ご回答ありがとうございます。ご提示いただいたコードで希望の動作を確認できました。
できればご提示いただいたコードを私の書いたものに近づけていきたいのですが、
要素名を正規表現で書くことはできるのでしょうか？
例えばvar namecode = clonecode.find('select.status').attr('name');
をvar namecode = clonecode.find(/^[a-zA-Z]*$/).attr('name');
のような形ではつくれないものでしょうか？
select.(/^[a-zA-Z]*$/).attr('name')で半角英字が入力されているclassのnameを取得して、
namecode = namecode.replace(/$1[[0-9]{1,2}/g, '$1[' + cloneno2);のような置換ができれば、実現できるのではと考えていたのですが、そういうことがjsでは可能かをもしご存じであれば教えてほしいです。
別の質問になるのであれば、一旦今回の質問をクローズして再質問しなおします。
よろしくお願いいたします。
> select.(/^[a-zA-Z]*$/)
は難しいですね,jQueryの場合セレクタ「[name*=・・・]」がありますが
これは所定の文字にヒットさせるものですしね
すべてのものをとって、フォーマットを検証して、一つずつ処理するのが妥当で
結局それをやっているのが私の提示したソースです
なるほど、そういった検索はできないのですね。大変勉強になりました。
ありがとうございます。
あなたの回答
tips
プレビュー
