Как сделать форму добавления в заказ продукции на чистом JavaScript?

Ссылка скопирована
HTML JavaScript
2 мая 2026 1 ответ

Есть сайт на нём реализовано добавление пончиков в корзину. Как сделать такую же витрину на чистом JavaScript? Пример с сайта в картинке:

Как сделать форму добавления в заказ продукции на чистом JavaScript?

Я понимаю, что это банально просто, но как это всё связать с HTML? Может у кого-то есть готовые примеры(типа добавления в корзине)

Дополнительно:

но как это всё связать с HTML?

По id или data-атрибутам.
https://learn.javascript.ru/modifying-document

По-хорошему, вопрос нужно конкретизировать или даже разбить на несколько.

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Кирилл JS Ответ

Для создания формы добавления продукции в заказ на чистом JavaScript, вам нужно создать HTML-разметку для формы и написать соответствующий JavaScript-код для обработки данных.

Пример HTML-разметки:

 
    <label for="productName">Название продукта:</label>
 
    <label for="quantity">Количество:</label>
 
    <button type="submit">Добавить в заказ</button>

<label for="productName">Название продукта:</label> <label for="quantity">Количество:</label> <button type="submit">Добавить в заказ</button>

Пример JavaScript-кода для обработки данных из формы и добавления их в заказ:

document.getElementById('orderForm').addEventListener('submit', function(event) {
    event.preventDefault();
 
    var productName = document.getElementById('productName').value;
    var quantity = document.getElementById('quantity').value;
 
    if(productName &amp;&amp; quantity) {
        var orderItem = {
            productName: productName,
            quantity: quantity
        };
 
        // Добавляем товар в заказ (например, в массив)
        addToOrder(orderItem);
 
        // Очищаем форму
        document.getElementById('productName').value = '';
        document.getElementById('quantity').value = '';
    } else {
        alert('Пожалуйста, заполните все поля формы');
    }
});
 
function addToOrder(item) {
    // Добавляем товар в заказ (можно реализовать по-разному, например, добавить в массив или отправить на сервер)
    console.log('Товар добавлен в заказ:', item);
}

document.getElementById('orderForm').addEventListener('submit', function(event) { event.preventDefault(); var productName = document.getElementById('productName').value; var quantity = document.getElementById('quantity').value; if(productName &amp;&amp; quantity) { var orderItem = { productName: productName, quantity: quantity }; // Добавляем товар в заказ (например, в массив) addToOrder(orderItem); // Очищаем форму document.getElementById('productName').value = ''; document.getElementById('quantity').value = ''; } else { alert('Пожалуйста, заполните все поля формы'); } }); function addToOrder(item) { // Добавляем товар в заказ (можно реализовать по-разному, например, добавить в массив или отправить на сервер) console.log('Товар добавлен в заказ:', item); }

Этот код создает форму с полями "Название продукта" и "Количество" и кнопкой "Добавить в заказ". При отправке формы данные из полей извлекаются, проверяются на пустоту и, если все заполнено, создается объект с информацией о товаре. Этот объект можно добавить в заказ, вызвав функцию `addToOrder`.

При необходимости можно дополнить код логикой для работы с заказом (например, отображение добавленных товаров или отправка на сервер).

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