フォーム部品の変更を検出する

<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> 

動作サンプル

ƥȣ
ƥȣ
饸ܥ
饸ܥ󣲡checked
åܥå
åܥåchecked
쥯ȥܥåselected
쥯ȥܥåselectedʤ
ƥȥꥢ
ƥȥꥢ

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2017-04-07 (金) 16:01:32 (252d)