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 回答日時： 2009/03/23 23:25

削除に関しては各行で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()">

この回答へのお礼

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

お礼日時：2009/03/24 05:34

No.5 回答者： edvakf 回答日時： 2009/03/24 04:22

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

<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/ …

この回答へのお礼

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

お礼日時：2009/03/24 05:59

No.3 回答者： yambejp 回答日時： 2009/03/23 17:50

＞form1の中にform2を置きたい

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

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

この回答への補足

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

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

補足日時：2009/03/23 20:10

この回答へのお礼

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

お礼日時：2009/03/23 20:14

No.2 回答者： yambejp 回答日時： 2009/03/23 15:44

ページの変遷なしにという意味ですか？

であればAjaxでの処理になりますね。POSTも可能です。
Ajaxの場合はドメインの制限などもろもろクリアすべき課題もあります。

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

この回答への補足

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

補足日時：2009/03/23 16:06

No.1 回答者： fujillin 回答日時： 2009/03/23 15:40

表示しない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してページ遷移できたらいろいろ使い回しができて便利かなと思いました。
説明が悪くて申し訳ありません。

補足日時：2009/03/23 16:26