Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" />
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet" />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body class="p-3 m-0 border-0 bd-example">
    <!-- Example Code -->

    <div class="accordion" id="accordionExample">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                    aria-expanded="true" aria-controls="collapseOne">
                    Accordion Item #1
                    <!-- <i class="bi bi-trash"></i> -->
                </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    <form id="my-form">
                        <label for="name">Name:</label>
                        <input type="text" name="name" id="name1" />

                        <label for="name">Name:</label>
                        <input type="text" name="name" id="name2" />

                        <label for="name">Name:</label>
                        <input type="text" name="name" id="name3" />

                        <label for="surname1">Surname 1:</label>
                        <input type="text" name="surname[]" id="surname1" />

                        <label for="surname2">Surname 2:</label>
                        <input type="text" name="surname[]" id="surname2" />

                        <label for="surname3">Surname 3:</label>
                        <input type="text" name="surname[]" id="surname3" />

                        <label for="email">Email:</label>
                        <input type="email" name="email" id="email" />

                        <button type="submit">Submit</button>
                    </form>

                    <!-- Bu HTML elemanları form verilerini içerecek -->
                    <div id="form-data"></div>
                </div>
            </div>
        </div>


        <div id="form-data"></div>

        <script>
            // form elemanına referans al
            const form = document.querySelector('#my-form');

            // form submit olayına bir olay dinleyicisi ekleyin
            form.addEventListener('submit', (e) => {
                e.preventDefault(); // formun varsayılan davranışını durdur

                // form elemanlarını FormData objesi içine doldurun
                const formData = new FormData(form);

                // form verilerini tutmak için bir nesne oluşturun
                const data = {};

                // FormData objesindeki tüm girdileri döngüye sokun ve "data" nesnesine eşleyin
                for (const [key, value] of formData.entries()) {
                    if (data[key]) {
                        data[key].push(value);
                    } else {
                        data[key] = [value];
                    }
                }

                // verileri HTML formatına dönüştürmek için bir fonksiyon tanımlayın
                const toHtml = (key, value) => {
                    let html = '';

                    if (value.length > 1) {
                        html += `<h3>${key}</h3>`;
                        html += '<ul>';
                        value.forEach((v) => {
                            html += `<li>${v}</li>`;
                        });
                        html += '</ul>';
                    } else {
                        html += `<h3>${key}: ${value[0]}</h3>`;
                    }

                    return html;
                };

                // form verilerini HTML formatına dönüştürün ve "form-data" elemanına yerleştirin
                const formDataElem = document.querySelector('#form-data');
                formDataElem.innerHTML = '';

                Object.entries(data).forEach(([key, value]) => {
                    const html = toHtml(key, value);
                    formDataElem.insertAdjacentHTML('beforeend', html);
                });
            });

            const buttons = document.querySelectorAll('.accordion-button');
            buttons.forEach(button => {
                button.insertAdjacentHTML('beforeend', '<i class="bi bi-trash position-absolute" style="right:50!important;"></i>');
            });

            const deleteIcons = document.querySelectorAll('.bi-trash');
            deleteIcons.forEach(icon => {
                icon.addEventListener('click', () => {
                    const accordionItem = icon.closest('.accordion-item');
                    accordionItem.remove();
                });
            });

        </script>

        <!-- End Example Code -->
</body>

</html>
Editor is loading...