LoginSignup
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@ituki_b(ituki)

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

Last updated at Posted at 2015-04-08

フォームの内容を特定の要素に即反映させようとしているのですが、... - W3Qを見て、

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

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

<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の場合


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

jQuery版

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

jQuery改良版

いちいち書かなくていいようにしてみた。

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

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

jQuery＋$.map()版

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

jQuery改良＋$.map()版

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

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?