- ベストアンサー
フォームの途中で追加するには
簡単なブログシステムを作成しているのですが、その際タグを入力する欄があります。基本的にタグを一つ一つ入力していく形式をとりたいのですが、ユーザーによって入力したいタグ数が異なるため、まずはひとつだけタグ入力inputをつけました。 1タグ以上の入力は出来ないため、もう一つ入力するには タグを追加 のようなボタンを押すと、今までの入力した情報は失われず、フォームの最後に <input type="text" name="tag"> が追加されるようにしたいのですが、方法が分かりません。 一番苦戦している点は、別の項目で既に入力してある値をそのまま引き継ぎ、追加後も同じ状態で表示させたいです。 よろしくお願いいたします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じでしょうか <html></head> <script type="text/javascript"> var count_input = 0; function addElement() { if (count_input++==0) { var element = document.createElement('input'); element.setAttribute('type', "text"); element.setAttribute('name', "tag"); document.getElementById("input_add").appendChild(element); document.input_add.ad.disabled = true; } } </script> </head> <body> <form name="input_add"> <button name="ad" onclick="addElement()">追加</button><br> <input type="text" name="xx" value="前データ"/><br> </form> </body></html>
その他の回答 (1)
- nicolish
- ベストアンサー率72% (13/18)
>サーバーサイドで（PHP）で行いたいと考えています これはどう考えてもJavaScriptで処理するのが正解。サーバーサイドで処理する理由が何一つない。 それでも強いて言うなら、「タグを追加」ボタンで同じスクリプトにリクエストが飛んで、そこで入力内容とまったく同じ内容が再度フォーム部品内に表示されるようにすればいい。「タブを追加」もtype=submitにして、nameを別にするかなんかで「投稿」と「タグ追加」どっちが入力されたか判定すりゃ良い。 個人的には、カンマ区切りとか空白区切りとかで1テキストボックスに入力させた方が使いやすいと思うけどね。 タグを入力させるウェブサイトで、複数テキストボックスにいっこずつ入力させるサイトなんて見た事も無い。
補足
確かに他のシステムでは,を使用したりしていますが、今回は訳ありで使用できないのです。 また、すでにAjaxでできるようになっているのですが、Javascriptを使用できないユーザーにも追加できるよう、サーバーサイドでもできるようにしたいと思っています。 よろしくお願いいたします。
お礼
ご回答ありがとうございます。 できればユーザーサイドではなくサーバーサイドで（PHP）で行いたいと考えています。