- 締切済み
フォームの項目を途中で増やせる機能探しています。
タレントグッズの買取査定フォームを制作しています。 webデザイナーですが、プログラミングNGのダメダメデザイナーなので、フリーのメールフォームを活用して制作していますが、次のような機能をつけたく、いろいろ調べていますが、行き詰ってしまっているので、ご存じの方がいらっしゃいましたらアドバイスいただけませんでしょうか。。 査定商品を入力する項目をユーザーの状況（査定してほしい商品の数）に合わせて増やせるようにしたいです。 「さらに入力する」ボタンをクリックするとページは動かず、新しい入力項目がひょきっと現れる（足される？）といった機能です。 ダメダメデザイナーですが、フリーのメールフォームなどを多少カスタマイズ、設置するくらいはできます。 よろしくお願いします！
- fairytale282
- お礼率57% (12/21)
- その他（プログラミング・開発）
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- JaneDue
- ベストアンサー率75% (263/350)
基本的に Ano1 に同じ意見ですが、貴方の態度はすばらしい!! きちんとDOMでやるならAno2、ちょっと辛いなら、はしょって以下の感じです。 ■査定商品 <ol id='products'> <li><input type="text" name="査定商品1"> </ol> <script type="text/javascript"> function add_form(){ //カウンタ 値なしなら1 add_form.c = add_form.c || 1; //liを生成、送信するnameに番号を振って、olに追加 var newNode = document.createElement("li"); newNode.innerHTML = "<input type='text' name='査定商品" + ++add_form.c + "' >"; document.getElementById('products').appendChild(newNode); } </script> <input id="add_button" type='button' value='さらに入力する' onClick='add_form()'> 両立大変でしょうが、ご健闘祈ります。
- ralf124c
- ベストアンサー率52% (232/446)
思い出したのでサイトに行ってみたらシステム入れ替えで止まってた ... orz
- ralf124c
- ベストアンサー率52% (232/446)
これをデザイナーさんに作らせるのはちょっと酷だと思いますが・・・。 さがせばなんか簡単なJSがあるかもしれませんが最近自分で作ったサンプルを載せます。 ここに書き込むためインデント用空白は全角スペースを使っていますので気をつけてください. ----------------------------------------------------------------------------ここから <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>TEST</title> </head> <script type="text/javascript"> <!-- // フォーム名に番号をつけるカウンタ var NM_EXT = 1; // フォームを追加してゆく関数 function fAddItem(){ // IEの場合はsetAttributeのイベントに関する挙動が他と違うのでブラウザ名を取得 var userAgent = window.navigator.userAgent.toLowerCase(); // フォームのオブジェクト var MyForm = document.myform; // 新しいフォームの名前を作る:この場合「FNM番号」 var FormName = "FNM" + NM_EXT; with(MyForm) { // まずどんなタグを作るのか:ここではHTML内と同じTEXTフォームを増やすので「input」 var oObj = document.createElement("Input"); // そのタグの属性「textタイプ」「フォームの名前」「大きさ」 oObj.setAttribute("type","text"); oObj.setAttribute("name",FormName); oObj.setAttribute("size","30"); // 次のタグを作るため、そのフォームに関するイベントを追加：フォーカスが当たればこの関数を呼び出す if(userAgent.indexOf("msie") > -1){ oObj.setAttribute("onfocus",new Function("fAddItem();")); }else{ oObj.setAttribute("onfocus","fAddItem()"); } // 上記で生成したフォームのタグをを埋め込む appendChild(oObj); // ついでに改行タグも追加する var oObj_plus = document.createElement("br"); appendChild(oObj_plus); } // フォーム名用番号を1増やす NM_EXT++; } //--> </script> <body> <form action="./送信先スクリプトなど.cgi" method="POST" name="myform"> 入力欄：<br /> <input type="text" name="FNM0" size="30" onfocus="fAddItem()"><br /> </form> <input type="button" value="送信" name="B1" onclick="document.myform.submit()"> <br /> </body> </html> ----------------------------------------------------------------------------ここまで こむずかしいですが、がんばって分析してみてください。 デザイナーさんで動的ページをデザインする際に、それを想定理解していない方が多くて、静的ページと同じ感覚でデザインされるので、システムは予算に見合わない作業が後になって発生することがよくあります。 なんかの一助になればと思います。 タレントさんのグッズといえば、むかしショコラさんのサイトのグッズ販売パートを作ったなぁ。 まだ使ってくれているみたいなので、なんかうれしいです。 ご時世なのか、作ってもほとんどのWeb関連のシステムは短期で捨てられることが多くて・・・。
お礼
ご回答ありがとうございます！ 具体的なコードまでアドバイス頂きありがとうございます。 水木金しか出勤しておらず、お礼が遅くなり申し訳ありません。 今、がんばって分析しています（＾＾ 5年以上前に購入したJavaScriptのリファレンス本が見つからず・・・ 最新のものを早めに購入してなんとか、この件だけでも克服できればと目論んでいます。 ショコラ（さん）懐かしいです。。 かわいいサイトですね！ グッズを販売していたとわ! 高額にもかかわらず全て売り切れていました・・・
- bakaok
- ベストアンサー率22% (33/148)
JavaScript使えば簡単に実装できる。
お礼
回答、ありがとうございますー 育休ボケ脱出中です（＾＾； 簡単にできるんですね！良かった！ 調べてますが、調べます！
お礼
ご回答ありがとうございます。 水木金しか仕事をしておらずお礼が遅れて申し訳ありません。。 またご配慮ありがとうごいざいます。 ふた昔（みつ昔）前は、デザイナーはデザインとコーディングだけできれば良かったように思いますが、FlashにActionScriptが搭載されたあたりから、デザイナーもスクリプトくらいはかけなければいけないご時世になったように思います。 フルで働いていたころは近くにいつもプログラマーさんがいたのでなんとかなりましたが・・・そのつけが今まわってきているようです。 私の脳みそには「理数系」の要素は実装されていないと思われますが、興味はあるのでがんばります（ｗ 「無事、うまくいきました！」とまだコメントできず残念ですが、ちょこちょことがんばってなんとかクリアしたいと思いっています。 ありがとうございましたm(_ _)m