BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] フォームに入力要素を動的に追加する

2022-12-17 21:47:03

質問

フィールドセットを動的に追加する方法について、多くのブログや記事を読みましたが、どれも非常に複雑な答えを与えています。私が必要としているのは、それほど複雑なことではありません。

私の HTML コードです。 

<input type="text" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails">Fill Details</a>

で、ユーザーが整数値（javascriptでバリデーションを確認しています）を入力するのは input フィールドに入力します。そして、クリックすると Fill Details のリンクをクリックすると、対応する数の入力フィールドが表示され、入力することができます。私はjavascriptを使用してこれを実現したいです。

私はjavascriptのプロではありません。で入力された整数を取得する方法を考えていました。 input フィールドに入力された整数を取得し、対応する入力フィールドの数を表示します。

どのように解決するのですか？

を使用することができます。 onclick イベントハンドラを使って、テキストフィールドの入力値を取得することができます。フィールドには必ず一意な id 属性を通して安全に参照できるようにします。 document.getElementById() :

要素を動的に追加したい場合、要素を配置するコンテナを用意する必要があります。例えば <div id="container"> . によって新しい要素を作成します。 document.createElement() で新しい要素を作成し appendChild() を使って、それぞれをコンテナに追加します。あなたは、意味のある name 属性（例えば name="member"+i のそれぞれに対して、動的に生成された <input> を生成し、フォームで送信します。

を作成することもできます。 <br/> 要素に document.createElement('br') . 単にテキストを出力したいだけなら document.createTextNode() を使うことができます。

また、コンテナが投入されそうになるたびにクリアしたい場合には hasChildNodes() とし removeChild() を一緒にしてください。 

<html>
<head>
    <script type='text/javascript'>
        function addFields(){
            // Number of inputs to create
            var number = document.getElementById("member").value;
            // Container <div> where dynamic content will be placed
            var container = document.getElementById("container");
            // Clear previous contents of the container
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }
            for (i=0;i<number;i++){
                // Append a node with a random text
                container.appendChild(document.createTextNode("Member " + (i+1)));
                // Create an <input> element, set its type and name attributes
                var input = document.createElement("input");
                input.type = "text";
                input.name = "member" + i;
                container.appendChild(input);
                // Append a line break 
                container.appendChild(document.createElement("br"));
            }
        }
    </script>
</head>
<body>
    <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
    <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
    <div id="container"/>
</body>
</html>

動作サンプルはこちら JSFiddle .

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します