formでPOSTするのと同じ動作をボタンとjavascriptで実現したいのですが

質問

<form name="myFORM" method="POST" action="xxx.php">
<input type="text" name="NAME">
<input type="submit" value="送信">
</form>
上記と同じ動作を
<button onclick="fpost('tanaka','POST','xxx.php')">送信</button>
とjavascriptで実現したいのですが可能でしょうか？
可能でしたらどのようなスクリプトになりますでしょうか？
document.myFORM.submit();とかではなく、formタグを全く使わずPOSTしページ遷移したいのですが。
XMLHttpRequestとlocation.replace()とかでできるのでしょうか？？
すみませんがよろしくお願い致します。

回答No.4

yambejp · ベストアンサー

削除に関しては各行でform処理をするとして、更新の方は
各行のデータを総なめして更新するようなものになるのでしょうか・・・

DOMに関しては、こんな風にしてやると汎用性があがります。
<script>
function hoge(){
var f=document.getElementById("f0")
if(f) f.parentNode.removeChild(f);
var f = document.createElement("form");
f.setAttribute("action","***.php");
f.setAttribute("method","get");
f.setAttribute("id","f0");
f.style.display="none";
var i = document.createElement("input");
i.setAttribute("name","fuga");
i.setAttribute("value","xxx");
f.appendChild(i);
var i = document.createElement("input");
i.setAttribute("name","piyo");
i.setAttribute("value","yyy");
f.appendChild(i);
document.getElementsByTagName("body")[0].appendChild(f);
f.submit();
}
</script>
<input type="button" value="test" onClick="hoge()">

お礼

> 各行のデータを総なめして更新するようなものになるのでしょうか・・・
そうです
具体的な例まで書いていただいてたいへん助かりました！
ありがとうございました！！

回答No.5

noname#87714

飛び先が同じならこれでいいと思います。

<form action="xxx.php" method="POST">
<!-- 個々の削除ボタン -->
<input type="submit" name="sakujo" value="sakujo0"/>
<input type="submit" name="sakujo" value="sakujo1"/>
<input type="submit" name="sakujo" value="sakujo2"/>
<input type="submit" name="sakujo" value="sakujo3"/>
<input type="submit" name="sakujo" value="sakujo4"/>
<input type="submit" name="sakujo" value="sakujo5"/>

<!-- 最後の決定ボタン -->
<input type="submit" name="kettei" value="kettei"/>
</form>

受け手の CGI のほうには、
xxx.php?sakujo=sakujo3
とか
xxx.php?kettei=kettei
などのリクエストが送られます。(ただ正確にはブラウザ間で違うらしいのでちゃんとチェックしたほうがいいみたいです)

こちらを参考にしました。
http://www.akatsukinishisu.net/itazuragaki/html/multiple_submit_buttons.html

お礼

あ、なるほど。動的に作るのはjavascriptよりもformの方が安全と思いますので、これも進めてみます。
ありがとうございました！！

回答No.3

yambejp

＞form1の中にform2を置きたい

これはform1とform2の飛び先が違うということでしょうか？
であれば、ボタンを押したときにactionを変更するだけでよいでしょう。
余計なデータが送られてくるのを避けたいのであれば、不要な
項目にdisabledをつけるとか・・・

まぁそれとは別に、ボタンを押すたびに、DOMで新規にformを
つくっておくるという方法もあるかもしれません

お礼

DOMでやれそうな気がしますので試してみます。
ありがとうございました！！

補足

例えば１行のデータが name age tel の様な数要素で、これが数行ある表で、各行に削除ボタン（form2）があり、表の末尾に全体を更新するボタン（form1）があるような形で、飛び先は同じです。この様な場合の常套手段の様な物がありますでしょうか？

DOMで新規にとは以下の様な感じでしょうか？
var f = document.createElement("form");
document.body.appendChild(f);
f.action = "***.php";
f.method = "POST"
f.submit();
のような感じでしょうか？

回答No.2

yambejp

ページの変遷なしにという意味ですか？
であればAjaxでの処理になりますね。POSTも可能です。
Ajaxの場合はドメインの制限などもろもろクリアすべき課題もあります。

ページが変遷するのであればフォームをsubmitしてやるのが
妥当でしょう。

補足

ページの変遷はさせたいです。
form1の中にform2を置きたいのですが、入れ子ができないのでform2はボタンにしてjavascriptでPOSTしたいのです。
ダミーのform2を別に作ってこれをsubmitしてみたのですが、あまりきれいでは無いし、汎用に使えたらと思うのでjavascriptだけでPOSTできないかと思い質問させていただきました。説明が悪くてたいへん申し訳ありません。

回答No.1

fujillin

表示しないformを利用するのが、一番簡単だと思うけど？
<form method="POST" action="xxx.php">
<input type="hidden" name="NAME">
</form>

＞formタグを全く使わずPOSTし～～
formを使用すると、何が問題なのでしょうか？

postでなくても良いなら
location.href='xxx.php?NAME=' + val;
みたいな方法もあるけど…
Ajaxでないとダメな理由はなんなのだろうか？

補足

受け取ったデータが見えないようにしたかったのでGETではなくPOSTかなと思いました。
Ajaxをしたいわけではありません。javascript,POSTで調べていてXMLHttpRequestが出てきた物ですから。
javascriptだけでデータを作ってPOSTしてページ遷移できたらいろいろ使い回しができて便利かなと思いました。
説明が悪くて申し訳ありません。