このような感じで複数のテキストボックスに入力した値を別の複数のテキストボックスに代入することは可能でしょうか。
var textForm1 = document.getElementById("textForm1").value;
var tf1 = document.getElementById("tf1");
tf1.value = textForm1;
このような感じで複数のテキストボックスに入力した値を別の複数のテキストボックスに代入することは可能でしょうか。
var textForm1 = document.getElementById("textForm1").value;
var tf1 = document.getElementById("tf1");
tf1.value = textForm1;
このような感じで複数のテキストボックスに入力した値を別の複数のテキストボックスに代入することは可能でしょうか。
上のコメントにも書きましたが、可能です。
できなかったと言ってる人がいるので証拠を。
以下のコードで、
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', () => {
var textForm1 = document.getElementById("textForm1").value;
var tf1 = document.getElementById("tf1");
tf1.value = textForm1;
});
</script>
</head>
<body>
<input id="textForm1" type="text" value="textForm1 の value"/>
⇒
<input id="tf1" type="text" />
</body>
</html>
結果は以下の通りとなります。
できなかったとすると、タイミングの問題では?(JavaScript のコードが動く時は input type="text" 要素の DOM がまだ生成されてないとか)
何を求めているのか謎なので、何を答えるべきかわかりませんね。type="module"
と書くのも一つの答えになりますでしょうか。
<script type="module">
var textForm1 = document.getElementById("textForm1").value;
var tf1 = document.getElementById("tf1");
tf1.value = textForm1;
</script>
<input id="textForm1" type="text" value="textForm1 の value">
⇒
<input id="tf1" type="text">
index.htmlとmain.jsを同じフォルダに置き、index.htmlをクリックして開きます。
インプットボックスの01に文字列を入力するか変更し、Enterキーを押すかマウスでどこかをクリックすると、同じ文字列が02と03にもコピーされます。
<!-- index.html -->
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='https://code.jquery.com/jquery-3.3.1.min.js' integrity='sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=' crossorigin='anonymous'></script>
<script src='./main.js'></script>
<title>Text copy</title>
</head>
<body>
<label for='01'>01</label>
<input type='text' id='01'><br>
<label for='02'>02</label>
<input type='text' id='02'><br>
<label for='03'>03</label>
<input type='text' id='03'><br>
</body>
</html>
// main.js
'use strict';
$(() => {
$('#01').on('change', () => {
$('#02').val($('#01').val());
$('#03').val($('#01').val());
});
});
多分質問にはHTML全体を貼った方がいいですよ。
以下は代入できない例です。
質問編集のご参考までに。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script>
var textForm1 = document.getElementById("textForm1").value;
var tf1 = document.getElementById("tf1");
tf1.value = textForm1;
</script>
</head>
<body>
<form>
textForm1:<input id="textForm1" type="text" value="ほげ">
tf1: <input id="tf1" type="text">
</form>
</body>
</html>