![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
下記のソースで書き換え実行ボタンを押下すると、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">
<!--
$(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>
以上、宜しくお願いします。
No.1ベストアンサー
- 回答日時:
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("");
ご回答ありがとうございます。
ご教示いただいたソースで意図した動作となりました。
このたびはどうもありがとうございました。
以上、よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS 私の能力からして間違っていないような気がします。 4 2022/09/30 13:24
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
バッチファイル 特定ウインドウ...
-
PDFを(htmlのように)無限に縦...
-
GASでスプレッドシートの一番上...
-
以下のURL入れますか?皆さんは↓
-
画像のドットの部分が抜けてい...
-
Chinapost こよパズルどう動か...
-
非同期通信で掲示板を作る際の...
-
非同期通信を使うタイミングが...
-
PYTHONのtkinterについて
-
Pythonのtkinterについて
-
Pythonを勉強する道のり
-
Pythonを無料(安価)で学ぶ方...
-
RPA(PowerAutomate)の実装について
-
ワードでA3横の画面にして、文...
-
入力フォームの値をQRコードで...
-
課題なのですがどなたかコード...
-
自作の地図をグーグルマップの...
-
Pythonのjupiter Labを使ってます
-
Pythonのプログラム初心者の問題
-
1w=1j.s
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
aspxでIFみたいなことがしたい
-
ASP.netで、CheckBoxListのSele...
-
<asp>タグの属性情報が取得でき...
-
ASP.NETで質問です。
-
ASP.NETでTimerコントロールを...
-
javascriptでlabelの値取得
-
FormView から別画面でカレンダ...
-
HTML内の値を取得し、別の箇所...
-
aspxのページにjQueryのloadメ...
-
ASP.Net DataBound時Style変2
-
HTMLの値の渡し方について質問...
-
フォームのtextareaにnl2brを使...
-
ACCESSのレポートの表示...
-
遷移先のURLにパラメータを表示...
-
write downとfill outの違いを...
-
機種依存文字
-
<br>が文字列で出力されてしま...
-
C#のRichTextBoxで表示行数を取...
-
javascriptで結果表示テキスト...
-
改行したいのですが
おすすめ情報