質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

6584閲覧

動的に増減する入力フォーム 採番

laph

総合スコア17

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/07/30 08:01

動的に増減する入力フォームを作成したのですが、[追加]→[削除]→[追加]とすると
採番する際に順番が崩れてしまいます。記述方法などご教示いただけないでしょうか?
よろしくお願いいたします。

javascript

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>入力項目を動的に追加・削除</title> 6<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 7<script type="text/javascript"> 8$(function() { 9 //追加 10 $('.addformbox').click(function() { 11 //クローンを変数に格納 12 var clonecode = $('.box:last').clone(true); 13 14 //数字を+1し変数に格納 15 var cloneno = clonecode.attr('data-formno'); 16 var cloneno2 = parseInt(cloneno) + 1; 17 var cloneno3 = parseInt(cloneno) + 3; 18 19 //data属性の数字を+1 20 clonecode.attr('data-formno',cloneno2); 21 22 //数値 23 clonecode.find('.no').html(cloneno3); 24 25 //数値 26 var namecode2 = clonecode.find('input.toiawase').attr('name'); 27 namecode2 = namecode2.replace(/textarea[[2-9]{1,2}/g,'textarea[' + cloneno2); 28 clonecode.find('input.toiawase').attr('name',namecode2); 29 30 //HTMLに追加 31 clonecode.insertAfter($('.box:last')); 32 }); 33 34 35 //削除 36 $('.deletformbox').click(function() { 37 //クリックされた削除ボタンの親要素を削除 38 $(this).parents(".box").remove(); 39 40 var scount = 1; 41 //番号振り直し 42 $('.box').each(function(){ 43 var scount2 = scount + 1; 44 45 //data属性の数字 46 $(this).attr('data-formno',scount); 47 48 $('.no',this).html(scount2); 49 50 51 var name2 = $('input.toiawase',this).attr('name'); 52 name2 = name2.replace(/textarea[[2-9]{1,2}/g,'textarea[' + scount); 53 $('input.toiawase',this).attr('name',name2); 54 55 scount += 1; 56 }); 57 }); 58 59}); 60</script> 61</head> 62 63<style type="text/css"> 64 65#input_plural input.form-control { 66 display: inline-block; 67 width: 65%; 68 height: 34px; 69 padding: 6px 12px; 70 font-size: 14px; 71 color: #555; 72} 73 74#input_plural { 75 margin: 10px 0; 76} 77 78#input_plural input.form-control { 79 display: inline-block; 80 width: 65%; 81 height: 34px; 82 padding: 6px 12px; 83 font-size: 14px; 84 color: #555; 85} 86 87#input_plural input.pluralBtn { 88 width: 30px; 89 height: 30px; 90 border: 1px solid #ccc; 91 background: #fff; 92 border-radius: 5px; 93 padding: 0; 94 margin: 0; 95} 96</style> 97 98 99<body> 100 <div>1</div> 101 <input type="text" name="textarea[0]" class="toiawase" placeholder="選択肢を入力"> 102 <div class="box" data-formno="0"> 103 <div id="input_pluralBox"> 104 <div id="input_plural"> 105 <div class="no">2</div> 106 <input type="text" name="textarea[1]" class="toiawase" placeholder="選択肢を入力"> 107 <input type="button" value="-" class="deletformbox"> 108 <input type="button" value="+" class="addformbox"> 109 </div> 110 </div> 111 </div> 112 </body> 113</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2019/07/30 08:14 編集

仕様をきちんと書いてください 「+」をおすと現在ある番号+1番の枠ができる? 「ー」をおすとその番号が削除され、連番は振り直し? 要素が2つしかないとき2の「ー」押すと、二度と「+」ができなくなるけどOK?
guest

回答2

0

投稿2019/07/30 10:05

oikashinoa

総合スコア2826

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

laph

2019/07/30 12:22

回答ありがとうございます。CSSで採番する方法もあるのですね。とても勉強になります。
guest

0

ベストアンサー

ざっくり

javascript

1<script> 2$(function() { 3 setMinusButton(); 4 $('.addformbox').on('click',function() { 5 $('.box:last').after($('.box:last').clone(true).find('.toiawase').val("").end()); 6 renumber(); 7 setMinusButton(); 8 }); 9 $('.deletformbox').on('click',function() { 10 $(this).parents(".box").remove(); 11 renumber(); 12 setMinusButton(); 13 }); 14}); 15function renumber(){ 16 $('.no').each(function(){ 17 var idx=$('.no').index(this); 18 $(this).text(idx+2); 19 $(this).next('input').attr('name','textarea['+(idx+1)+']'); 20 21 }); 22}; 23function setMinusButton(){ 24 $('.deletformbox').prop('disabled',$('.no').length<=1); 25} 26 27</script> 28<div>1</div> 29<input type="text" name="textarea[0]" class="toiawase" placeholder="選択肢を入力"> 30<div class="box" data-formno="0"> 31 <div id="input_pluralBox"> 32 <div id="input_plural"> 33 <div class="no">2</div> 34 <input type="text" name="textarea[1]" class="toiawase" placeholder="選択肢を入力"> 35 <input type="button" value="-" class="deletformbox"> 36 <input type="button" value="+" class="addformbox"> 37 </div> 38 </div> 39</div> 40 41

追記

最大数=5とした場合

javascript

1<script> 2const max=5; 3$(function() { 4 setButton(); 5 $('.addformbox').on('click',function() { 6 $('.box:last').after($('.box:last').clone(true).find('.toiawase').val("").end()); 7 renumber(); 8 setButton(); 9 }); 10 $('.deletformbox').on('click',function() { 11 $(this).parents(".box").remove(); 12 renumber(); 13 setButton(); 14 }); 15}); 16function renumber(){ 17 $('.no').each(function(){ 18 var idx=$('.no').index(this); 19 $(this).text(idx+2); 20 $(this).next('input').attr('name','textarea['+(idx+1)+']'); 21 }); 22}; 23function setButton(){ 24 $('.addformbox').prop('disabled',$('.no').length>=max-1); 25 $('.deletformbox').prop('disabled',$('.no').length<=1); 26} 27 28</script> 29<div>1</div> 30<input type="text" name="textarea[0]" class="toiawase" placeholder="選択肢を入力"> 31<div class="box" data-formno="0"> 32 <div id="input_pluralBox"> 33 <div id="input_plural"> 34 <div class="no">2</div> 35 <input type="text" name="textarea[1]" class="toiawase" placeholder="選択肢を入力"> 36 <input type="button" value="-" class="deletformbox"> 37 <input type="button" value="+" class="addformbox"> 38 </div> 39 </div> 40</div>

投稿2019/07/30 08:34

編集2019/07/31 00:46
yambejp

総合スコア114574

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

laph

2019/07/30 12:29

回答ありがとうございます。やろうと思っていたことが実現できました。記入していただいたコードを読みながら勉強になりました。ちなみに採番する値を最大までとした場合、どのように記述したらよろしいでしょうか。
yambejp

2019/07/31 00:42

>採番する値を最大まで 追加できる要素に上限数があるということですか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問