Avatar billede kodak Mester
15. maj 2023 - 18:00 Der er 3 kommentarer

Underlig opførsel JavaScript

Jeg har opbygget dette som fra db vælger en svg fil der skal hånteres, når filen er hentet tjekkes der for hvor mange '<text' elementer der har arttributen der hedder name som starter med field_  (field_1, field_2, ...)
ud fra dette tilføjer den x antal inputs.
Så snart jeg udfylder disse udfylder den text valuen og det viser den live.

Men det er som om at når den til sidst skal gemme det, så overser den noget.
eller glemmer noget. Outputtet er som om den har en tidligere Cash hængendene som den udfylder med i stedet.

så hvordan så jeg den til ikke at lave de bugs?

Jeg vil samtidig også ha mulighed for at, tjekke hvis to felter er ens så skal den outputte det i et text element med navn="half_x" i stedet for den originale 'fiels_x'


<!DOCTYPE html>
<html>
    <title>Form Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <style>
        .custom-label {
            width: 100px;
            /* Indstil den ønskede bredde for label */
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script>
        function replaceText(svgFieldChange) {
            // Hent formværdien
            var field = document.getElementById(svgFieldChange).value;
            // Hent inputværdien af 'tavle'
            var tavleValue = document.getElementById('tavleInput').value;
            // Hent SVG-filen
            var svgFile = document.getElementById('svgFile').contentDocument;
            // Erstat tekstelementerne
            var textElements = svgFile.querySelectorAll('text[name="' + svgFieldChange + '"]');
            for (var i = 0; i < textElements.length; i++) {
                // Tjek om 'tavle' input ikke er tomt
                if (tavleValue !== '') {
                    textElements[i].textContent = tavleValue + field;
                } else {
                    textElements[i].textContent = field;
                }
            }
        }

        function updateSVGFilePath() {
            // Hent den valgte SVG-filsti
            var svgFilePath = document.getElementById('svgSelect').value;
            // Indstil data attributten for SVG-objektet for at indlæse den valgte SVG-fil
            document.getElementById('svgFile').setAttribute('data', svgFilePath);
        }
    </script>
    </head>
    <body>
        <div class="container">
            <h1>Form Example</h1>
            <form id="myForm">
                <div class="input-group input-group-sm mb-3">
                    <div class="input-group-prepend">
                        <label for="nameInput" class="input-group-text custom-label">Name</label>
                    </div>
                    <input type="text" class="form-control" id="nameInput" placeholder="Udfyld Navn eller Telefon nr.">
                </div>
                <div class="input-group input-group-sm mb-3">
                    <div class="input-group-prepend">
                        <label for="type" class="input-group-text custom-label">Model</label>
                    </div>
                    <select class="form-control" id="type" name="type" onchange="updateSVGFilePath(this.value)">
                        <option value="">Vælg en model</option> <?php
                        // Hent typer fra MySQL-database ved hjælp af PDO
                        $servername = "host";
                        $username = "user";
                        $password = "pass";
                        $dbname = "db";
                       
                        try {
                            $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
                            $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
                           
                            $stmt = $conn->prepare("SELECT id, title, manufacture, svg_bg FROM your_table_name");
                            $stmt->execute();
                           
                            $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
                           
                            foreach ($result as $row) {
                                echo '
                            <option value="svg_temps/old ' . $row['svg_bg'] . '">' . $row['manufacture'] . ' - ' . $row['title'] . '</option>';
                            }

                        } catch(PDOException $e) {
                            echo "Connection failed: " . $e->getMessage();
                        }

                        $conn = null;
                    ?>
                    </select>
                </div>
                <div class="input-group input-group-sm mb-3">
                    <div class="input-group-prepend">
                        <label for="field_${i}" class="input-group-text custom-label">Lokalitet</label>
                    </div>
                    <input type="text" id="buildingInput" name="buildingInput" placeholder="Bygning" class="form-control" aria-describedby="inputGroup-sizing-sm">
                    <input type="text" id="levelInput" name="levelInput" placeholder="Etage" class="form-control" aria-describedby="inputGroup-sizing-sm">
                    <input type="text" id="roomInput" name="roomInput" placeholder="Rum" class="form-control" aria-describedby="inputGroup-sizing-sm">
                </div>
                <div class="input-group input-group-sm mb-3">
                    <div class="input-group-prepend">
                        <label for="amountInput" class="input-group-text custom-label">Antal</label>
                    </div>
                    <input type="text" class="form-control" id="amountInput" placeholder="Antal bestillinger">
                </div>
                <div class="input-group input-group-sm mb-3">
                    <div class="input-group-prepend">
                        <label for="tavleInput" class="input-group-text custom-label">Tavle</label>
                    </div>
                    <input type="text" class="form-control" id="tavleInput" name="tavle" placeholder="Udfyld tavle nr.">
                </div>
                <div id="dynamic-fields"></div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
        <object id="svgFile" data="" type="image/svg+xml"></object>
        <script>
            // Funktion til at hente SVG-filen
            async function fetchSVGFile(svgFilePath) {
                const response = await fetch(svgFilePath);
                const svgContent = await response.text();
                return svgContent;
            }

            function countTextElements(svgContent) {
                const parser = new DOMParser();
                const svgDoc = parser.parseFromString(svgContent, "image/svg+xml");
                // Vælg alle tekstelementer med 'name'-attributten, der starter med 'field_'
                const textElements = svgDoc.querySelectorAll('text[name^="field_"]');
                return textElements.length;
            }
            // Generer formularinput baseret på antallet af tekstelementer
            function generateFormInputs(textElementsCount) {
                let formInputs = "";
                for (let i = 1; i <= textElementsCount; i++) {
                    const inputElement = `
           
                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <label for="field_${i}" class="input-group-text custom-label">Felt ${i}</label>
                        </div>
                        <input type="text" id="field_${i}" name="field_${i}" placeholder="Felt ${i}" class="form-control" oninput="replaceText('field_${i}')" aria-describedby="inputGroup-sizing-sm">
                        <select class="form-select" id="type_${i}" name="type_${i}" >
                            <option value="1">Type</option>
                            <option value="1">Alm</option>
                            <option value="2">EDB</option>
                            <option value="0"></option>
                            <option value="3">Lys</option>
                        </select>
                    </div>
                `;
                    formInputs += inputElement;
                }
                return formInputs;
            }
            // Opdater SVG-filstien og hent SVG-filen
            function updateSVGFilePath(value) {
                const svgFilePath = value;
                // Indstil dataattributten for SVG-objektet for at indlæse den valgte SVG-fil
                document.getElementById('svgFile').setAttribute('data', svgFilePath);
                fetchSVGFile(svgFilePath).then((svgContent) => {
                    const textElementsCount = countTextElements(svgContent);
                    const formInputs = generateFormInputs(textElementsCount);
                    const formInputsContainer = document.getElementById("dynamic-fields");
                    formInputsContainer.innerHTML = formInputs;
                    // Tilføj begivenhedslyttere til formularinput
                    const formInputsElements = formInputsContainer.getElementsByTagName("input");
                    for (let i = 0; i < formInputsElements.length; i++) {
                        formInputsElements[i].addEventListener("input", function() {
                            updateSVGText(svgContent, i, this.value);
                        });
                    }
                }).catch((error) => {
                    console.error("Error fetching SVG file:", error);
                });
            }
            // Opdater tekstelementerne i SVG med de nye værdier
            function updateSVGText(svgContent, index, value) {
                const parser = new DOMParser();
                const svgDoc = parser.parseFromString(svgContent, "image/svg+xml");
                const textElement = svgDoc.querySelector(`text[id^="Felt_x0020_"][class^="fil4 fnt1"]:nth-of-type(${index + 1})`);
                if (textElement) {
                    textElement.textContent = value;
                }
                const serializer = new XMLSerializer();
                const updatedSVGContent = serializer.serializeToString(svgDoc);
                // Gem den opdaterede SVG-fil med de nye tekstværdier
                saveUpdatedSVGFile(updatedSVGContent);
            }
            // Funktion til at gemme den opdaterede SVG-fil
            function saveUpdatedSVG(svgContent) {
                const formData = new FormData();
                formData.append('svgContent', svgContent);
               
                fetch('save_svg.php', {
                    method: 'POST',
                    body: formData
                })

                .then(response => response.text())
                .then(result => {
                    console.log(result);
                })
               
                .catch(error => {
                    console.error('Error saving SVG file:', error);
                });
            }
        </script>
    </body>
</html>
Avatar billede Jakobsen Solutions Praktikant
21. maj 2023 - 08:53 #1
Jeg er ny herinde, men vil meget gerne hjælpe.
Jeg har stor erfaring med programmering i JS og min erfaring siger mig at du sjældent får brugbare svar, ved blot at paste en lang kode.

Jeg foreslår at du opretter en fiddle.
https://jsfiddle.net/

På den måde kan andre som jeg hurtigt og nemt denne et overblik og se hvad der går galt 😊

Alternativt kan du forsøge at paste den i ChatGPT og se om den kan regne ud hvad der går galt. Den er ret vild til Javascript.
Avatar billede kodak Mester
22. maj 2023 - 22:44 #2
Det forstår jeg godt men da jeg ikke er sikker på om mit problem kan løses i js så var jeg ikke sikker på fremgangs måden.

Jeg har lidt mangler jeg ikke kan se mig ud af at få inplamenteret.
og så som skrevet tror jeg at min cash bliver fyldt med data siden jeg får nogle underlige udfald.
Avatar billede kodak Mester
24. maj 2023 - 23:19 #3
Jeg har eksemplet her, da filerne har en indflydelse:

https://plnkr.co/edit/DI4yDWZvYHwodIJx
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester