前提・実現したいこと
javascriptでinputボックスの値をコピーしたいのですが、値が多くて現状の書き方に不満があります。
どのようにしたらもっとシンプルになるか教えて頂きたいです。
発生している問題
下記の該当のソースコードのように、目的とする機能AとBがあります。
機能A
ボタンクリックで【入力エリア】の追加と削除を1つずつ行う
(「.data1」「#name1」「#valu1」のセットを連番で増減し、最低で3セットありそれ以下にはならない)
機能B
【入力エリア】を【送信エリア】にコピーする
(最後のカンマはなくし、カンマ連続時は「submit」をdisabledにする)
しかし値1つずつについて書いているために、inputボックスが多い場合への対応が困難となり質問させて頂きました。
該当のソースコード
サンプルあります。
https://jsfiddle.net/rkc4st3q/3/
html
1<section class="datalist"> 2 <p>【入力エリア】</p> 3 <div class="data1"> 4 <input id="name1" class="name" type="text"> 5 <input id="valu1" class="valu" type="number"> 6 </div> 7 <div class="data2"> 8 <input id="name2" class="name" type="text"> 9 <input id="valu2" class="valu" type="number"> 10 </div> 11 <div class="data3"> 12 <input id="name3" class="name" type="text"> 13 <input id="valu3" class="valu" type="number"> 14 </div> 15 <!-- 同様に「.data4」や「.data5」などが大量にあり、最低で上の3つがある --> 16 <button type="button" id="add">add data</button> 17 <button type="button" id="remove">remove data</button> 18</section> 19 20<section class="outputlist"> 21 <p>【送信エリア】</p> 22 <input id="result_name"><br> 23 <input id="result_valu"><br> 24 <button type="button">submit</button> 25</section>
javascript
1/* 2機能A 3ボタンクリックで【入力エリア】の追加と削除を1つずつ行う 4(data1,name1,valu1のセットを連番で増減し、最低で3セットありそれ以下にはならない) 5*/ 6 7$('#add').click(function(){ 8 if( ($('.data2').css('display')=='none') && ($('.data3').css('display')=='none') ){ 9 $('.data2').css('display','flex'); 10 } 11 else if( ($('.data2').css('display')=='flex') && ($('.data3').css('display')=='none') ){ 12 $('.data3').css('display','flex'); 13 } 14}); 15 16$('#remove').click(function(){ 17 if( ($('.data2').css('display')=='flex') && ($('.data3').css('display')=='flex') ){ 18 $('.data3').css('display','none'); 19 } 20 else if( ($('.data2').css('display')=='flex') && ($('.data3').css('display')=='none') ){ 21 $('.data2').css('display','none'); 22 } 23}); 24 25 26/* 27機能B 28【入力エリア】を【送信エリア】にコピーする 29(最後のカンマはなくし、カンマ連続時は「submit」をdisabledにする) 30*/ 31$(".name").on('keyup',function(){ 32 var input_name1 = $('#name1').val(); 33 var input_name2 = $('#name2').val(); 34 var input_name3 = $('#name3').val(); 35 var output_names = input_name1+','+input_name2+','+input_name3; 36 $('#result_name').val(output_names); 37}); 38 39$(".valu").on('keyup',function(){ 40 var input_valu1 = $('#valu1').val(); 41 var input_valu2 = $('#valu2').val(); 42 var input_valu3 = $('#valu3').val(); 43 var output_valus = input_valu1+','+input_valu2+','+input_valu3; 44 $('#result_valu').val(output_valus); 45});
質問をまとめます。
質問➀:機能Aについて、実際は大量のinputがあるので、このままではif条件が大量になってしまいます。シンプルな書き方を知りたいです。
質問➁:機能Bについて、実際は大量のinputがあるので、このままではvarでの定義が大量になってしまいます。シンプルな書き方を知りたいです。
質問➂:機能Bについて、「値2つにつきカンマを1つ」にして、そしてカンマが連続する場合は「submit」をdisabledにしたいです。
(例えば、[りんご,,なす,,]と[3,,2,,]などを、[りんご,,なす]と[3,,2]のように最後にカンマが一切入らないようにして、さらに[りんご,きゅうり,なす]と[3,4,2]のように修正されるまで、「submit」をdisabledにしたいです。)
試したこと
上のソースコードのように、1つずつ書いていくところまでしか試せませんでした。
回答2件
あなたの回答
tips
プレビュー