Javascript-форум - Как с помощью JS вставить скопировать текст из одного поля в другое

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как с помощью JS вставить скопировать текст из одного поля в другое (https://javascript.ru/forum/misc/81595-kak-s-pomoshhyu-js-vstavit-skopirovat-tekst-iz-odnogo-polya-v-drugoe.html)

Как с помощью JS вставить скопировать текст из одного поля в другое

У меня есть форма ввода:

<form id="form01" th:method="POST" th:action="@{/add-car/new}" th:object="${carEntity}">
    <input type="text" id="input01" th:field="*{time}">
    <input type="time" id="input02" th:field="*{time}">
    ...
    <button type="submit" class="btn btn-primary">Save</button>
    <button type="submit" class="btn btn-primary">Delete</button>
</form>

Проблема заключается в том, что Thymeleaf ни как не хочет заносить значение из переменной time в поле ввода. Я понял, что без JS тут не обойтись, а я его ваще не знаю. Как мне с помощью JS скопировать значение value из поля input01 в input02 при нажатии на кнопку Save или при отрисовке формы, если это возможно?
Пробовал сделать вот так:

<form name="form01" ...>
    ...
    <button type="submit" class="btn btn-primary" onclick="setVal()">Сохранить</button>
</form>
<script>
    function setVal() {
        document.getElementById("input02").value = "21:45";
    }
</script>

Не работает
Пробовал отлавливать событие "change" первой формы, чтобы в этом момент сделать присвоение. Так тоже не работает, я подозреваю, что Thymeleaf делает это присвоение на стороне сервера иначе объяснить не могу.

alexmngh,

document.getElementById("input02").value = document.getElementById("input01").value;

Цитата:

Сообщение от рони (Сообщение 531975)

alexmngh,

document.getElementById("input02").value = document.getElementById("input01").value;

Это почти тоже самое, что и я привел в вопросе. Так не работает. Т.е. при нажатии на кнопку это поле остается пустым. Я не знаю почему. Может это как-то связано с Thymeleaf. На другом форуме мне подсказали, что возможно проблема в том, что Кнопка submit по умолчанию вызывает переадресацию страницы. Но как эти победить?

alexmngh,
:-?

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<form id="form01" th:method="POST" th:action="@{/add-car/new}" th:object="${carEntity}">
    <input type="text" id="input01" th:field="*{time}" value="21:45">
    <input type="time" id="input02" th:field="*{time}">
    ...
    <button type="submit" class="btn btn-primary">Save</button>
    <button type="submit" class="btn btn-primary">Delete</button>
</form>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
document.querySelector('.btn').addEventListener( "click" , function(event) {
event.preventDefault();
document.getElementById("input02").value = document.getElementById("input01").value;
   });
  });
</script>

</body>
</html>

Цитата:

Сообщение от рони (Сообщение 531980)

alexmngh,
:-?

<!DOCTYPE html>

document.querySelector('.btn').addEventListener( "click" , function(event) 
</html>

так функция не срабатывала, я добавил id в для кнопки и исправил на
document.getElementById('btn-01').addEventListener( "click" , function(event)

теперь вызывается, и значение заносится в поле, но тут вылезла другая проблема, теперь не отправляется запрос к серверу методом POST

Цитата:

Сообщение от alexmngh

не отправляется запрос к серверу

уберите
event.preventDefault();