Q&A
###前提
1回の処理で一人または、複数人の入会費を計算するアプリケーションをJavaScriptで作成しています。
アプリケーションは、一人から複数にに対応するため「追加」ボタンと「削除」ボタンを設置しております。
###一人の場合
###複数人の場合
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <style> 6 tr, td { display: block; } 7 tr { margin-bottom: 24px; border-bottom: 1px solid #000; } 8 </style> 9</head> 10<body> 11<div> 12 <form action="#" method="post" id="theForm" novalidate> 13 <table id="tbl1"> 14 <tbody> 15 <tr> 16 <td> 17 <label for="type">種類 </label> 18 <select name="type_1" id="type" required> 19 <option value="basic">ベーシック - 1000円</option> 20 <option value="premium">プレミアム - 1500円</option> 21 <option value="gold">ゴールド - 2000円</option> 22 <option value="platinum">プラチナ - 2500円</option> 23 </select> 24 </td> 25 <td> 26 <label for="years">年</label> 27 <input type="number" name="years_1" id="years" min="1" required> 28 </td> 29 <td> 30 <label for="cost">金額</label> 31 <input type="text" name="cost_1" id="cost" disabled> 32 </td> 33 <td><span class="add">追加</span></td> 34 </tr> 35 </tbody> 36 </table> 37 カウント <input type="text" id="cnt" name="cnt" value="1"> 38 </form> 39</div> 40<script src="skin/js/member.js"></script> 41<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 42<script type="text/javascript"> 43 $(function() { 44 var tbl = $('#tbl1'); 45 var row = tbl.find('tr:first-child').clone(true).append('<td><span class="delete">削除</span></td>'); 46 47 tbl.on('click', 'span.add', function(){ 48 tbl.find('tbody').append(row.clone(true)); 49 adjust(); 50 }).on('click', 'span.delete', function(){ 51 $(this).parents('tr').remove(); 52 adjust(); 53 }); 54 55 function adjust(){ 56 $('#tbl1 select[name^="type_"]').each(function(i){ 57 var num=i+1; 58 $(this).attr('name','type_'+num); 59 $(this).parents('td').next().find('input[name^="years_"]').attr('name','years_'+num); 60 }); 61 $('#tbl1 input[name^="years_"]').each(function(i){ 62 var num=i+1; 63 $(this).attr('name','years_'+num); 64 $(this).parents('td').next().find('input[name^="cost_"]').attr('name','cost_'+num); 65 }); 66 $("#cnt").val($('#tbl1 select[name^="type_"]').length); 67 } 68 }); 69</script> 70</body> 71</html>
JS
1// フォームの送信時に呼び出される関数。 2// 計算を実行し、ブラウザのデフォルトの振る舞いを回避する 3function calculate(e) { 4 5 'use strict'; 6 7 // イベントオブジェクトを取得 8 if (typeof e == 'undefined') e = window.event; 9 10 11 12} // calculate()関数の終わり 13 14window.onload = function() { 15 'use strict'; 16 17 var cnt = document.getElementById('cnt').value; 18};
###想定できること
- 受付担当者は入会する顧客の数だけ先にフォームを追加する
- 受付担当者は一人目を終えてからフォームを追加する
- 受付担当者は任意のタイミングでフォームを追加する
###させたい動作
種類、年のどちらかを指定するとイベントが発生してイベントに登録してあるcalculate関数を実行して金額を求めたいです。
###確認したいこと・聞きたいこと
今回の場合、イベントがどのカウント番目で発生する分からなような状況のとき、どのようにして処理をすればよろしいでしょうか？
回答2件
0
ベストアンサー
的外れかもしれませんが、このような挙動でしょうか？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <style> 6 tr, td { 7 display: block; 8 } 9 10 tr { 11 margin-bottom: 24px; 12 border-bottom: 1px solid #000; 13 } 14 </style> 15</head> 16<body> 17<div> 18 <form action="#" method="post" id="theForm" novalidate> 19 <table id="tbl1"> 20 <tbody> 21 <tr> 22 <td> 23 <label for="type">種類 </label> 24 <select name="type_1" id="type" required> 25 <option value="basic" selected>ベーシック - 1000円</option> 26 <option value="premium">プレミアム - 1500円</option> 27 <option value="gold">ゴールド - 2000円</option> 28 <option value="platinum">プラチナ - 2500円</option> 29 </select> 30 </td> 31 <td> 32 <label for="years">年</label> 33 <input type="number" name="years_1" id="years" min="1" required value="1"> 34 </td> 35 <td> 36 <label for="cost">金額</label> 37 <input type="text" name="cost_1" id="cost" disabled value="1001"> 38 </td> 39 <td><span class="add">追加</span></td> 40 </tr> 41 </tbody> 42 </table> 43 カウント <input type="text" id="cnt" name="cnt" value="1"> 44 </form> 45</div> 46<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 47<script type="text/javascript"> 48 49 //追加ここから。 50 var select_type = { 51 basic: 1000, 52 premium: 1500, 53 gold: 2000, 54 platinum: 2500 55 }; 56 57 58 function calculate(type, years) { 59 return (type + years);//今回は種類の金額と年の和を計算している。 60 } 61 //追加ここまで。 62 63 window.onload = function () { 64 'use strict'; 65 var cnt = document.getElementById('cnt').value; 66 }; 67 68 //追加ここから。 69 $("label[for='type'] + select").change(function () { 70 var type = parseInt(select_type[$(this).val()]);//種類。 71 var years = parseInt($(this).closest('td').next().find('input').val());//年。 72 73 $(this).closest('td').next().next().find('input').val(calculate(type, years)); 74 }); 75 76 $("label[for='years'] + input").change(function () { 77 var type = parseInt(select_type[$(this).closest('td').prev().find('select').val()]);//種類。 78 var years = parseInt($(this).closest('input').val());//年。 79 80 $(this).closest('td').next().find('input').val(calculate(type, years)); 81 }); 82 //追加ここまで。 83 84 $(function () { 85 var tbl = $('#tbl1'); 86 var row = tbl.find('tr:first-child').clone(true).append('<td><span class="delete">削除</span></td>'); 87 88 tbl.on('click', 'span.add', function () { 89 tbl.find('tbody').append(row.clone(true)); 90 adjust(); 91 }).on('click', 'span.delete', function () { 92 $(this).parents('tr').remove(); 93 adjust(); 94 }); 95 96 function adjust() { 97 $('#tbl1 select[name^="type_"]').each(function (i) { 98 var num = i + 1; 99 $(this).attr('name', 'type_' + num); 100 $(this).parents('td').next().find('input[name^="years_"]').attr('name', 'years_' + num); 101 }); 102 $('#tbl1 input[name^="years_"]').each(function (i) { 103 var num = i + 1; 104 $(this).attr('name', 'years_' + num); 105 $(this).parents('td').next().find('input[name^="cost_"]').attr('name', 'cost_' + num); 106 }); 107 $("#cnt").val($('#tbl1 select[name^="type_"]').length); 108 } 109 }); 110</script> 111</body> 112</html>
投稿2017/03/07 04:34
総合スコア14731
0
普通に
javascript
1tbl.on('change', 'select', function(e){...});
みたいな感じでは動作しませんか？
あと、細かいことですが、idは一意的な属性なのでクローンするのはよくないですね。name属性と同様に連番でサフィックスをするか、classを使うべきでしょう。
投稿2017/03/07 04:02
総合スコア36074
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/07 04:40
2017/03/07 06:04
2017/03/07 06:12
2017/03/07 06:36