二重送信防止
<![CDATA[
var flag = false;
function check(){
if( flag ) {
return false;
}
flag = true;
return true;
}
]]>
<![CDATA[
<form onsubmit="return check()" method="post">
]]>
＜応用＞連打防止付きボタン
<![CDATA[
<html>
<head>
<title>連打防止</title>
<script type="text/javascript">
<!--
submitted = false;
function formSubmit(button) {
if (submitted == false) {
submitted = true;
button.form.submit();
button.disabled = true;
} else {
alert("送信中です。お待ちください。");
}
}
//-->
</script>
</head>
<body>
<form method="post" action="post.php">
<script type="text/javascript">
<!--
document.write(
"<input type='button' value='送信' onClick='return formSubmit(this);'>");
//-->
</script>
<noscript>
<input type="submit" value="送信">
</noscript>
</form>
</body>
</head>
</html>
]]>
＜参考＞送信ボタンを無効にする方法
<![CDATA[
function submitForm() {
document.form1.button1.disabled = true;
document.form1.submit();
}
<form method="post" name="form1>
<input type="button" value="送信" name="button1" onClick="submitForm();" />
]]>
フォームボタンの並べ方
テーブルの1行にサブミットボタンを複数表示したい場合、ボタンの位置がきれいに並ばないことがあります。
（１）ボタンの位置が上に寄る
<![CDATA[
<table border="1">
<tr>
<td>機能を選択してください</td>
<td>
<form action="A.php">
<input type="submit" value="機能A" />
</form>
</td>
<td>
<form action="B.php">
<input type="submit" value="機能B" />
</form>
</td>
</tr>
</table>
]]>
（２）formタグをtdタグの外に置く
formタグをtdタグの外に置くときれいに配置できます。
<![CDATA[
<table border="1">
<tr>
<td>機能を選択してください</td>
<form action="A.php">
<td>
<input type="submit" value="機能A" />
</td>
</form>
<form action="B.php">
<td>
<input type="submit" value="機能B" />
</td>
</form>
</tr>
</table>]]>
（３）tdタグ内に複数のボタンを配置
1つのtdタグ内に複数のボタンを配置する場合にも、余分な余白が生じます。
<![CDATA[
<table border="1">
<tr>
<td>機能を選択してください</td>
<td>
<form action="A.php" >
<input type="submit" value="機能A" />
</form>
<form action="B.php">
<input type="submit" value="機能B" />
</form>
</td>
</tr>
</table>
]]>
（４）CSSで余白を除く
formタグ内でCSSを使って余白を押さえることができます。ただし、ボタンは縦並びになります。
<![CDATA[
<table border="1">
<tr>
<td>機能を選択してください</td>
<td>
<form action="A.php" style="margin-top : 0px; margin-left : 0px; margin-right : 0px;margin-bottom : 0px;">
<input type="submit" value="機能A" />
</form>
<form action="B.php" style="margin-top : 0px; margin-left : 0px; margin-right : 0px;margin-bottom : 0px;">
<input type="submit" value="機能B" />
</form>
</td>
</tr>
</table>
]]>
（５）JavaScript使用
formタグを1つにして、JavaScriptで送信先を指定するようにすれば、tdタグ内で横並びになります。
<![CDATA[
table border="1">
<tr>
<form>
<td>機能を選択してください</td>
<td>
<input type="submit" value="機能A" onclick="this.form.action='A.php'"/>
<input type="submit" value="機能B" onclick="this.form.action='B.php'"/>
</td>
</form>
</tr>
</table>
]]>
フォームの文字化け防止
フォームから入力した文字を正しく判断させるためには、hiddenタグを使ってダミーの文字列を一緒に送り出します。
<![CDATA[
<form method="post" action="">
<inupt type hidden" name="dummy" value="ダミーです" />
<input type="submit" valuie="送信" />
</form>
]]>
