Hochzeitsanmeldungsprobleme: Dropdown auslesen, Box in Box, Excel export

A

Anfänger in HTML JS

Grünschnabel
Hallo zusammen,

mein Freund und ich heiraten nächstes Jahr, für die Hochzeit haben wir eine Website erstellt. Dafür haben wir einen Website-Baukasten genutzt, um die Seite zusammenzubasteln. Das Problem ist, dass die Anmeldung für die Hochzeit programmiert werden muss, da der Baukasten kaum Möglichkeiten anbietet.

Wir haben mit unseren Anfängerkenntnissen die Maske nun aufgebaut. Folgendes geht leider nicht.
Wenn jemand zum Polterabend "ja" auswählt, soll die Zeile erscheinen, wo Anzahl der Personen eingegeben werden kann, genau so bei der Trauung X und Y.

könnt ihr uns helfen bitte?

Des Weiteren hätten wir gerne folgendes:
Im Fieldset "Personen" da soll rechts eine Box in der Box stehen, wo Essen I, Essen II und Essen III ausgewählt werden kann (Mehrfachauswahl möglich).
Wie geht das?

Wenn die Gäste die ganzen Daten eingegeben haben, können wir die ins Excel exportieren? Wenn ja wie?

vielen lieben Dank für die Hilfe, wir hoffen, dass es für euch nicht sooo schwer ist wie für uns. :-(

Code: 
<!DOCTYPE HTML>
<html>
  <head>
    <title>Hochzeitsanmeldung</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style type="text/css">
     
 
      * {
      font-family: Georgia;
      font-size: 12pt;
      }

      label {
      width: 30em;
      float: left;
      }
     
      form {
      width: 57em;
      }
     
      padding-left:30px;
      display: inline;
      position: relative
      }
     
      .inputfeld {
      margin: 10px 0px;
      }
     
      legend {
      font-weight: bold;
      padding: 3px 15px;
      border: 1px solid #7B25B0;
      border-radius: 3px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      }
     
      fieldset {
      margin: 10px 5px;
      border-radius: 3px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 5px;
      border: 1px solid #7B25B0;
      }

      input {
      border-radius: 3px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border: 1px solid #7B25B0;
      padding: 2px 6px;
      max-width: 30px;
      text-align: right;
      font-size: 15px;
      }
     
      select {
      border-radius: 3px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border: 1px solid B5B1A9;
      padding: 2px 20px;
      max-width: 100px;
      width: 260px;
      text-align: left;
      }
   
    </style>
    <script>
     
         
         // Wert auslesen Anmeldung   
        var anmeldungIaValue       = document.getElementById("anmeldungIa").value;
        var anmeldungIIaValue       = document.getElementById("anmeldungIIa").value;
        var anmeldungIIbValue       = document.getElementById("anmeldungIIb").value;
        var anmeldungIIIaValue       = document.getElementById("anmeldungIIIa").value;
        var anmeldungIIIbValue       = document.getElementById("anmeldungIIIb").value;
        var anmeldungIIIcValue       = document.getElementById("anmeldungIIIc").value;
        var anmeldungIIIdValue       = document.getElementById("anmeldungIIId").value;
        var anmeldungIIIeValue       = document.getElementById("anmeldungIIIe").value;
        // Wert auslesen Anzahl
        var anzahlIaValue       = document.getElementById("anzahlIa").value;
        var anzahlIIaValue       = document.getElementById("anzahlIIa").value;
        var anzahlIIbValue       = document.getElementById("anzahlIIb").value;
        var anzahlIIIaValue       = document.getElementById("anzahlIIIa").value;
        var anzahlIIIbValue       = document.getElementById("anzahlIIIb").value;
        var anzahlIIIcValue       = document.getElementById("anzahlIIIc").value;
        var anzahlIIIdValue       = document.getElementById("anzahlIIId").value;
        var anzahlIIIeValue       = document.getElementById("anzahlIIIe").value;
         
         

         
          If(anmeldungIaValue=="anmeldungIaja"){}
          document.getElementById("anmeldungIa_anzahl").style.display="block";
         }
         
         
         
    </script>
  </head>
  <body>
    <form name="BerechnungNU">
      <!-- Terminübersicht Rahmen-->
      <fieldset>
        <legend style="background-color:#7B25B0">Kurze Terminübersicht</legend>     
    <table>
      <tr>
        <td><b>Mitdwoch, 09.05.2018 &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</b></td>
        <td><b>Freitag, 11.05.2018 </b></td>
        <td><b>Samstag, 12.05.2018 </b></td>
      </tr>
      <tr>
        <td>- 19 Uhr Polterabend</td>
        <td>- 15:30 Uhr X Trauung &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</td>
        <td>- 10:45 Uhr Y Trauung</td>
      </tr>
      <tr>
        <td></td>
        <td>- 18:30 Uhr Gartenfest</td>
        <td>- 14 Uhr Mittagsessen</td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td>- 17 Uhr Hochzeitstorte</td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td>- 19 Uhr Abendessen</td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td>- 21 Uhr Party</td>
      </tr>
    </table>
      </fieldset>
     
      <!-- Mittwoch-->
      <!-- Anmeldung Polterabend-->
      <fieldset>
        <legend style="background-color:white">Anmeldung Mittwoch</legend>
        Ich komme zum Polterabend:
        <select name="anmeldungIa" id="anmeldungIa onChange="setanmeldungIa();">
            <option value="" selected></option>
            <option value="anmeldungIaja"= >Ja</option>  
            <option value="anmeldungIanein">Nein</option>
        </select>
       
        <!-- Anzahl Polterabend-->
          <div class="inputfeld" id="anmeldungIa_anzahl" style="display:none">
             Mich begleiten <input type="text" name="anzahlIa" pattern="(-|\+)?[0-9]+([,\.][0-9]+)?" title="Bitte nur Zahlen angeben!"/> Personen.
            </div>
      </fieldset>
     
      <!-- Freitag-->
      <!-- Anmeldung X Trauung-->
      <fieldset>
        <legend style="background-color:white">Anmeldung Freitag</legend>
        Ich komme zur X Trauung:
        <select name="anmeldungIIa" id="anmeldungIIa" onChange="setanmeldungIIa();">
            <option value="" selected></option>
            <option value="anmeldungIIaja">Ja</option>  
            <option value="anmeldungIIanein">Nein</option>
         </select>
       
        <!-- Anzahl X-->
          <div class="inputfeld" id="anmeldungIIa_anzahl" style="display: block">
             Mich begleiten <input type="text" name="anzahlIIa" pattern="(-|\+)?[0-9]+([,\.][0-9]+)?" title="Bitte nur Zahlen angeben!"/> Personen.
          </div> <br>
           
            <!-- Anmeldung Gartenfest-->
            Ich komme zum Gartenfest:
        <select name="anmeldungIIb" id="anmeldungIIb">
            <option value="" selected></option>
            <option value="anmeldungIIbja">Ja</option>  
            <option value="anmeldungIIbnein">Nein</option>
         </select>
       
        <!-- Anzahl Gartenfest-->
          <div class="inputfeld" id="anmeldungIIb_anzahl" style="display: block">
             Mich begleiten <input type="text" name="anzahlIIb" pattern="(-|\+)?[0-9]+([,\.][0-9]+)?" title="Bitte nur Zahlen angeben!"/> Personen.
            </div>
      </fieldset>
       
      <!-- Samstag-->
      <!-- Anmeldung Y Trauung-->
      <fieldset>
        <legend style="background-color:white">Anmeldung Samstag</legend>
        Ich komme zur Y Trauung:
        <select name="anmeldungIIIa" id="anmeldungIIIa">
            <option value="" selected></option>
            <option value="anmeldungIIIaja">Ja</option>  
            <option value="anmeldungIIIanein">Nein</option>
         </select>
       
        <!-- Anzahl Y Trauung-->
          <div class="inputfeld" id="anmeldungIIIa_anzahl" style="display: block">
             Mich begleiten <input type="text" name="anzahlIIIa" pattern="(-|\+)?[0-9]+([,\.][0-9]+)?" title="Bitte nur Zahlen angeben!"/> Personen.
          </div>
         
       <!-- Anmeldung Mittagessen-->
          Ich bin zum Mittagessen da :
        <select name="anmeldungIIIb" id="anmeldungIIIb">
            <option value="" selected></option>
            <option value="anmeldungIIIbja">Ja</option>  
            <option value="anmeldungIIIbnein">Nein</option>
         </select>
       
        <!-- Anzahl Mittagessen-->
          <div class="inputfeld" id="anmeldungIIIb_anzahl" style="display: block">
             Mich begleiten <input type="text" name="anzahlIIIb" pattern="(-|\+)?[0-9]+([,\.][0-9]+)?" title="Bitte nur Zahlen angeben!"/> Personen.
          </div>
         
           <!-- Anmeldung Kaffee & Kuchen-->
          Ich bin zum Kaffee & Kuchen da :
        <select name="anmeldungIIIc" id="anmeldungIIIc">
            <option value="" selected></option>
            <option value="anmeldungIIIcja">Ja</option>  
            <option value="anmeldungIIIcnein">Nein</option>
         </select>
       
        <!-- Anzahl Kaffee & Kuchen-->
          <div class="inputfeld" id="anmeldungIIIc_anzahl" style="display: block">
             Mich begleiten <input type="text" name="anzahlIIIc" pattern="(-|\+)?[0-9]+([,\.][0-9]+)?" title="Bitte nur Zahlen angeben!"/> Personen.
           
          </div>
         
       <!-- Anmeldung Abendessen-->
          Ich bin zum Abendessen da :
        <select name="anmeldungIIId" id="anmeldungIIId">
            <option value="" selected></option>
            <option value="anmeldungIIIdja">Ja</option>  
            <option value="anmeldungIIIdnein">Nein</option>
         </select>
       
        <!-- Anzahl Abendessen-->
          <div class="inputfeld" id="anmeldungIIId_anzahl" style="display: block">
             Mich begleiten <input type="text" name="anzahlIIId" pattern="(-|\+)?[0-9]+([,\.][0-9]+)?" title="Bitte nur Zahlen angeben!"/> Personen
          </div>
     
       <!-- Anmeldung Party-->
          Ich bin zur Party da :
        <select name="anmeldungIIIe" id="anmeldungIIId">
            <option value="" selected></option>
            <option value="anmeldungIIIeja">Ja</option>  
            <option value="anmeldungIIIenein">Nein</option>
         </select>
       
        <!-- Anzahl Party-->
          <div class="inputfeld" id="anmeldungIIIe_anzahl" style="display: block">
             Mich begleiten <input type="text" name="anzahlIIIe" pattern="(-|\+)?[0-9]+([,\.][0-9]+)?" title="Bitte nur Zahlen angeben!"/> Personen.
          </div>
      </fieldset>   
     
      <!-- Abfrage Personen-->
      <fieldset>
        <legend style="background-color:white">Personen</legend>
         <div class="inputfeld" id="personen" style="display: block">
             Familienname <input type="text"  name="personF" title="Bitte den Familiennamen angeben!"/> <br><br>
             1. Person <input type="text" name="personI" title="Bitte den Vornamen angeben!"/><br><br>
             2. Person <input type="text" name="personII" title="Bitte den Vornamen angeben!"/><br><br>
             3. Person <input type="text" name="personIII" title="Bitte den Vornamen angeben!"/><br><br>
             4. Person <input type="text" name="personIV" title="Bitte den Vornamen angeben!"/><br><br>
             5. Person <input type="text" name="personV" title="Bitte den Vornamen angeben!"/><br><br>
             6. Person <input type="text" name="personVI" title="Bitte den Vornamen angeben!"/>
            <fieldset style="align-content: center">
             
            </fieldset>
          </div>
       
    </form>

 
  </body>
