JavaScript/フォームの変更を検出する

フォーム部品の変更を検出する
動作サンプル
フォーム部品の変更を検出する †

<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>
テキスト１
<tr>
<td>
<input type="text" name="text2" value="text2">
<td>
テキスト２

<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>
セレクトボックス１：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>
セレクトボックス２：selectedなし

<tr>
<td>
<textarea name="area1"></textarea>
<td>
テキストエリア１

<tr>
<td>
<textarea name="area2">textarea2</textarea>
<td>
テキストエリア２

</table>
<input type="button" value="check" onclick="hoge(this.form);">
</form>

</body>
</html>
↑
JavaScript/フォームの変更を検出する

MENU

人気の20件

最新の10件

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

動作サンプル †
