※ ChatGPTを利用し、要約された質問です（原文：HTML内の値を取得し、別の箇所にコピーする方法）
HTML内の値を取得し、別の箇所にコピーする方法
2011/06/26 16:54
このQ&Aのポイント
HTML内の値を別の箇所にコピーする方法と2行目の内容を削除する方法を紹介します。
ソースコードの中で指定した要素の値を取得する方法について説明します。
具体的なコード例を交えて、2行目の内容を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-transitional.dtd ">
<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">
<!--
$(function(){
$("#change").click(function(){
$("#text1_1").html("2行目");
$("#text1_2").val("2行目");
$("#text1_3").val("2行目");
$("#text2_1").html("");
$("#text2_2").val("");
$("#text2_3").val("");
});
});
// -->
</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>
以上、宜しくお願いします。
質問の原文を閉じる
質問の原文を表示する
お礼
ご回答ありがとうございます。 ご教示いただいたソースで意図した動作となりました。 このたびはどうもありがとうございました。 以上、よろしくお願いします。