</html>
 
würde sagen: dazu bräuchte man einen WebServer/WebSpace/Domain/Datenbankanbindung.
Und weil das so nach Auftragsarbeit smells, was würden die Programmierer bekommen?
 
Es soll uns keiner die Anmeldung fertig programmieren, sondern lediglich sagen, was bzw. wonach wir suchen müssen. Da steht ja nicht, programmiert uns das.... man hört eben das, was man hören will.

Aber vielen Dank für deine großartige Hilfe :D
 
Guten Abend,

Zum allgemeinen Vorhaben:

jkallup hat mit
würde sagen: dazu bräuchte man einen WebServer/WebSpace/Domain/Datenbankanbindung.
Zum Vergrößern anklicken....
nicht unrecht.
Es ist sinnvoll, die Daten der Gäste in einer Datenbank zu speichern oder zwischenzuspeichern.
Das ist vor allem wichtig, wenn sich viele Personen eintragen wollen.
In jedem Fall braucht ihr ein PHP-Skript, welches das Speichern bzw. das Zwischenspeichern der Daten regelt, da ihr mit reinem JavaScript nicht weit kommt
(PHP -> Serverseitig / JavaScript -> Clientseitig).
JavaScript eignet sich gut für eine Überprüfung der Daten, bevor diese an das PHP-Skript weitergeleitet werden (action-Attribut etc.).
Je nach Datenbank, kann man die Daten aus der Datenbank in verschiedene Dateiformate speichern.

