underground,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.wrapper form {
display: flex;
}
label {
display: block;
}
label span {
display: inline-block;
width: 170px;
}
label input {
display: inline-block;
width: 170px;
}
textarea {
resize: none;
}
.first_book {
border: 1px solid black;
width: 23%;
height: 300px;
}
.second_book {
border: 1px solid black;
width: 23%;
height: 300px;
}
.third_book {
border: 1px solid black;
width: 23%;
height: 300px;
}
.shopping_window {
border: 1px solid black;
width: 31%;
height: 300px;
}
.invisible {
visibility: hidden;
opacity: 0;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector(".wrapper form");
form.addEventListener("click", function(event) {
event.preventDefault();
let target = event.target;
if (target.closest(".book")) {
this.screen.value = target.dataset.name;
};
if (target.closest("#send")) {
buyerName.textContent = this.nam.value;
book.textContent = `${this.screen.value} в кол-ве ${this.quantity.value}шт.`;
date.textContent = this.deliveryDate.value;
buyerAddress.textContent = this.deliveryAddress.value;
field.classList.remove("invisible");
}
});
})
</script>
</head>
<body>
<div class="wrapper">
<form action="">
<div class="first_book">
<h2>Книга-1</h2>
<input type="button" value="выбрать" class="book" data-name="Книга-1" />
</div>
<div class="second_book">
<h2>Книга-2</h2>
<input type="button" value="выбрать" class="book" data-name="Книга-2" />
</div>
<div class="third_book">
<h2>Книга-3</h2>
<input type="button" value="выбрать" class="book" data-name="Книга-3" />
</div>
<div class="shopping_window">
<label for="title">
<span>Книга:</span>
<input type="text" name="screen" id="result" disabled/>
</label>
<label for="quantity">
<span>Количество:</span>
<input type="number" id="quantity" name="quantity">
</label>
<label for="nam">
<span>Имя:</span>
<input type="text" id="nam" name="nam" placeholder="Ваше Имя">
</label>
<label for="deliveryAddress">
<span>Адрес доставки:</span>
<input type="text" id="deliveryAddress" name="deliveryAddress">
</label>
<label for="deliveryDate">
<span>Дата доставки:</span>
<input type="date" id="deliveryDate" name="deliveryDate">
</label>
<label for="comment">
<span>Комментарий:</span>
<textarea name="comment" id="comment" cols="21" rows="10"></textarea>
</label>
<input type="submit" value="Отправить" id="send">
</div>
</form>
</div>
<div id="field" class="invisible">
<span id="buyerName"></span>
<p>спасибо за заказ.</p>
<span id="book"></span>
<p> будет доставлен </p>
<span id="date"></span>
<p>по адресу</p>
<span id="buyerAddress"></span>
</div>
</body>
</html>