【js】フォームの内容を特定の要素に即反映


[フォームの内容を特定の要素に即反映させようとしているのですが、... - W3Q](http://w3q.jp/t/8020)を見て、

* ラジオボタンを選択
* チェックボックスを選択

を作るにはどうすればいいか勉強がてら考えてみた。
HTMLは以下、ブラウザは手もとにあったMacのSafari,Firefox,Chromeで確認した。
※WindowsとくにIEは不具合がありそうだなーとは思っている。

```html
<form id="sampleForm">
    【入力欄】
    <br />
    名前：<input type="text" name="formName" value="太郎">
    <br />
    地域：
        <select name="formArea">
            <option selected>関東</option>
            <option>東海</option>
            <option>関西</option>
        </select>
    <br />
    年齢：
        <select name="formAge">
            <option selected>10代</option>
            <option>20代</option>
            <option>30代</option>
        </select>
    <br />
    コメント：<textarea name="formComent">コメント</textarea>
    <br />
    性別：
    <input type="radio" name="formSex" value="男" checked>男
    <input type="radio" name="formSex" value="女">女
    <br />
    職業：
    <input type="radio" name="formJob" value="会社員" checked>会社員
    <input type="radio" name="formJob" value="自営業">自営業
    <input type="radio" name="formJob" value="その他">その他
    <br />
    趣味：
    <input type="checkbox" name="formHobby" value="映画鑑賞" checked>映画鑑賞
    <input type="checkbox" name="formHobby" value="読書">読書
    <input type="checkbox" name="formHobby" value="その他">その他
    <br />
</form>
<div id="sampleOutput">
    【出力欄】
    <br />
    名前：<span id="sampleOutputName"></span>
    <br />
    地域：<span id="sampleOutputArea"></span>
    <br />
    年齢：<span id="sampleOutputAge"></span>
    <br />
    コメント：<span id="sampleOutputComent"></span>
    <br />
    性別：<span id="sampleOutputSex"></span>
    <br />
    職業：<span id="sampleOutputJob"></span>
    <br />
    趣味：<span id="sampleOutputHobby"></span>
    <br />
</div>
```


#普通のjsの場合

```js

window.onload = function () {
    getValue();
    var $formObject = document.getElementById( "sampleForm" );
    for( var $i = 0; $i < $formObject.length; $i++ ) {
        $formObject.elements[$i].onkeyup = function(){
            getValue();
        };
        $formObject.elements[$i].onchange = function(){
            getValue();
        };
    }
};
function getValue() {
    var $formObject = document.getElementById( "sampleForm" );
    
    //input[name=text]
    document.getElementById( "sampleOutputName" ).innerHTML = $formObject.formName.value;
    
     //select
    document.getElementById( "sampleOutputArea" ).innerHTML = $formObject.formArea.value;
    document.getElementById( "sampleOutputAge" ).innerHTML = $formObject.formAge.value;
    
     //textarea
    document.getElementById( "sampleOutputComent" ).innerHTML = $formObject.formComent.value;
    
    //input[name=radio] ※自力
    //$formObject.formSex.checked.valueっていうのはできないし、$formObject.formSex.valueにするとSafariでundefinedになるのでいろいろ試行錯誤した    
    document.getElementById( "sampleOutputSex" ).innerHTML = $formObject.querySelector('input[name="formSex"]:checked').value; 
    document.getElementById( "sampleOutputJob" ).innerHTML = $formObject.querySelector('input[name="formJob"]:checked').value;
    
    //input[name=checkbox] ※自力
    document.getElementById( "sampleOutputHobby" ).innerHTML = ''; //いったん中身を削除
        for(var $i = 0; $i<$formObject.formHobby.length;$i++) { //複数checkedされていることもあるので、forでまわす（まわさないと1番目のしか取れない）
        if($formObject.formHobby[$i].checked) {
            document.getElementById( "sampleOutputHobby" ).innerHTML += $formObject.formHobby[$i].value + ' ';
        }
    }
}
```

デモ：[【js】フォームの内容を特定の要素に即反映 - jsdo.it](http://jsdo.it/Ituki/uRBL)

##jQuery版


```js
$(function(){
    getValue();
    $('#sampleForm input,#sampleForm select,#sampleForm textarea').bind('blur keydown keyup keypress change',function(){
        getValue();
    });
});

function getValue() {
    
    //input[name=text]
    $("#sampleOutputName").text($('input[name=formName]').val());
    
    //select
    $("#sampleOutputArea").text($('select[name=formArea]').val());
    $("#sampleOutputAge").text($('select[name=formAge]').val());
    
    //textarea
    $("#sampleOutputComent").text($('textarea[name=formComent]').val());
    
    //input[name=radio]
    $("#sampleOutputSex").text($('input[name=formSex]:checked').val());
    $("#sampleOutputJob").text($('input[name=formJob]:checked').val());
    
    //input[name=checkbox] 
    $("#sampleOutputHobby").text(''); //いったん中身を削除
    $('input[name=formHobby]:checked').each(function(){ //複数checkedされていることもあるので、eachでまわす（まわさないと1番目のしか取れない）
        $("#sampleOutputHobby").text($("#sampleOutputHobby").text()+' '+$(this).val());
    });
}
```

デモ：[forked: 【js】フォームの内容を特定の要素に即反映 jQuery版 - jsdo.it](http://jsdo.it/Ituki/ZnmF)

##jQuery改良版
いちいち書かなくていいようにしてみた。

```js
$(function(){
    getValue();
    $('#sampleForm input,#sampleForm select,#sampleForm textarea').bind('blur keydown keyup keypress change',function(){
        getValue();
    });
});

function getValue() {
    
    $('span[id ^= "sampleOutput"]').each(function(){
         var name = $(this).attr('id').replace("sampleOutput", ""),
             $ele = $('*[name=form'+name+']');
         
        //input[name=text],select,textarea
        if($ele.is('textarea') || $ele.is('input[type=text]')||$ele.is('select')) {
             $(this).text($ele.val());
            
         //input[name=radio]
         } else if($ele.is('input[type=radio]')) {
             $(this).text($ele.filter(':checked').val());
         
         //input[name=checkbox] 
         } else if($ele.is('input[type=checkbox]')) {
             var $this = $(this);
             $this.text(''); //いったん中身を削除
             $ele.filter(':checked').each(function(){ //複数checkedされていることもあるので、eachでまわす（まわさないと1番目のしか取れない）
                $this.text($this.text()+' '+$(this).val());
            });
         }
     });
}

```

デモ：[forked: 【js】フォームの内容を特定の要素に即反映 jQuery改良版 - jsdo.it](http://jsdo.it/Ituki/aO1U)

##4/10追記　$.map()を使うともっと良さそう

###jQuery＋$.map()版

```js
$(function(){
    getValue();
    $('#sampleForm input,#sampleForm select,#sampleForm textarea').bind('blur keydown keyup keypress change',function(){
        getValue();
    });
});

function getValue() {
    
    //input[name=text]
    $("#sampleOutputName").text($('input[name=formName]').val());
    
    //select
    $("#sampleOutputArea").text($('select[name=formArea]').val());
    $("#sampleOutputAge").text($('select[name=formAge]').val());
    
    //textarea
    $("#sampleOutputComent").text($('textarea[name=formComent]').val());
    
    //input[name=radio]
    $("#sampleOutputSex").text($('input[name=formSex]:checked').val());
    $("#sampleOutputJob").text($('input[name=formJob]:checked').val());
    
    //input[name=checkbox] 
    $("#sampleOutputHobby").text($('input[name=formHobby]:checked').map(function(){
        return $(this).val();
    }).get().join(' '));
}
```

デモ：[forked: 【js】フォームの内容を特定の要素に即反映 jQuery＋$.map()版 - jsdo.it](http://jsdo.it/Ituki/hY2d)

###jQuery改良＋$.map()版

```js
$(function(){
    getValue();
    $('#sampleForm input,#sampleForm select,#sampleForm textarea').bind('blur keydown keyup keypress change',function(){
        getValue();
    });
});

function getValue() {
    
    $('span[id ^= "sampleOutput"]').each(function(){
         var name = $(this).attr('id').replace("sampleOutput", ""),
             $ele = $('*[name=form'+name+']');
         
        //input[name=text],select,textarea
        if($ele.is('textarea') || $ele.is('input[type=text]')||$ele.is('select')) {
             $(this).text($ele.val());
            
         //input[name=radio]
         } else if($ele.is('input[type=radio]')) {
             $(this).text($ele.filter(':checked').val());
         
         //input[name=checkbox] 
         } else if($ele.is('input[type=checkbox]')) {
             $(this).text($ele.filter(':checked').map(function(){
                return $(this).val();
            }).get().join(' '));
         }
     });
}
```

デモ：[forked: 【js】フォームの内容を特定の要素に即反映 jQuery改良＋$.map()版 - jsdo.it](http://jsdo.it/Ituki/hkWm)