例えば複数人で泊まるホテルを予約する時、宿泊者の情報を入力する際に2人目以降の住所記入欄に「代表者と同じ」みたいなチェックボックス があったりしますよね。でチェック入れたら1人目のフォームに入れてる住所が勝手に入力されるみたいな。それやります。
仕様
「代表者（1人目）と同じ情報を入力する」というチェックボタンを入れると2人目の入力フォームに1人目のフォームの値がコピペ される。
その後2人目のフォームを編集した場合チェックボックスのチェックが外れる
実装
以下のようなHTMLファイルでフォームを作成していることを想定します。
<!-- フォーム例 -->
<!-- 1人目 -->
<div class="first">
<input type="text" id="name1" required>
<input type="text" id="address1" required>
</div>
<!-- 2人目 -->
<!-- チェックボックス -->
<input id="is_same_as_1" type="checkbox" /><label for="is_same_as_1">代表者（1人目）と同じ情報を入力</label>
<div class="second">
<input type="text" id="name2">
<input type="text" id="address2">
</div>
私が実際に実装したのはDjangoのHTMLで、フォームはinputタグではなく別のファイルで定義したものを引用する形でした。
その場合は、divタグで囲うなどでもして無理やりidを与えるか、生成されたフォームを直接右クリック→「検証」を押して自動生成されたidを調べるだけでも大丈夫です。
JavaScript でフォームの自動入力
htmlファイルのbodyタグの最後にscriptタグで以下のコードを書きます。
<body>
...
<script>
$(function () {
// チェックボックスを指定
let is_same_as_1 = document.getElementById('is_same_as_1');
// チェックを入れたときコピペを実行
$('#is_same_as_1').click(function(){
let name1 = $('#name1').val();
let address1 = $('#address1').val();
if (is_same_as_1.checked == true){
$("#name2").val(name1);
$("#address2").val(address1);
}
});
// 2人目のフォームを編集したときチェックを外す
$('#name2').change(function() {
$("#is_same_as_1").prop("checked", false);
});
$('#address2').change(function() {
$("#is_same_as_1").prop("checked", false);
});
});
</script>
</body>
終わり