Forum: PC-Programmierung Frage zu Javascript mit PHP (dynamisches Formular)


von Markus J. (dmant)


Lesenswert?

Hallo,

ich bastel an einer kleinen Internetseite und bin schon länger raus. 
Javascript habe ich früher schon immer gemieden aber nun komme ich nicht 
drum herum.

Also ich habe eine kleine <form> in dieser habe ich ein input=text und 2 
slider. Das ganze in einer Tabelle
1
<table border="0" cellpadding="5" cellspacing="5">
2
                    
3
                    <tr>
4
                      <td>Format</td>
5
                        <td>Min</td>
6
                        <td>Max</td>
7
                    </tr>
8
                    
9
                    <tr>
10
                      <td><input type="text" size="70" name="format[]"></td>
11
                        <td width="150" align="center">
12
                        <input type="range" min="1" max="100" value="50" class="slider" id="min1"><br>
13
                        <span id="outputmin1"></span> %
14
                    </td>
15
                    <td width="150" align="center">
16
                        <input type="range" min="1" max="48" value="6" class="slider" id="max1"><br>
17
                        <span id="outputmax1"></span> h
18
                        </td>
19
                    </tr>
20
                    
21
                    <tr>
22
                      <td><input type="text" size="70" name="format[]"></td>
23
                        <td width="150" align="center">
24
                        <input type="range" min="1" max="100" value="50" class="slider" id="min2"><br>
25
                        <span id="outputmin2"></span> %
26
                    </td>
27
                    <td width="150" align="center">
28
                        <input type="range" min="1" max="48" value="6" class="slider" id="max2"><br>
29
                        <span id="outputmax2"></span> h
30
                        </td>
31
                    </tr>
32
                    
33
</table>

Am Ende der Seite habe ich noch folgenden Code
1
<script>
2
            
3
  // Min 1
4
  var slidermin1 = document.getElementById("min1");
5
  var outputmin1 = document.getElementById("outputmin1");
6
  outputfee1.innerHTML = sliderfee1.value;
7
            
8
  slidermin1.oninput = function() {
9
    outputmin1.innerHTML = min1.value;
10
  }
11
            
12
  // Min 2
13
  var slidermin2 = document.getElementById("min2");
14
  var outputmin2 = document.getElementById("outputmin2");
15
  outputmin2.innerHTML = slidermin2.value;
16
            
17
  slidermin2.oninput = function() {
18
    outputmin2.innerHTML = min2.value;
19
  }
20
21
  // Max 1
22
  var slidermax1 = document.getElementById("max1");
23
  var outputmax1 = document.getElementById("outputmax1");
24
  outputmax1.innerHTML = slidermax1.value;
25
            
26
  slidermax1.oninput = function() {
27
    outputmax1.innerHTML = max1.value;
28
  }
29
            
30
  // Max 2
31
  var slidermax2 = document.getElementById("max2");
32
  var outputmax2 = document.getElementById("outputmax2");
33
  outputmax2.innerHTML = slidermax2.value;
34
            
35
  slidermax2.oninput = function() {
36
    outputmax2.innerHTML = max2.value;
37
  }
38
            
39
</script>

Ich hätte das allerdings ein wenig anders weiss da aber absolut nicht 
weiter. Also ich hätte das gerne so, das wenn man das Input Feld 
ausgefüllt hat darunter eine weitere Zeite der Tabelle mit de Feldern 
und den Slidern kommt. Also zuerst ist nur eine Reihe da und wenn man 
die ausgefüllt hat kommt die zweite, danach die dritte usw.

Dann hätte ich bei den slidern gerne Kommazahlen, wenn möglich mit 4 
oder 5 nach Kommastellen.

Wenn ich die Form mittels _post übergebe, in welcher Variable / welchem 
Array stehen dann die slider valuen?

Ich danke vielmals.

von flipchartFresser (Gast)


Lesenswert?

Hallo,
was soll der Code denn am Ende machen?

Gruß

PS: Semantisch gesehen, gehört das nicht in eine Tabelle, machste besser 
mit CSS

von flipchartFresser (Gast)


Lesenswert?

Hab jetzt mal den ganzen Thread gelesen, also:
Du musst der Tabelle über appendChild (vorher natülich erst mit 
createChild erzeugen) ein neues tr hinzufügen und tr dann nochmal tds 
und den tds noch deine inputs.
Was das Php angeht, einfach googeln!

Gute Nacht

von Noch einer (Gast)


Lesenswert?

Wenn du nur kurze Tipps zum selbst Experimentieren suchst:
http://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/createElement

Oder halt eines der unzähligen JS/DOM Lehrbücher durcharbeiten.

Oder wenn du kein DOM benutzen willst, nach jeder Zeile ein Submit und 
vom PHP eine Seite mit zusätzlicher Zeile bauen lassen.

Eine Zeit lang hat man so etwas mit jQuery gemacht. Inzwischen hat sich 
eher die Meinung durchgesetzt, das macht es nur komplexer, bringt aber 
nichts.

