Форма на bootstrap и jquery

Форма на bootstrap и jquery При нажатии на кнопку Создать КП Появляется форма из 4 полей в эти поля загружаются данные 1 создать input position_project 2 создать input c value из <input type="text" name="search-query" id="search-query" class="form-control" placeholder="исполнение..."> 3 создать input с number quantity_query 4 создать input с value <input type="number" id="pfixsum"> после создания создается массив и сохраняется в local storoge Дальше нище кнопка добавить еще раз добавить это поле и опять сохранить данные Напротив каждой созданной формы есть кнопка удалить поле и удалить в массиве local storoge эти данные тоже Если есть массив local storoge то восстанавливаем поля для продолжения например после перезагрузке страницы

Вот рабочий пример на Bootstrap 5 и jQuery, реализующий:

Кнопку "Создать КП"
Динамическое создание формы из 4 input-полей
Сохранение данных в localStorage
Удаление отдельных полей и обновление localStorage
Восстановление данных после перезагрузки страницы

✅ HTML + Bootstrap

html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>КП Форма</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
    <h3>Коммерческое предложение</h3>
    <button id="createFormBtn" class="btn btn-primary mb-3">Создать КП</button>
    <div id="formContainer"></div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function () {
    const formKey = 'kpForms';

    function saveToLocalStorage(data) {
        localStorage.setItem(formKey, JSON.stringify(data));
    }

    function getFromLocalStorage() {
        return JSON.parse(localStorage.getItem(formKey)) || [];
    }

    function generateForm(index, formData = {}) {
        return `
        <div class="card mb-3 form-entry" data-index="${index}">
            <div class="card-body">
                <div class="row g-2 align-items-center">
                    <div class="col-md-3">
                        <input type="text" class="form-control position_project" placeholder="Position" value="${formData.position_project || ''}">
                    </div>
                    <div class="col-md-3">
                        <input type="text" class="form-control search-query" placeholder="исполнение..." value="${formData.search_query || ''}">
                    </div>
                    <div class="col-md-2">
                        <input type="number" class="form-control quantity_query" placeholder="Количество" value="${formData.quantity_query || ''}">
                    </div>
                    <div class="col-md-2">
                        <input type="number" class="form-control pfixsum" placeholder="Сумма" value="${formData.pfixsum || ''}">
                    </div>
                    <div class="col-md-2">
                        <button class="btn btn-danger removeBtn">Удалить</button>
                    </div>
                </div>
            </div>
        </div>`;
    }

    function renderForms() {
        const formDataArray = getFromLocalStorage();
        $('#formContainer').empty();
        formDataArray.forEach((data, index) => {
            $('#formContainer').append(generateForm(index, data));
        });
    }

    function collectFormsData() {
        let data = [];
        $('#formContainer .form-entry').each(function () {
            const entry = $(this);
            data.push({
                position_project: entry.find('.position_project').val(),
                search_query: entry.find('.search-query').val(),
                quantity_query: entry.find('.quantity_query').val(),
                pfixsum: entry.find('.pfixsum').val()
            });
        });
        return data;
    }

    // Добавление новой формы
    $('#createFormBtn').on('click', function () {
        const data = getFromLocalStorage();
        data.push({}); // пустая форма
        saveToLocalStorage(data);
        renderForms();
    });

    // Удаление формы
    $('#formContainer').on('click', '.removeBtn', function () {
        const index = $(this).closest('.form-entry').data('index');
        let data = getFromLocalStorage();
        data.splice(index, 1);
        saveToLocalStorage(data);
        renderForms();
    });

    // Автосохранение при изменении полей
    $('#formContainer').on('input', 'input', function () {
        const updatedData = collectFormsData();
        saveToLocalStorage(updatedData);
    });

    // Восстановление данных при загрузке
    renderForms();
});
</script>

</body>
</html>

🧠 Как работает:

localStorage['kpForms'] содержит массив объектов:

json
[
  {
    "position_project": "Item 1",
    "search_query": "исполнение 1",
    "quantity_query": "3",
    "pfixsum": "1000"
  },
  ...
]

После перезагрузки — поля восстанавливаются.
Все изменения сразу сохраняются.
Каждая форма имеет кнопку "Удалить", которая также обновляет хранилище.

Хочешь добавить кнопку "Сохранить всё" или экспорт в PDF/Excel — дай знать, и я помогу.

При создания новой записи почему данные не берутся по id="search-query" id="pfixsum"

Отличный вопрос! Причина, почему данные не берутся по id="search-query" и id="pfixsum", заключается в следующем:

❗ Проблема: ID должен быть уникальным

