【JQuery】Formタグを新規作成し、submitしてPostデータを送信する方法

JQueryで既存にあるFormタグとは別に新しくFromタグを作成し、さらにPOSTデータをサーバ側にリクエストする方法をご紹介します。

 

用途としては、既存のFormとはリクエストするURLが異なる場合や、POSTするデータが異なるときに重宝するかと思います。

 

サンプルとして以下のようなHTMLがあるとします。

<html>
<head>
	<title>sample test</title>
</head>
<body>
	<form action="sample01.php" method="post">
		<input type="text" id="name1" name="name1" />
		<input type="submit" id="shori1" value="処理1" />
		<input type="button" id="shori2" value="処理2" />
	</form>
</body>
</html>

上記は「処理1」ボタンを押下することで、sample01.phpにPOSTするサンプルになります。

これに対して「処理2」ボタンを押下すると、sample02.phpPOST処理をJQueryで書くと以下のようになります。

<script type="text/javascript">
$('#shori2').click(function() {
  $('<form/>', {action: 'sample.02php', method: 'post'})
  .append($('<input/>', {type: 'hidden', name: 'account', value: 'TEST'}))
  .append($('<input/>', {type: 'hidden', name: 'name2', value: $('#name1').val()}))
  .appendTo(document.body)
  .submit();
});
</script>

 

以上です。



投稿日:2020-05-20    更新日:2020-05-20

[スポンサーリンク]

関連記事
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
サイト内検索
プロフィール

プロフィール

[Name : じゃぶじゃぶ(@jbjb_2019)]
都内で社内SEをしているおじさん。
仕事で得られる知識だけでは限界を感じ、 WEBの勉強がてらITブログを開始。
サーバからWEBサイトまでフルスクラッチで開発しました。
現在は勉強のモチベーションを保つために活用中。
興味があることを雑記的に書いていきます。

[スポンサーリンク]

[スポンサードリンク]