Zum JavaScript-Code:

1. Variablen

Das speichern der Werte ist schon mal eine gute Idee, jedoch war die Umsetzung fehlerhaft:

Code: 
<script>
 
 
         // Wert auslesen Anmeldung
        var anmeldungIaValue = document.getElementById("anmeldungIa").value;
        var anmeldungIIaValue = document.getElementById("anmeldungIIa").value;
        var anmeldungIIbValue = document.getElementById("anmeldungIIb").value;
        var anmeldungIIIaValue = document.getElementById("anmeldungIIIa").value;
        var anmeldungIIIbValue = document.getElementById("anmeldungIIIb").value;
        var anmeldungIIIcValue = document.getElementById("anmeldungIIIc").value;
        var anmeldungIIIdValue = document.getElementById("anmeldungIIId").value;
        var anmeldungIIIeValue = document.getElementById("anmeldungIIIe").value;
        // Wert auslesen Anzahl
        var anzahlIaValue = document.getElementById("anzahlIa").value;
        var anzahlIIaValue = document.getElementById("anzahlIIa").value;
        var anzahlIIbValue = document.getElementById("anzahlIIb").value;
        var anzahlIIIaValue = document.getElementById("anzahlIIIa").value;
        var anzahlIIIbValue = document.getElementById("anzahlIIIb").value;
        var anzahlIIIcValue = document.getElementById("anzahlIIIc").value;
        var anzahlIIIdValue = document.getElementById("anzahlIIId").value;
        var anzahlIIIeValue = document.getElementById("anzahlIIIe").value;
    </script>

