|
組織内で使うツールでハマったのでメモ。
入力項目のチェックをHTML5のvalidationでやったあと、
AJAXでCGIを呼び出しする。
最初はsubmitするとvalidationが効かず、AJAX呼び出しとなった。
よくよく調べるとsubmit処理自体の無効化が必要だった。
下が修正後のソース。
いやはや、なんだかんだ1日もハマった。
<script type="text/javascript">
$(function() {
$('#form1').submit(function(event) {
// HTML(submit)での送信をキャンセル
event.preventDefault();
// 処理中画面を表示
$.blockUI({ message: '<h1>処理中・・・</h1>' });
// MACアドレスを変数に保存
var macaddr = $("#mac").val();
// ＊＊＊＊＊＊＊＊処理を非同期呼び出し
$.ajax({
url: './xxxxxxxx.sh', // ポスト先のURL
type: 'GET', // HTTPメソッドの種類
dataType: 'html', // 応答データの種類
data: {
mac: macaddr
},
success: function(data) {
$('#result').html(data);
}, // 通信成功時は応答内容を<div>要素に反映
error: function(xhr, status, err) {
$('#result').html('エラー発生');
} // 通信失敗時は<div>要素にメッセージを表示
}).always(function() {
// 処理中画面を非表示
$.unblockUI();
});
});
});
</script>
</head>
<body>
<h1>＊＊＊＊＊＊＊＊ツール</h1>
<form id="form1">
<p>MACアドレス：<input type="text" id="mac" value="" minlength="12" maxlength="1
7" pattern="^([A-Fa-f0-9]{2}[-:]?){5}[A-Fa-f0-9]{2}" title="アルファベット[a-fA-F]と数字と-:(セパレータ)で12桁〜17桁" autofocus required/></p>
<p><input type="submit" id="btn" value="＊＊＊＊＊実行" /></p>
</form>
<hr>
<div id="result"></div>
</body>
|
コメント（0）
