Страница для магазина книг
Доброго времени суток уважаемые форумчане! Задача над которой пытаюсь работать: "Создать html-страницу для магазина книг. Пользователь должен иметь возможность выбрать книгу, указать количество экземпляров, ввести свое имя, дату доставки, адрес доставки и комментарий. После заполнения формы необходимо вывести на экран: «Имя покупателя, спасибо за заказ. Такой-то товар будет доставлен в такую-то дату по такому-то адресу»(пользоваться html, css, javascript)". Помогите пожалуйста разобраться с JS кодом.
<!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">
<title>Book store</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="first_book">
<h2>Книга-1</h2>
<button>
выбрать
</button>
</div>
<div class="second_book">
<h2>Книга-2</h2>
<button>
выбрать
</button>
</div>
<div class="third_book">
<h2>Книга-3</h2>
<button>
выбрать
</button>
</div>
<div class="shopping_window">
<form action="">
<label for="title">
<span>Книга:</span>
<input type="text" id="title" name="title" 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="Отправить">
</form>
</div>
</div>
<div class="message_user">
<span>Имя Покупателя</span>
<p>спасибо за заказ.</p>
<span>Книга-1</span>
<p> будет доставлен </p>
<span>в такую-то дату</span>
<p>по адресу</p>
<span> адрес покупателя </span>
</div>
<script src="script.js"></script>
</body>
</html>
.wrapper {
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;
}
.message_user {
visibility: hidden;
opacity: 0;
}
|
Цитата:
Вот и весь скрипт... |
underground,
Как минимум должно быть три блока: Витрина, Корзина, Заказ (Касса). Начни с этого. Для отправки заказа на почту нужен будет php, какой-нибудь mail класс. |
Rise, так ему может чисто лабораторку какую сделать...
|
Цитата:
|
Цитата:
|
Получается застрял на этапе вставки значения полей в текст "ответа". Дальше пока что-то тупик.....
<!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">
<title>Book store</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<form action="">
<div class="first_book">
<h2>Книга-1</h2>
<input type="button" value="выбрать" onclick="optionAdd(this.form.screen, 'Книга-1')"/>
</div>
<div class="second_book">
<h2>Книга-2</h2>
<input type="button" value="выбрать" onclick="optionAdd(this.form.screen, 'Книга-2')"/>
</div>
<div class="third_book">
<h2>Книга-3</h2>
<input type="button" value="выбрать" onclick="optionAdd(this.form.screen, 'Книга-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="deliveryDate" ></span>
<p>по адресу</p>
<span id="buyerAddress" ></span>
</div>
<script src="script.js"></script>
</body>
</html>
<style>
.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>
function optionAdd(input, character) {
if(input.value == null) {
input.value = character
} else {
input.value += character
}
}
let invisibleVisible = document.getElementById("field");
let anotherOn = document.getElementById("send");
anotherOn.addEventListener("click", function() {
event.preventDefault();
if (invisibleVisible.classList.contains("invisible")) {
invisibleVisible.classList.remove("invisible");
}
});
let buyerName = document.querySelector('#buyerName');
let book = document.querySelector('#book');
let deliveryDate = document.querySelector('#deliveryDate');
let buyerAddress = document.querySelector('#buyerAddress');
</script>
|
Цитата:
На него нужно повесить функцию-обработчик. В этой функции прочитать поля. Потом их значения вставлять в текст ответа. |
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>
|
Большое спасибо!
|
| Часовой пояс GMT +3, время: 23:09. |