Der aktuelle Hype ist ja Angular - solltest wohl besser ignorieren. Ist 
mit Kanonen auf Spatzen geschossen.

von Daniel F. (df311)


Lesenswert?

erster schritt: tabellen raus
zweiter schritt: wenn du jquery einsetzen willst, dann ist das klonen 
und einfügen (ungefähr) ein 10-zeiler, wenn du das zu fuß machst mehr.
dritter schritt: slider gibts als html5 input type. unterstützun musst 
du nachschauen, ebenso die exakten parameter. anzeige mit kommastellen 
kann auch mit integer und js simuliert werden

von Markus J. (dmant)


Lesenswert?

Hallo,

Also ich suche sowas, sorry für die Seite aber da sieht man das am 
besten wenn man auf Start drückt.

Womit erzeugen die das alles so dynamisch?

https://cryptomixer.io

von Werklstudent (Gast)


Lesenswert?

Mit Bootstrap:
https://getbootstrap.com/

von Werklstudent (Gast)


Lesenswert?

und Angular natürlich.

von Werklstudent (Gast)


Lesenswert?


von Markus J. (dmant)


Lesenswert?

Von Angular habe ich auch schon gelesen aber viel das man bei so paar 
Reglern das mit Kanonen auf Spatzen schießen wäre.

Das getbootstrap kannte ich noch garnicht, sieht aber ganz gut aus. 
Werde ich mir mal genauer ansehen.

von Werklstudent (Gast)


Lesenswert?

Bootstrap ist eigentlich nur .css, dynamisch ist daran nix ausser was 
man damit in css machen kann. Man hat halt damit schnell eine schöne 
Optik auf der man aufbauen kann, der Stil ist heute quasi Standard.

Ich würde trotzdem angular für deinen Fall nehmen, ich habe sowas auch 
mal selber geschrieben und denkt das ist schnell gemacht, nur musst du 
das auch testen und das ist einfach kacke (für GUI-Tests im Browser 
gibts mitlerweile auch Lösungen aber da musst du dich auch erst 
einarbeiten). AngularJS kann noch mehr, alles was man heute so haben 
will. "Zu Fuss" in plain JS macht das keiner mehr, gerade so 
Formularzeugs. Du musst ja auch die Eingaben filtern/checken, das geht 
alle mit nem entspr. Framework einfacher.

von Noch einer (Gast)


Lesenswert?

>in plain JS macht das keiner mehr

Das ist ein Argument. Ob du dich in das Low-Level DOM einarbeitest, oder 
in das Angular - der Einarbeitungsaufwand liegt in der selben 
Grössenordnung. Bei den 1000 Ideen für Erweiterungen hast du es dann 
einfacher als mit plain JS.

Weiss aber nicht, ob Angular überlebt. Im Vergleich zu Qt oder WTL ist 
es irrsinnig aufwendig.

Mit HTML5/Websockets lassen sich ganz normale Anwendungsprogramme 
schreiben, die sich wie lokal installierte Programme anfühlen. 
Eigentlich könnte man auch ein Framework wie die Qt auf Basis von HTML5 
bauen.

von Markus J. (dmant)


Lesenswert?

Nunja, eigentlich such ich ne kleine Quick n Dirty Lösung. Ich bin und 
bleibe php'ler. Und für das "mal" in 2/3/4 Jahren wollte ich jetzt nicht 
ganz JS/JQUERY/ANGULAR etc erlernen.

von Noch einer (Gast)


Lesenswert?

Dann bleibe ich bei dem Vorschlag - schau mal, ob du das Beispiel auf 
Selfhtml zurecht gefummelt bekommst.

Kann nichts kaputt gehen und mit dem F12 Debugger im Browser sieht man 
was schief läuft.

von Weingut P. (weinbauer)


Lesenswert?

ach was, ist doch nicht so wild ...

machst per PHP n Formular mit Deinen x Eingabefeldern / Iputs, jedes mit 
ner eigenen ID und Name klaro.

Im Eingabefeld eben noch onkeyup="zeige_naechstes_Eingabeelement()"

Setzt die auszublendenen per CSS erst auf visibility: hidden;
und setzt die bei Bedarf per JS auf visibility: visible;
GetElemtById ...
https://www.w3schools.com/jsref/prop_style_visibility.asp



Die übergebenen Daten stehen im Empfangsscript im $_POST Array ...

nicht so wild, kann man schön zu Fuß machen ohne Frameworkmonster.

Das CSS kannst Du Dir per PHP erzeugen, das JS ebenfalls ... sind also 3 
Schleifen im PHP-Script 1. Eingabeelemente, 2. CSS, 3. JS und fertig.

PS: Wenn Du dem Slider auch n name='xyz' gibst sollten die Daten eben 
unter dem xyz im $_POST auftauchen.

: Bearbeitet durch User
Beitrag #6532308 wurde von einem Moderator gelöscht.
Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.