前提・実現したいこと
当方、プログラムは勉強中のため、記載に不備があった場合は申し訳ございません。
ご指摘いただけますと幸いです。
複数の入力可能なテキストフォームがあり、一つのテキストフォームに文字を入力したら、同じ属性を持つ他のテキストフォームにも内容を反映したいと考えております。
同期させるフォームは複数になる予定で、フォームの数は、条件により0~5個程度の数で変動する予定です。
例
自分の名前を入力する「フォームA、フォームB、フォームC」
相手の名前を入力する「フォーム1 フォーム2」
住所を入力する「フォームい フォームろ フォームは フォームに」
日程を入力する「(存在しない)」
上記のようなフォームが存在する場合、「A、B、C」「1、2」「い、ろ、は、に」がそれぞれ同期する状態を理想としています。
文字列の反映はである必要は有りません。
「onChange」のタイミングで同期されればよいとおもっております。
現在固定された2つのフォームを相互に参照させる形で同期させることはできましたが
フォームの数が変動する場合の処理が判らず手間取っております。
JavaScriptで実現出来ないでしょうか。
ご助言いただけますようよろしくお願いします。
発生している問題・エラーメッセージ
・同期をさせたいフォームの数が変動する場合の処理
・フォームに固定のIDを設けることが出来ないため、class、name等の値を参照した同期
上記2点の実現方法を模索しております。
該当のソースコード
HTML
1<input type="text" name="name" id="nameA" onChange="copyTo('nameA','nameB')"> 2<input type="text" name="name" id="nameB" onChange="copyTo('nameB','nameA')"> 3<input type="text" name="name" id="nameD" onChange="copyTo('nameD','nameE')"> 4<input type="text" name="name" id="nameE" onChange="copyTo('nameE','nameD')">
javaScript
1<script> 2 function copyTo(fromId, toId){ 3 var fromTag = document.getElementById(fromId); 4 var toTag = document.getElementById(toId); 5 toTag.value = fromTag.value; 6 } 7</script>
試したこと
現在、上記のソースで固定された2つのフォームを相互参照状態にすることには成功しました。
idをclassやnameに変更し、scriptをgetElementsByClassNameやgetElementsByNameに変更して実行しましたが、
同期はしませんでした。
回答1件
あなたの回答
tips
プレビュー