フォーム部品の変更を検出する †
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function confirmMove(doc) {
for (i = 0; i < doc.forms.length; ++i) {
for (j = 0; j < doc.forms[i].length; ++j) {
if (edited(doc.forms[i].elements[j])) {
return confirm("入力内容が破棄されます。よろしいですか?");
}
}
}
return true;
}
function edited(item) {
var type = item.type;
if (!type) {
return false;
}
type = type.toUpperCase();
if (type == 'TEXT') {
return item.defaultValue != item.value;
}
if (type == 'HIDDEN') {
return item.defaultValue != item.value;
}
if (type == 'TEXTAREA') {
return item.defaultValue != item.value;
}
if (type == 'CHECKBOX') {
return item.defaultChecked != item.checked;
}
if (type == 'RADIO') {
return item.defaultChecked != item.checked;
}
if (type == 'SELECT-ONE') {
for (i = 0; i < item.options.length; i++ ) {
return item.options[i].defaultSelected != item.options[i].selected;
}
}
return false;
}
function initializeSelectOne(){
for (i = 0; i < document.forms.length; ++i) {
for (j = 0; j < document.forms[i].length; ++j) {
type = document.forms[i].elements[j].type.toUpperCase();
if ( type == 'SELECT-ONE' ) {
var flg = 'false';
for (k = 0; k < document.forms[i].elements[j].options.length; k++ ) {
if(document.forms[i].elements[j].options[k].defaultSelected ){
flg = 'true';
}
}
if(flg === 'false'){
document.forms[i].elements[j].options[0].defaultSelected=true;
}
}
}
}
}
function hoge(form){
if(confirmMove(document)){
alert("true");
} else {
alert("false");
}
}
// -->
</script>
</head>
<body onLoad="initializeSelectOne();">
<form name="test">
<table>
<tr>
<td>
<input type="text" name="text1">
<td>
テキスト1
<tr>
<td>
<input type="text" name="text2" value="text2">
<td>
テキスト2
<tr>
<td>
<input type="radio" name="radio" >
<input type="radio" name="radio" >
<td>
ラジオボタン
<tr>
<td>
<input type="checkbox" name="checkbox" >
<input type="checkbox" name="checkbox" >
<td>
チェックボックス
<tr>
<td>
<select name="OS">
<option value="WIN">Windows
<option value="MAC" selected>Macintosh
<option value="UNIX">UNIX
<option value="OTHER">その他
</select>
<td>
セレクトボックス1:selectedあり
<tr>
<td>
<select name="OS">
<option value="">
<option value="WIN">Windows
<option value="MAC">Macintosh
<option value="UNIX">UNIX
<option value="OTHER">その他
</select>
<td>
セレクトボックス2:selectedなし
<tr>
<td>
<textarea name="area1"></textarea>
<td>
テキストエリア1
<tr>
<td>
<textarea name="area2">textarea2</textarea>
<td>
テキストエリア2
</table>
<input type="button" value="check" onclick="hoge(this.form);">
</form>
</body>
</html>
動作サンプル †