素朴な疑問かもしれませんが、
HTML側にFORMタグを置かずに、JavaScriptのみでsubmitを行う方法がありますでしょうか?
methodやactionはてはnameまでプロパティ指定できてsubmitの対象をスクリプト内で制御する事例はあるのですがFORMそれ自身を生成(?)する事例を見たことがありません。
セキュリティうんぬんの問題ならもっと危険な関数が昔からあっていろいろな事例がありますので、禁じ手になっているとはどうしても思えません。
なぜ、こんな疑問を持ったかというとJSファイル使ってをHTMLとの分離を考えた場合、常に空のFORMタグをHTML側で用意しなければならないとしたら分離の意味がないような気がして・・・。しかもテキストボックスなどフォームのエレメントはDOM(ID=)を利用すればFORMタグに囲まれていなくても参照できますし・・・。さらにdocument.forms.lengthでフォーム数までわかるのにそれを追加する事例がまったく見あたりません。
childNodeとかではなく、シンプルな手法の解かる方がおられましたらヒントなりを教えてください。
よくご存知の方で、方法が無いということならその理由とか教えていただけると幸いに思います。
No.5ベストアンサー
- 回答日時:
・ 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>
これはすごいです。
チャイルドノードが入ってますが実に簡潔で現状のメジャーブラウザ全部で動作OKでした。
昨晩お礼を書いてから、昔のJavaScript本をいくつか(かば本厚過ぎ!)ひっくり返してみていたらクイックリファレンスに「Formオブジェクトは読み込み専用なので無理」と、理由は抜きに記述があったのを見つけました。可能性を棄てつつありました。
これが、正攻法だと思いますし「document.bodyに追加しないと、フォームとして機能しません」にすべてが集約されていると思います。
本当にありがとうございました。
またの機会がございましたらよろしくお願いいたします。
No.9
- 回答日時:
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様と同じ子ノードですが、フォームエレメントの付け方までご指南いただきありがとうございます。
こちらも大変勉強になりますので、しっかり理解してスキルに取り込んでいこうと思います。
どうもありがとうございました。
No.8
- 回答日時:
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ステップ残ってしまうことですがそれはそれで解決策はべつに考えたいと思います。
久々に面白いハックが見れてうれしく感じます。
本当にどうもありがとうございました。
No.7
- 回答日時:
No1246です。
たびたび申し訳ない。
No6 HTMLにタグ抜けありました。
ミスなしと言いながら申し訳ない。↓
<a href="#" onclick="formSubmit();return false;">create form and Submit</a>
No.6
- 回答日時:
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);
}
No.4
- 回答日時:
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(">");
No.3
- 回答日時:
・ 意図はよくつかめていないかも知れませんが、以下のコードを参考にしてみてください。
------------------------------------------------------------
<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に関して浅学のため「動かなくて当然」のことについて悩んでいるのかもしれませんが、いま一度お知恵を拝借できればと思います。
なにとぞよろしくお願いいたします。
No.2
- 回答日時:
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(">");
ていねいなご回答ありがとうございます。
わたくしの説明不足から、ちょっと意図していたものとは違いますが、これはこれで一見の価値がありそうです。
少し、勉強させていただきます。
どうもありがとうございました。
No.1
- 回答日時:
<--
推奨されない理由は知りません。が
技術的には可能です。
私以外にやっている人を見たことがないので、
色々な意味での保障はできません。
>を別の文字列としてあつかうこと、
""を使う時の書き方がポイントです。
-->
<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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript javascriptで入力フォームが空欄の時にアラートによるエラーを出すコードを書いています。 2 2023/06/13 17:58
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- PHP PHPでCookieを使った訪問回数について 1 2023/05/28 14:10
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
window.openでタイトル名の指定
-
ホームページに日付を自動更新...
-
なぜ、ジャバスクリプトが表示...
-
javaで画像をランダム表示しつ...
-
document.writeで画面が消える
-
ActiveXobjectが作成できない
-
JavaScriptで決まった「時刻」...
-
C#テキストボックスの文字を配...
-
Boolean型配列中のTrueの有無を...
-
google apps scriptの終了のさせ方
-
関数でy=g(x)のgとは何の略です...
-
jspからjavascriptの変数引継ぎ
-
任意の座標をクリックさせるには
-
Linux バイナリ実行できない "...
-
javascriptでスロットゲームを...
-
javascriptでiframeのURL変更は?
-
javascript 特定のタグのidの存...
-
翌月を取得するGASが分かりません
-
ASP.NETのコントロールの値をJa...
-
VSCODE[Python]の設定について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openでタイトル名の指定
-
ホームページに日付を自動更新...
-
テキストボックスに入力された...
-
for文のiを使ってリンク先のア...
-
○歳△ヶ月と×日を計算してくれる...
-
引数を渡さずに呼び出し元の変...
-
なぜ、ジャバスクリプトが表示...
-
innerHTMLにて設定した情報を再...
-
前のページに戻るとページトッ...
-
更新でランダムでページ内のテ...
-
今日の月と日付の1週間後や3日...
-
「今日の日付けを画像で表示」...
-
java カレンダーの日付指定で...
-
文字列を点滅させたい
-
HTMLを記述しつつサブ窓(showM...
-
条件分岐(IF文)の簡素化
-
Java Scriptのメソッドについて
-
javascriptとphpの連携で疑問
-
現在の日付から、1ヶ月前にす...
-
この方法を教えてください。
おすすめ情報