jQueryで値をコピーしたい

実現したいこと

[1] <input>要素に入力されたテキストを別の<input>要素や<p>要素にコピーしたい

前提

フォームの<input>要素に入力されたテキストを別のidを持つ<input>要素あるいは<p>要素の値として表示させたいです。環境は、Windows10 64bit版です。ブラウザはGoogle Chromeの最新版(64bit; 111.0.5563.110（Official Build))を使用しています。

発生している問題・エラーメッセージ

Google ChromeのConsle Logを見ていますが、エラーメッセージはありません。
submitボタンをクリックした瞬間、<input>要素と<p>要素に入力した内容が表示されるのですが、消えてしまいます。

該当のソースコード

jQuery/HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>DEMO</title>
6    <script src="./static/js/jquery-3.6.3.min.js"></script>
7</head>
8<body>
9
10<form action="#" method="POST">
11    <label for="aaa">label for aaa</label>
12    <input type="text" id="aaa">
13    <input type="text" id="ccc">
14    <input type="submit" id="bbb" value="SUBMIT">
15</form>
16
17<p id="ddd"></p>
18    
19<script>
20$(document).ready(function(){
21    $("#bbb").on("click",function(){
22        let ggg = $("#aaa").val();
23        $("#ccc").val(ggg);
24        $("#ddd").html(ggg);
25    });
26});
27</script>
28
29</body>
30</html>

試したこと

$(document).on("click",function(){
});
という表記に変更してみたのですが、結果は同じでした。

補足情報（FW/ツールのバージョンなど）

jQuery = v3.6.3

行動規範の内容に同意します

回答3件

formタグは指定先に入力情報を送信するものなので、送信先がない、送信しない場合は使用しません。
またsubmitボタンは所属formの入力情報を送信するものなので、送信しないのであればbuttonにしましょう。

投稿2023/03/31 05:44

編集2023/03/31 06:17

m.ts10806

総合スコア80888

submitするということはそういうことです。
（データをサーバーにおくって新しいページを読み込む＝入力したデータが消える）
ページの遷移を抑制していいならイベントを調整してください

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
2<script>
3$(function(){
4  $("#bbb").on("click",function(e){
5    e.preventDefault();
6    let ggg = $("#aaa").val();
7    $("#ccc").val(ggg);
8    $("#ddd").html(ggg);
9  });
10});
11</script>
12
13<form action="#" method="POST">
14    <label for="aaa">label for aaa</label>
15    <input type="text" id="aaa">
16    <input type="text" id="ccc">
17    <input type="submit" id="bbb" value="SUBMIT">
18</form>
19<p id="ddd"></p>

投稿2023/03/31 04:19

編集2023/03/31 04:20

yambejp

総合スコア117624

formタグを使うと、type="submit"した際に、
action属性で指定したページ（#）に飛ばされてしまいます。

なので下記のように使用しないようにします。

js
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>DEMO</title>
6  <script src="./static/js/jquery-3.6.3.min.js"></script>
7</head>
8<body>
9
10  <label for="aaa">label for aaa</label>
11  <input type="text" id="aaa">
12  <input type="text" id="ccc">
13  <button id="bbb">SUBMIT</button>
14
15  <p id="ddd"></p>
16
17  <script>
18    $(document).ready(function () {
19      $("#bbb").on("click", function () {
20        let ggg = $("#aaa").val();
21        $("#ccc").val(ggg);
22        $("#ddd").html(ggg);
23      });
24    });
25  </script>
26</body>
27</html>