【JQuery】Formタグを新規作成し、submitしてPostデータを送信する方法
-
カテゴリ：
- JavaScript
-
タグ：
- #jQuery
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
