【20140425】【jQuery】自由にPOST用のフォームを生成するアプリ
お題
自由にPOST用のフォームを生成するアプリを作成する
アプリ概要
URLとname属性を自由に指定してformを生成し、
送信ボタンを押すとそのURLに対して指定したname属性と値で
POSTリクエストを投げる。
ソース
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>POSTフォーム作成</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<style>
body {
background-color: green;
}
</style>
</head>
<body background="">
<h3>POSTフォーム作成</h3>
<input type="text" id="url" placeholder="URLを入力"><br><br>
<input type="text" id="param" placeholder="パラメータ名を入力"><br><br>
<input type="text" id="val" placeholder="パラメータの値を入力"><br><br>
<form id="form1" method="post" action="#">
<div id="div1">
</div>
<div id="div2">
</div>
</form>
<input type="button" id="button1" value="フォームを生成"><br><br>
<input type="button" id="button2" value="サブミットボタンを生成"><br><br>
<script>
$(function() {
$('#button1').click(function() {
var param = $('#param').val();
var val = $('#val').val();
$('#div1').append('<span>name属性：' + param + ' </span>' + '<input type="text" name="' + param + '" value="' + val + '"/><br><br>')
});
$('#button2').click(function() {
var url = $('#url').val();
$('#form1').attr('action', url);
$('#div2').append('<span>URL:' + url + ' </span>' + '<input type="submit" value="送信"><br><br>');
});
});
</script>
</body>
</html>URL
