Форум

alexmngh · #1 (**permalink**) 21.12.2020, 19:34

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

<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 делает это присвоение на стороне сервера иначе объяснить не могу.

рони · #2 (**permalink**) 21.12.2020, 20:27

alexmngh,

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

alexmngh · #3 (**permalink**) 22.12.2020, 08:43

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

alexmngh,

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

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

рони · #4 (**permalink**) 22.12.2020, 09:13

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>

alexmngh · #5 (**permalink**) 22.12.2020, 11:10

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

alexmngh,

<!DOCTYPE html>

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

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

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

рони · #6 (**permalink**) 22.12.2020, 13:57

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

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

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

Форум

Справочник

Discord чат

Курсы javascript