-PR-
  • すぐに回答を!
  • 質問No.6836525
解決
済み

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

  • 閲覧数480
  • ありがとう数11
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 89% (204/228)

下記のソースで書き換え実行ボタンを押下すると、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>

以上、宜しくお願いします。
  • 回答数1
  • 気になる数0

質問者が選んだベストアンサー

  • 回答No.1
レベル10

ベストアンサー率 87% (97/111)

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("");
お礼コメント
iroha_168

お礼率 89% (204/228)

ご回答ありがとうございます。
ご教示いただいたソースで意図した動作となりました。

このたびはどうもありがとうございました。
以上、よろしくお願いします。
投稿日時 - 2011-06-26 21:51:34
  • ありがとう数0
-PR-
-PR-
  • 回答数1
  • 気になる数0
このQ&Aのテーマ
このQ&Aで解決しましたか?

関連するQ&A

-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