フォームで入力した値を別のフォームにコピーする

解決済

質問者：hana-fuji
質問日時：2008/09/19 13:52
回答数：2件

はじめまして！

javascriptでフォームAに入力した内容を
ボタンが押されたら同一ページのフォームBに
ペーストされるscriptを作りたいのですが
そういったスクリプトを公開しているものがあれば
教えていただきたいです。よろしくお願いいたします。

やりたい事：

[フォームA]---------------------
　お名前：テキスト
　性別：ラジオボタン
　趣味：セレクトボックス
　コメント：テキストエリア

　[コピーボタン]←内容をコピーするボタン
--------------------------------

↓コピーボタンが押されたら↓

[フォームB]---------------------
　お名前：テキスト
　性別：ラジオボタン
　趣味：セレクトボックス
　コメント：テキストエリア
--------------------------------
Aフォームに入力した内容Bフォームに反映される

よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： _pipi_
回答日時：2008/09/19 15:00

<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のマルチには未対応
フォームはまったく同じ順序であること

- 0
- 件

通報する

No.2

回答者： yambejp
回答日時：2008/09/19 15:02

厳密にやるにはもっと細かい設定が必要ですが

単純にやるならいかの方法でいけます
ただし、いくつかの条件が必要です。
・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>