- ベストアンサー
JavaScriptからFORMを生成できるのでしょうか？
素朴な疑問かもしれませんが、 HTML側にFORMタグを置かずに、JavaScriptのみでsubmitを行う方法がありますでしょうか？ methodやactionはてはnameまでプロパティ指定できてsubmitの対象をスクリプト内で制御する事例はあるのですがFORMそれ自身を生成（？）する事例を見たことがありません。 セキュリティうんぬんの問題ならもっと危険な関数が昔からあっていろいろな事例がありますので、禁じ手になっているとはどうしても思えません。 なぜ、こんな疑問を持ったかというとJSファイル使ってをHTMLとの分離を考えた場合、常に空のFORMタグをHTML側で用意しなければならないとしたら分離の意味がないような気がして・・・。しかもテキストボックスなどフォームのエレメントはDOM（ID=）を利用すればFORMタグに囲まれていなくても参照できますし・・・。さらにdocument.forms.lengthでフォーム数までわかるのにそれを追加する事例がまったく見あたりません。 childNodeとかではなく、シンプルな手法の解かる方がおられましたらヒントなりを教えてください。 よくご存知の方で、方法が無いということならその理由とか教えていただけると幸いに思います。
- ralf124c
- お礼率52% (10/19)
- JavaScript
- 回答数9
- ありがとう数7
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
・ createElement("FORM")、appendChild(MyForm)を使った例です。 ・ document.bodyに追加しないと、フォームとして機能しません。 ------------------------------------------------------------ <html> <head> <script type="text/javascript"> <!-- function formSubmit() { var MyForm = document.createElement("FORM"); document.body.appendChild(MyForm); with(MyForm) { method = 'post'; alert(document.forms.length); action = './test.cgi'; submit(); } } //--> </script> </head> <body> <a href="#" onclick="formSubmit();return false;">create form and Submit</a> </body> </html>
その他の回答 (8)
- yambejp
- ベストアンサー率51% (3827/7415)
HTML側に受け皿さえあれば、外部jsで十分いけるでしょう //hoge.htm <html> <head> <script type="text/javascript" src="hoge.js"></script> </head> <body> <div>ここにフォームを入れる↓</div> <div id="hoge"></div> <div>ここにフォームを入れる↑</div> </body> </html> //hoge.js window.onload=function(){ var hoge=document.getElementById('hoge'); var myForm=document.createElement('form'); myForm.setAttribute("action","fuga.cgi"); myForm.setAttribute("method","post"); var inps=new Object; inps[0]=document.createElement('input'); inps[0].setAttribute("type","text"); inps[0].setAttribute("name","i0"); inps[0].setAttribute("value","0"); inps[1]=document.createElement('input'); inps[1].setAttribute("type","text"); inps[1].setAttribute("name","i1"); inps[1].setAttribute("value","1"); inps[2]=document.createElement('input'); inps[2].setAttribute("type","submit"); inps[2].setAttribute("value","go"); for(var i in inps){ myForm.appendChild(inps[i]); } hoge.appendChild(myForm); }
お礼
ご回答ありがとうございます。 手法はAUTY様と同じ子ノードですが、フォームエレメントの付け方までご指南いただきありがとうございます。 こちらも大変勉強になりますので、しっかり理解してスキルに取り込んでいこうと思います。 どうもありがとうございました。
- shinya23so
- ベストアンサー率50% (80/159)
No1246です。 今までの私のは無視してください。 本当にできるんですが、しっかり確認してなかったので… 本当に申し訳ない。 --------------------------------------------------------- HTML --------------------------------------------------------- <html><head> <script language="JavaScript" src="./test.js"></script> </script></head> <body> <a href="#" onclick="formSubmit();return false;">create form and Submit</a> </body> </html> --------------------------------------------------------- test.js --------------------------------------------------------- function formSubmit() { document.write("<form method=post action="); document.write("/cgi-bin/my_script"); document.write(">"); document.write("名前を入力してください"); document.write("<br>"); document.write("<input type=text value="); document.write("?????"); document.write(">"); alert(document.forms.length); }
お礼
ご回答ありがとうございます。 こちらも、シンプルで面白いアプローチで、実際に自環境で動作させるためカスタマイズしてみて意図がはっきりとわかりました。 こういう一見シンプルな手法を組み合わせて目的を達する方法もあるんだといういい勉強になりました。 惜しむらくはブラウザの履歴に1ステップ残ってしまうことですがそれはそれで解決策はべつに考えたいと思います。 久々に面白いハックが見れてうれしく感じます。 本当にどうもありがとうございました。
- shinya23so
- ベストアンサー率50% (80/159)
No1246です。 たびたび申し訳ない。 No6 HTMLにタグ抜けありました。 ミスなしと言いながら申し訳ない。↓ <a href="#" onclick="formSubmit();return false;">create form and Submit</a>
- shinya23so
- ベストアンサー率50% (80/159)
No124です。 No4ケアレスミスしてました。 申し訳ない。 今度こそ分かりやすく送信の例を示します。 今度は間違ってません。確認済み。 --------------------------------------------------------- HTML --------------------------------------------------------- <html><head> <script language="JavaScript" src="./test.js"></script> </script></head><body></body></html> --------------------------------------------------------- test.js --------------------------------------------------------- document.write("<form method=post action="); document.write("/cgi-bin/my_script"); document.write(">"); document.write("名前を入力してください"); document.write("<br>"); document.write("<input type=text value="); document.write("?????"); document.write(">"); function formSubmit() { alert(document.forms.length); }
- shinya23so
- ベストアンサー率50% (80/159)
No1,2です。 説明が悪かったようですね。 送信の例を示します。 --------------------------------------------------------- HTML --------------------------------------------------------- <html><head> <script language="JavaScript" src="./test.js"></script> </script></head><body></body></html> --------------------------------------------------------- test.js --------------------------------------------------------- function formSubmit() { alert(document.forms.length); } document.write("<form method=post action="); document.write("/cgi-bin/my_script"); document.write(">"); document.write("名前を入力してください"); document.write("<br>"); document.write("<input type=text value="); document.write("?????"); document.write(">"); document.write("<br>"); document.write("<input type=submit value="); document.write("送信"); document.write(" onclick=); document.write("formSubmit()"); document.write(">");
- auty
- ベストアンサー率58% (284/486)
・ 意図はよくつかめていないかも知れませんが、以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head> <script type="text/javascript"> <!-- function formSubmit() { document.getElementById("f1").innerHTML = "<form action='f1_new.html' name='form1'><input type='hidden' name='n' value='v'></input></form>"; ; alert(document.forms.length); document.form1.submit(); } //--> </script> </head> <body> <div id="f1"></div> <a href="#" onclick="formSubmit();return false;">create form and Submit</a> </body> </html>
お礼
ごていねいな回答ありがとうございます。 意図する動作、概念についてはまさしくこれです。 ただ、DOMでもってDIVタグ部にFORMタグをはきだしてSUBMITという形なのでFORMタグがソースとしては不可視なのですがHTML内に組み込んでいる状態となっております（FORMがDIVに置き換わっている）。 意図としては、下記リストのように関数定義直後のFORMオブジェクトからJavaScript処理系内においてFORMを定義できないものかと悶々としております（HTML内から意識するのは呼び出す関数だけにしたいのです）。 ------------------------------：以下AUTY様のご提示いただいたものを参考に自分がもやもやしてた部分を付け足させていただきました。 <html> <head> <script type="text/javascript"> <!-- function formSubmit() { // -----：当然ながらエラーになります。 var MyForm = new Forms(); // または document.forms.name = 'MyForm'; // やら果ては document.forms.name.value = 'MyForm'; // などなど、いろいろ試して見ましたが、エラー連発でした // -----：ここまでの部分が試行錯誤部分です。 with(document.MyForm){ method = 'post'; action = './test.cgi'; submit(); } } //--> </script> </head> <body> <a href="#" onclick="formSubmit();return false;">create form and Submit</a> </body> </html> ------------------------------------------------- 要はMETHODが設定できてACTIONが指定できてSUBMITまでできるのに、どーして大元のFORMが処理系内で定義できないのかと悩んでおります。 わたくし自身JavaScriptに関して浅学のため「動かなくて当然」のことについて悩んでいるのかもしれませんが、いま一度お知恵を拝借できればと思います。 なにとぞよろしくお願いいたします。
- shinya23so
- ベストアンサー率50% (80/159)
No1です。 ヒントだけだったので、具体的な使い方を示します。 擬似的なカプセル化が可能です。 （理由は不明ですが、こういった使い方を見たことはありません。） またこのやり方だと、目にしたことのない高等テクニックが使えます。 具体的な使い方と、高等テクニックのヒント。 --------------------------------------------------------- HTML --------------------------------------------------------- <html><head> <script language="JavaScript" src="./test.js"></script> </script></head><body></body></html> --------------------------------------------------------- test.js --------------------------------------------------------- var Ktec="kore";//ここに注目 var TC=0; var Fm1=""; var Fm2= " こんな感じでどうでしょう？ "; var Fm=Fm1+Fm2; function REI(){ if(TC<1500){ TC++; document.REI.kore.value=Fm; Fm=Fm.substring(2,Fm.length)+Fm.substring(0,2); setTimeout("REI()",500); } else{document.REI.kore.value=""} } document.write("<body onload="); document.write("REI()"); document.write("<p>"); document.write("＊フォームに文字を流すスクリプト"); document.write("<br>"); document.write("<form name="); document.write("REI"); document.write(">"); document.write("<input type=text size=50 name="); document.write(Ktec);//ここに注目 document.write(">");
お礼
ていねいなご回答ありがとうございます。 わたくしの説明不足から、ちょっと意図していたものとは違いますが、これはこれで一見の価値がありそうです。 少し、勉強させていただきます。 どうもありがとうございました。
- shinya23so
- ベストアンサー率50% (80/159)
<-- 推奨されない理由は知りません。が 技術的には可能です。 私以外にやっている人を見たことがないので、 色々な意味での保障はできません。 >を別の文字列としてあつかうこと、 ""を使う時の書き方がポイントです。 --> <html> <head> <script language="JavaScript"> document.write("強引ですが可能です"); document.write("<br>"); document.write("誤作動など責任はもてません"); document.write("<br>"); document.write("<input type=text size=100"); document.write(">"); document.write("<br>"); document.write("<input type=button value="); document.write("ボタンのバリュー"); document.write(">"); </script> </head> <body> </body> </html>
お礼
これはすごいです。 チャイルドノードが入ってますが実に簡潔で現状のメジャーブラウザ全部で動作OKでした。 昨晩お礼を書いてから、昔のJavaScript本をいくつか（かば本厚過ぎ！）ひっくり返してみていたらクイックリファレンスに「Formオブジェクトは読み込み専用なので無理」と、理由は抜きに記述があったのを見つけました。可能性を棄てつつありました。 これが、正攻法だと思いますし「document.bodyに追加しないと、フォームとして機能しません」にすべてが集約されていると思います。 本当にありがとうございました。 またの機会がございましたらよろしくお願いいたします。