Mir wird folgender Fehler in der Firefox Console ausgegeben:
"document.getElementById(...) is null".
Dieser Fehler lässt darauf schließen, dass die Seite das Element nicht finden kann.
Warum? -> Weil die Seite noch nicht vollständig geladen ist, und das script-Tag über dem Bereich mit den Feldern ist (script in head / input, select etc. in body).
Daher sollte man hier den Variablen die Werte erst zuweisen, wenn die Seite vollständig geladen ist.
Dies kann man mit window.onload realisieren:
Code: 
<script type="text/javascript">
var anmeldungIaValue = null;
var anmeldungIIaValue = null;
var anmeldungIIbValue = null;
window.onload = function () {
    // Seite geladen
    anmeldungIaValue = document.getElementById("anmeldungIa");
    anmeldungIIaValue = document.getElementById("anmeldungIIa");
    anmeldungIIbValue = document.getElementById("anmeldungIIb");
    /* ... */
};
</script>
Wichtig bei diesem Beispiel ist, dass in window.onload keine Definition stattfindet, sondern eine reine Zuweisung.
Würden wir eine Variable innerhalb von window.onload definieren, wäre diese Variable lokal. Diese sind jedoch global.
In window.onload weisen wir hier nur den Zugriff auf das jeweilige Element zu, um später auf den Wert (die Werte) schneller zugreifen zu können. (mit x.value)
Würde man x.value zuweisen, würde der aktuelle Wert des Feldes zugewiesen werden (Seite geladen ->Leere Felder -> Leere Zeichenketten).
Die Zuweisung vor window.onload, erklärt folgende Seite.

2. Bedingung

1. Das "If" muss kleingeschrieben werden, da dies sonst zu einem Fehler führt.
2. Der Syntax ist falsch (wahrscheinlich unabsichtlich).

Code: 
if (Bedingung) {
  //Anweisungen
}

(3. Allgemein)

Mir ist in eurem HTML-Code aufgefallen, dass ihr die Events (onchange etc.) ins Tag geschrieben habt.
Das direkte Reinschreiben ist, soweit ich weiß, nicht mehr üblich. Alternativ könnt ihr die Events der Elemente über den EventListener zuweisen.
Der EventListener wird dann in die window.onload-Anweisung geschrieben.

Fragen:

Im Fieldset "Personen" da soll rechts eine Box in der Box stehen, wo Essen I, Essen II und Essen III ausgewählt werden kann (Mehrfachauswahl möglich).
Wie geht das?
Zum Vergrößern anklicken....
Für dieses Vorhaben habe ich zwei Möglichkeiten:
-> Checkboxen. Bei den Checkboxen bietet es sich an, das Attribut name
bei allen Boxen gleich zu lassen (Gruppe) , um dann mit einer Schleife und document.getElementsByName(xy) die Checkboxen auszuwerten.
Ob eine Checkbox ausgewählt ist, ermittelt man mit document.getElementsByName(xy)[x].checked.

-> Auswahllisten mit Mehrfachauswahl. Auch bei den Auswahlfeldern bietet es sich an, die gleichen Namen im name-Attribut zu verwenden.
Auch hier kann man die ausgewählten Felder mit einer Schleife und document.getElementsByName(xy) auswerten.
Bei den Auswahllisten ermittelt man die ausgewählten Felder mit document.getElementsByName(xy)[x].selected.

Wenn jemand zum Polterabend "ja" auswählt, soll die Zeile erscheinen, wo Anzahl der Personen eingegeben werden kann, genau so bei der Trauung X und Y.
Zum Vergrößern anklicken....
Dabei reicht eine einfache Bedingung, ob die Auswahlliste den Wert "Ja" hat, und die Anweisung, dass die Zeile erscheinen soll.
Das macht ihr mit x.hidden = false;
Wichtig ist, dass die Zeile schon versteckt ist:
<input type="text" hidden>

Ich hoffe, dass ich euch auf die Sprünge helfen konnte.

MfG
 
Zuletzt bearbeitet:
oh woooooooow, dass ist mal eine suuuuuper Hilfe, danke!!!!

Ja so 100% ist es noch nicht klar aber ich weiß zumind. wie man erstmal weitermachen kann.
Danke für die ausführliche und lange Nachricht!

MFG :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück