- ベストアンサー
フォームで入力した値を別のフォームにコピーする
はじめまして！ javascriptでフォームAに入力した内容を ボタンが押されたら同一ページのフォームBに ペーストされるscriptを作りたいのですが そういったスクリプトを公開しているものがあれば 教えていただきたいです。よろしくお願いいたします。 やりたい事： [フォームA]--------------------- お名前：テキスト 性別：ラジオボタン 趣味：セレクトボックス コメント：テキストエリア [コピーボタン]←内容をコピーするボタン -------------------------------- ↓コピーボタンが押されたら↓ [フォームB]--------------------- お名前：テキスト 性別：ラジオボタン 趣味：セレクトボックス コメント：テキストエリア -------------------------------- Aフォームに入力した内容Bフォームに反映される よろしくお願いいたします。
- hana-fuji
- お礼率41% (7/17)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<html> <body> <form id="a"> <input type="text" value="osiete goo"><br> <input type="radio" value="m" name="sex">男 <input type="radio" value="w" name="sex" checked>女<br> <select> <option value="0">子供の遊び</option> <option value="1" selected>大人の遊び</option> </select><br> <textarea>あぁ～</textarea> <input type="button" value="copy" onclick="copyFormValue(this.form,'b')"> </form> <form id="b"> <input type="text" value=""><br> <input type="radio" value="m" name="sex">男 <input type="radio" value="w" name="sex">女<br> <select> <option value="0">子供の遊び</option> <option value="1">大人の遊び</option> </select><br> <textarea></textarea> </form> <script> function copyFormValue(moto,sore){ var om=moto.elements; var os=document.getElementById(sore).elements; for(var i=0,m=om.length;i<m;i++){ var f=om[i].type; if(f!='button') if(f!=os[i].type) { alert('ちがう');return;} switch(f){ case 'text': case 'textarea': case 'hidden': os[i].value=om[i].value;break; case 'checkbox': case 'radio': os[i].checked=om[i].checked; break; case 'select-one': os[i].options[om[i].selectedIndex].selected=true; } } } </script> </body> </html> selectのマルチには未対応 フォームはまったく同じ順序であること
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
厳密にやるにはもっと細かい設定が必要ですが 単純にやるならいかの方法でいけます ただし、いくつかの条件が必要です。 ・nameでひもづける。 ・radio以外おなじ名前の要素をつかわない ・radioやselectは同じ要素数にする <script> function copyForm(){ var a=document.getElementById("a"); var b=document.getElementById("b"); for(var i=0;i<a.length;i++){ var n=a[i].name; if(!b[n]) continue; switch(a[i].type){ case "text": case "textarea": b[n].value=a[i].value;; break; case "select-one": b[n].selectedIndex=a[i].selectedIndex; break; case "checkbox": b[n].checked=a[i].checked; break; case "radio": if(a[i].checked){ for(var j=0;j<a[n].length;j++){ if(a[i]==a[n][j]) break; } b[n][j].checked=true; break; } } } } </script> <form id="a"> お名前：<input type="text" name="name"><br> 性別：<input type="radio" name="sex" value="0">男 <input type="radio" name="sex" value="0">女<br> 趣味：<select name="hobby"> <option value="">選択</option> <option value="x">x</option> <option value="y">y</option> <option value="z">z</option> </select><br> コメント：<textarea name="comment">テキストエリア</textarea><br> ついで：<input type="checkbox" name="tuide" value="1"><br> <input type="button" value="コピー" onClick="copyForm()"> </form> <form id="b"> お名前：<input type="text" name="name"><br> 性別：<input type="radio" name="sex" value="0">男 <input type="radio" name="sex" value="0">女<br> 趣味：<select name="hobby"> <option value="">選択</option> <option value="x">x</option> <option value="y">y</option> <option value="z">z</option> </select><br> コメント：<textarea name="comment"></textarea><br> ついで：<input type="checkbox" name="tuide" value="1"><br> </form>
