Frage zu Javascript mit PHP (dynamisches Formular)

OP #5294018
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.
Gast #5294032
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
Gast #5294034
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.
#5294336
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
Gast #5294416
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.
Gast #5294467
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.
Gast #5294499
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.
#5294676
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.
Beitrag #6532308 wurde von einem Moderator gelöscht.

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

oder

Mit Google-Account einloggen

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren