HTML内の値を取得し、別の箇所にコピーする方法

解決済

質問者：iroha_168
質問日時：2011/06/26 16:54
回答数：1件

下記のソースで書き換え実行ボタンを押下すると、2行目の表示内容を1行目にコピーした上で、2行目の内容を削除したいと思いました。

2行目の内容の削除は下記の3行で出来ていると思います。
$("#text2_1").html("");
$("#text2_2").val("");
$("#text2_3").val("");

ただし、2行目の内容を1行目にコピーする所がわかりませんでした。

$("#text1_1").html("2行目");
$("#text1_2").val("2行目");
$("#text1_3").val("2行目");

上記3行の「2行目」と固定で記述されている箇所の代わりに、下記3行の値を取得する記述をしないといけないのかと思ったのですが、どのように記述すればよいかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。

<div id="text2_1">2行目</div>
<input type="text" name="text2_2" id="text2_2" value="2行目" />
<input type="hidden" name="text2_3" id="text2_3" value="2行目" />

【ソース】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

</script>
<title>title</title>
</head>
<body>
<form>
<input id="change" type="button" value="書き換え実行" />
</form>
<br />
<div id="text1_1">1行目</div>
<input type="text" name="text1_2" id="text1_2" value="1行目" />
<input type="hidden" name="text1_3" id="text1_3" value="1行目" />
<div id="text2_1">2行目</div>
<input type="text" name="text2_2" id="text2_2" value="2行目" />
<input type="hidden" name="text2_3" id="text2_3" value="2行目" />
</body>
</html>

以上、宜しくお願いします。

通報する

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

質問の本文を隠す

回答 (1件)

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

No.1ベストアンサー

回答者： mikemike7
回答日時：2011/06/26 17:47

HTML要素とインプット要素はそれぞれ以下のように取得できます。

var html = $("#text2_1").html();
var value = $("#text2_2"").val();

なので、以下のようにすれば書き換わるはずです。

$("#text1_1").html($("#text2_1").html());
$("#text1_2").val($("#text2_2").val());
$("#text1_3").val($("#text2_3").val());
$("#text2_1").html("");
$("#text2_2").val("");
$("#text2_3").val("");