フォームの内容の変更を特定の要素に即反映させるjQuery

投稿日: 2013年12月12日作成者: alphasis

jQueryを使い、フォーム内のフォーム部品の値の変更を、特定の要素内に直ぐに出力させる方法。

実装例

【出力欄】
名前：
地域：
年齢：
コメント：

実装例の動作について

「サンプル」の「【入力欄】」のフォーム部品の内容を変更すると、直ぐに「【出力欄】」に反映される。

ソースコード

JavaScript

<script type="text/javascript">
jQuery( function() {
getValue();
var $formObjectInputs = jQuery( '#sampleForm :input' );
$formObjectInputs.change( function() { getValue(); } );
$formObjectInputs.keyup( function() { getValue(); } );
} );
function getValue() {
var $formObject = jQuery( '#sampleForm' );
jQuery( '#sampleOutputName' ).html( $formObject.find( '[name=formName]' ).val() );
jQuery( '#sampleOutputArea' ).html( $formObject.find( '[name=formArea]' ).val() );
jQuery( '#sampleOutputAge' ).html( $formObject.find( '[name=formAge]' ).val() );
jQuery( '#sampleOutputComent' ).html( $formObject.find( '[name=formComent]' ).val() );
}
</script>

主に使用しているAPI

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

CSS

<style>
#sampleForm,
#sampleOutput {
width: 500px;
margin: 10px;
padding: 10px;
border: 1px solid gray;
border-radius: 10px;
}
#sampleForm {
background-color: #f0f8ff;
}
#sampleOutput {
background-color: #00ffff;
}
#sampleForm * {
margin: 0 0 7px 0;
vertical-align: text-top;
}
</style>

カテゴリー: API, JavaScript, jQuery, フォーム, 逆引きパーマリンク