script google app comment form 2

このまま組み込むとscript google app comment formのようにページ遷移が発生してしまうために

dummyのiframeをターゲットとして挿入しtargetをdummyにする 
<form ~~ target="dummy">
<iframe name="dummy" id="dummy" src=""></iframe>
<html>
<body>
<form action="https://spreadsheets.google.com/spreadsheet/formResponse?formkey=dGl0WW94WnUtT0lKLXpzMWJHeDl5VkE6MQ&amp;ifq" method="POST" id="ss-form" target="dummy">
<input type="hidden" name="entry.0.single" value="藻類HOME" class="ss-q-short" id="entry_0" />
<input type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1" />
<textarea name="entry.2.single" rows="8" cols="75" class="ss-q-long" id="entry_2"></textarea>
<input type="hidden" name="pageNumber" value="0" />
<input type="hidden" name="backupCache" value="" />
<input type="submit" name="submit" value="Submit" />
</form>
<iframe name="dummy" id="dummy" src=""></iframe>
</body>
</html>

これでiframe dummyが身代わりになってページ遷移してくれる
./img/du.png

あとは適当なところでこのdummyのstyleを

style="display:none;"

にすればいい

また、これでは実際に送信したのかどうか分からないので、このようなスクリプトをつけて、フォームが送信されたらフォームの中身を消すようにする。submitのonclickにはこのメソッドをreturn付きで指定する

	<input type="submit" onclick="return send();" name="submit" value="Submit" />
<script type="text/javascript">
function send() {
		text1 = jQuery.trim($('#entry_1').val());
		text2 = jQuery.trim($('#entry_2').val());

		if( text2 == '' | text1=='')return false;
		
		$.ajax({
			type: "POST",
			url: "https://spreadsheets.google.com/spreadsheet/formResponse?formkey=dGl0WW94WnUtT0lKLXpzMWJHeDl5VkE6MQ&amp;ifq",
			
			success: function(msg) {
				$('#dummy').attr("src","");
				$('#entry_1').val('');
				$('#entry_2').val('');
			}
		});
};
</script>

何れかが空である場合はfalseがreturnされて実行されないが、okで合った場合は実際に送信されて、successでフォームの値、dummyフレームの内容が白紙にされる. urlの値はformのaction先と同一です
*jquery必要です

script google app comment form 3

関連: script google app comment form script google app script google app comment form 3 script
土, 4 30, '11

Leave your comments
    inserted by FC2 system