Antwort an „der henry“ verfassen

dynamische Webseite mit php

der henry 14.04.2026 18:51

Hallo Leute,

vielen, vielen Dank. Ja ... der Fehler war banal, ein ">" zu viel.

Die Verbesserungen/Optimierungen von Rolf habe eingefügt, nochmals Danke.

Die Klasse beschriftung_radio_button, die ja ohnehin schon "LABEL" geschrieben hat, sollte im CSS mit einem geeigneten Selektor ersetzt werden. Möglichkeiten wären:

.value_ranges td:nth-of-type(2)
.value_ranges td:has(label)
oder direkt das label formatieren: .value_ranges label

Das verstehe ich aber nicht ....

Anbei das aktuelle Teilscript.

Hierzu hätte ich noch Fragen. Wie zu erkennen möchte ich einen Eingabedialog programmieren, der entweder ein Eingabefeld für Zahlen, oder ein "Auswahlfeld" (... mehrere Radiobutton) vorwählt. Die Informationen was wie angezeigt wird, erhalte ich aus einer Datenbank.

Beim "Senden" (bestätigen der Eingabe) muss ich unterscheiden, welcher Radiobutton ausgewählt wurde. Dazu habe ich jedem Radiobutton eine eindeutige ID und NAME gegeben.

Aktuelle bekomme ich aber nur den Wert (value) des ausgewählten Radiobuttons, was mache ich hier falsch?

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Eingabefeld</title>
    <style>
        #overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; color: white; }
        .modal { background: #333; padding: 20px; border-radius: 8px; text-align: center; }
        .hidden { display: none !important; }
		.value_ranges { margin-inline:auto; border-spacing: 2px; border: 2px solid gray;
						td { padding: 3px; border: 1px solid black"; }
					  }
    </style>
</head>

<body>

<?php if ($message === "SUCCESS"): ?>
    <div id="overlay">
        <div class="modal">
            <h2>Daten erfolgreich gespeichert!</h2>
            
            <h1><?= $datatosave ?></h1>
            
<!--			<script>setTimeout(function(){ window.close(); }, 2000);</script>	-->
            <button onclick="window.close();">Beenden</button>
        </div>
    </div>
<?php endif; ?>

<div id="overlay" class="<?= $show_form ? '' : 'hidden' ?>">    
    <div class="modal" id="form-container">
        <h2><?= $headline ?></h2>
		<form method="POST" id="secure-form">
            <input type="hidden" name="action" value="submit">
            <label for="password">Passwort: </label><input type="password" id="password" name="password" minlength="4" maxlength="10" required><br><br>
			<br><br>
			
			<!-- wenn value ausgewählt wurde muss ein Eingabefeld für Zahlen eingeblendet werden -->
			<?php if ($value): ?>
				<p>min. <?php $valueRangeArray[0]->min ?></p>
				<p>max. <?php $valueRangeArrayangeArray[0]->max ?></p>

				<input type="text" name="data" placeholder="Deine Daten" required>
				<label for="data"><?= $valueRangeArray[0]->unit ?></label>
				<br><br>
			<?php endif; ?>
               
            <!-- wenn switch ausgewählt wurde muessen select Felder her -->
			<?php 
				if ($switch) { renderSwitchRange($valueRangeArray); }
			?>
			              
            <br><br>
            <button type="submit">Senden</button>
            <button type="button" onclick="cancelAction()">Abbrechen</button>
        </form>
        <hr style="width: 50%;">
        <p id="timer-text">Timout: <span id="seconds">30</span>s</p>
        <?php if ($message === "WRONG_PASSWORD"): ?>
            <p style="color: red;">falsches Passwort!</p>
        <?php endif; ?>
    </div>
</div>

<script>
	
	window.onload = function() {
		// Ermittelt die benötigte Breite und Höhe des Inhalts
		// scrollWidth/Height erfassen den gesamten Inhalt, auch wenn er versteckt ist
		let contentWidth = document.documentElement.scrollWidth;
		let contentHeight = document.documentElement.scrollHeight;

		// Optional: Puffer für Browser-Rahmen/Scrollbars hinzufügen
		window.resizeTo(contentWidth + 50, contentHeight + 200);
};

    let timeLeft = 30;
    const timerSpan = document.getElementById('seconds');
    const overlay = document.getElementById('overlay');

    const countdown = setInterval(() => {
        timeLeft--;
        timerSpan.innerText = timeLeft;
        if (timeLeft <= 0) {
            clearInterval(countdown);
            cancelAction();
        }
    }, 1000);

//########################################################################################################

function cancelAction()
{
	overlay.classList.add('hidden');
	window.close();
}

    // Timer bei Mausbewegung zurücksetzen (optional)
    window.onmousemove = () => timeLeft = 30;

//########################################################################################################

</script>
</body>
</html>

<?php
function renderSwitchRange($valuerangearray) 
{
?>
<table class="value_ranges">
<?php
  for ($i=0; $i < count($valuerangearray); $i++):
    $id = $valuerangearray[$i]->varname;
    $text = $valuerangearray[$i]->text;
    $set = $valuerangearray[$i]->set;
?>
    <tr style="background-color:<?= $valuerangearray[$i]->bgcolor ?>">
      <td>
        <input type='radio' id="<?= $id ?>" name="<?= $id ?>" value="<?= $set ?>" <?= $i==0 ? "checked" : "" ?>>
      </td>
      <td>
        <label for="<?= $id ?>"><?= $text ?></label>
      </td>
		</tr>
<?php
   endfor;
?>
  </table>
<?php
}