• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

HTML Form Daten übermitteln

kumart

Neues Mitglied
Hallo zusammen

Ich möchte über einen Webserver die Zeit am Microkontroller einstellen.
Ich habe dazu ein Input mit type datetime-local erstellt. Mittels onblur-Funktion wird dann Datum/Zeit in UNIX Epoche umgewandelt und in ein verstecktes Textfeld geschrieben. Dieses soll mit GET übermittelt werden.
In Formular gibt es dieses versteckte Textfeld und eine Checkbox. Der Wert der Checkbox wird übermittelt, der Wert des versteckten Textfeldes jedoch nicht. Warum?

Mein Code:
<body>
<div class="container">
<header>
<h1>Smart Energy Meter</h1>
</header>

<nav>
<ul>
<li><a href="Auswertung">Auswertung</a></li>
<li><a href="Konfiguration">Konfiguration</a></li>
</ul>
</nav>
<article>
<h1>Konfiguration</h1>
Datum/Zeit: <br>
<input type="datetime-local" id="myDate" onblur="myFunction()">

<form id="myForm" action="/ati" method="get">
<input type="text" id="epoch_nbr" value="" readonly>
<input type="checkbox" name="checker" > Ich bin mir bewusst, dass dabei das Gerät zurückgesetzt und der Speicher geleert wird.<br>
<input type="submit" id="button" value="Aktualisieren" >
</form>

<script>
document.getElementById("button").disabled = true;
</script>
<br><br>
<form id="myForm" action="/apw" method="get">
Neues Passwort setzen:<br>
<input type="password" id="pw" value="******"> <br>
<input type="submit" id="button" value="Aktualisieren" >
</form>
<br><br>

<script>
function myFunction() {
var date = document.getElementById("myDate").value;
var mydate = new Date(date);
var epoch = mydate.getTime();
document.getElementById("epoch_nbr").value = epoch;
document.getElementById("button").disabled = false;
}
</script>
</article>
<footer>Copyright &copy; MK</footer>
</div>
</body>
 
Ups, das war ja wirklich einfach... herzlichen Dank!

Ich habe noch eine Frage zum Layout:
Wie erreiche ich, dass die Navigation Bar und der Article auf die ganze Höhe der Seite gestretcht werden? Ich hab da schon einiges probiert... der Container macht breitet sich schön automatisch auf die ganze Höhe aus under Footer bleibt unten. Aber wie geht das mit der Navigation Bar und dem Article?

Mein Head sieht folgendermassen aus:
!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 1px solid gray;
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;

}

header{
border-bottom:6px double gray;
padding: 1px;
color: white;
background-color: black;
clear: left;
text-align: center;
}
footer {
position: fixed;
width: 100%;
bottom: 0;
border-top:6px double gray;
padding: 0.5em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
html,body {
margin:0;
padding:0;
height:100%; /* braucht es für die min-height des Containers */
}

nav {
float: left;
position: inherit;
width: auto;
height: auto;
margin: 0px;
padding: 1em;
margin-bottom: 10px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0px;
}

nav ul a {
text-decoration: none;
}
article {
margin-left: 100px;
border-left: 1px solid gray;
padding: 10px;
overflow: hidden;

}
</style>
</head>
 
height: -webkit-fill-available; das füllt den verfügbaren Platz. Wenn du den ganzen Bildschirm meinst, kannst du z.B. height: 100vH; nehmen. Mach das aber nur, wenn du keine horizontale Scrollbar hast.
 
Habe trotzdem noch was gemerkt:
height: -webkit-fill-available; funktioniert nur bei google chrome. bei firefox und edge aber nicht.
ich hab versucht mit
height: -webkit-fill-available;
height: -moz-available;
height: 100%;
das hat aber nichts gebracht...
 
Flexboxen sind ja auch Götter unter den verschiedenen CSS-Elementen.

Das mit border-box ist wirklich eine gute Idee. Wird ja auch auf vielen Websites im * Selektor eingebaut... Danke für die Erinnerung. Das hat mir zufälligerweise bei einem meiner Projekte eine Menge Arbeit erspart :D

Edit:
Wo wir schon dabei sind, es stört mich etwas an den Flexboxen, welches inline-block schon gut macht. Es springt automatisch in die nächste Zeile. Geht das mit Flexboxen auch? Meines wissens nach nämlich nicht. @Sempervivum
 
Zuletzt bearbeitet:
@Sempervivum
Danke dir vielmals! Das ist genau was ich wollte, und es funktioniert auf allen Browsern die ich getestet habe. Ist das jetzt mit flexbox gemacht? Ich hab da leider keine Erfahrung mit...
Danke auch dir @Aaron3219 !
 
Zurück
Oben