id="search-query" и id="pfixsum" — это уникальные идентификаторы по стандарту HTML. То есть на странице должен быть только один элемент с каждым id.

👉 Когда ты создаёшь несколько форм с одинаковыми id, браузер не может правильно обращаться к ним, а jQuery (например, $('#search-query')) всегда будет возвращать только первый найденный элемент.

✅ Решение: Используй `class` вместо `id`

Если ты хочешь, чтобы у каждого поля был отдельный input, с которого можно легко забирать данные — используй классы, например:

html
<input type="text" class="form-control search-query" placeholder="исполнение..." value="...">
<input type="number" class="form-control pfixsum" placeholder="Сумма" value="...">

А в jQuery получай данные так:

js
entry.find('.search-query').val();
entry.find('.pfixsum').val();

🔄 Альтернатива — динамически генерировать уникальные ID

Если тебе всё же нужно использовать id, можно генерировать их динамически:

js
<input type="text" id="search-query-0" ...>
<input type="text" id="search-query-1" ...>

Но тогда ты должен следить за синхронизацией этих id и использовать селекторы типа:

js
$('#search-query-' + index).val();

✍️ Вывод:

Для динамически создаваемых элементов лучше использовать class, а не id
Никогда не дублируй один и тот же id в HTML — это нарушает стандарт и ломает поведение

Если хочешь, я могу отредактировать пример выше, чтобы показать как правильно внедрить динамические id, если ты всё же хочешь использовать их.

На странице динамически меняются id="search-query" и id="pfixsum" И когда нажимает сохранить createFormBtn Мы берем данные из id="search-query" и id="pfixsum" и добавляем в созданное новое поля .search-query и .pfixsum Но так чтобы они не перезаписывали ранее созданные

Понял задачу:
Ты хочешь при нажатии на "Создать КП":

Взять значения из существующих полей:
- id="search-query"
- id="pfixsum"
Добавить новую форму, где эти значения будут записаны в соответствующие поля (.search-query, .pfixsum).
При этом не затрагивать и не перезаписывать уже созданные формы.

🔧 Решение:

Предположим, у тебя есть поля вне формы:

html
<!-- Статичные внешние поля -->
<input type="text" id="search-query" placeholder="исполнение..." class="form-control mb-2">
<input type="number" id="pfixsum" placeholder="Сумма" class="form-control mb-3">

При нажатии на кнопку "Создать КП", мы:

Получаем значения из #search-query и #pfixsum
Добавляем новую форму с этими значениями
Не трогаем старые формы, потому что каждое новое добавление — это новый объект в массиве

✅ Обновлённый пример JavaScript

Дополню тот же подход:

javascript
$('#createFormBtn').on('click', function () {
    const searchVal = $('#search-query').val();
    const pfixVal = $('#pfixsum').val();

    const newData = {
        position_project: '', // можно добавить отдельный input, если надо
        search_query: searchVal,
        quantity_query: '',
        pfixsum: pfixVal
    };

    const data = getFromLocalStorage();
    data.push(newData); // добавляем, не заменяя
    saveToLocalStorage(data);
    renderForms();
});

🧩 Итоговая структура HTML (выдержка)

html
<!-- Внешние исходные поля -->
<div class="mb-3">
    <label>Исполнение:</label>
    <input type="text" id="search-query" class="form-control" placeholder="исполнение...">
</div>
<div class="mb-3">
    <label>Сумма:</label>
    <input type="number" id="pfixsum" class="form-control" placeholder="Сумма">
</div>

<button id="createFormBtn" class="btn btn-primary">Создать КП</button>

<!-- Контейнер с формами -->
<div id="formContainer" class="mt-4"></div>

📦 Результат:

Каждое нажатие на "Создать КП":
- Читает данные из #search-query и #pfixsum
- Добавляет новую запись
- Сохраняет в localStorage, не трогая старые записи
- Восстанавливает всё корректно при перезагрузке

Хочешь — соберу всю HTML-страницу в одном куске с этой логикой. Напиши, если надо.

ChatGPT может допускать ошибки. Рекомендуем проверять важную информацию.

Вы сказали:

ChatGPT сказал:

✅ HTML + Bootstrap

🧠 Как работает:

Вы сказали:

ChatGPT сказал:

❗ Проблема: ID должен быть уникальным

✅ Решение: Используй class вместо id

🔄 Альтернатива — динамически генерировать уникальные ID

✍️ Вывод:

Вы сказали:

ChatGPT сказал:

🔧 Решение:

✅ Обновлённый пример JavaScript

🧩 Итоговая структура HTML (выдержка)

📦 Результат:

✅ Решение: Используй `class` вместо `id`