- 締切済み
フォームを複数表示させる
テキストボックスに入力した数値の分だけ フォームを表示させるスクリプトを作ってみたいと考えています イメージとしては↓ http://www.vividcode.info/sample/090817a.xhtml に近い感じですがこれに数値を入力してやることでまとめて 表示させてみたいです なにか比較的簡単な実装方法はありませんか？ よろしくおねがいします！
- pasukaru-616
- お礼率0% (0/4)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
> 比較的簡単な実装方法 びみょうでしょうか？ input ようそは、そもそも いんらいん ようそです。 てきとうな ぶろっくようそで かこんであげると べんりかも？ みえない P ようそを、こぴーして はりつけています。 ぜんかくくうはくは、はんかくにしてください。 ie は、わたしの ぎりょうが ないので あきらめて ください <!DOCTYPE html> <title></title> <meta charset="UTF-8"> <style> body > p#wirepuller { display: none; } </style> <body> <p> <input type="number" name="addnum"> <input type="button" value="追加" name="add"> <input type="button" value="合計" name="total"> </p> <hr> <p id="wirepuller"> <input type="text" name="abc" value=""> <input type="button" value="削除"> </p> <form id="test" action="#"> </form> <script> function handler (event) { var target = event.target; var doc = target.ownerDocument; var p, c, f, n; if ('INPUT' !== target.tagName || 'button' !== target.type) return; switch (target.value) { case '追加' : c = doc.getElementById ('wirepuller').cloneNode (true); n = Number (doc.querySelector ('input[name="addnum"]').value) || 0; f = doc.forms['test']; c.removeAttribute ('id'); while (n--) f.appendChild (c.cloneNode (true)); break; case '削除' : p = target.parentNode; p.parentNode.removeChild (p); break; case '合計' : var abc = doc.forms['test'].elements['abc']; var total = Array.prototype.reduce.call (abc, function (a, b) { return a + (isNaN(b.value) ? 0: +b.value) }, 0); alert('合計は、' + total); } } document.addEventListener ('click', handler, false); </script>
