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>
