Dropdown in Formularfeld auslesen

K

kettenmaya

Grünschnabel
Hallo

Ich möchte ein Anmeldeformular für Seminare in eine Internetseite einbinden.
Bei diesem Anmeldeformular sollen User die Möglichkeit haben ein Seminar aus einem Dropdown-Menu auszuwählen. Dazu möchte ich, dass in einem leeren Feld "Veranstaltungsort" der Veranstaltungsort zu dem ausgewählten Seminar erscheint.
Mit dem gleichen Verfahren möchte ich dann in dem Feld "Betrag" den Preis für das Seminar angezeigt bekommen, bevor der User den Sende-Button betätigt.

Wie bekomme ich das hin? Habe schon einiges versucht, aber komme da nicht weiter.
Danke für Eure Hilfe.
 
AJAX wäre da das Schlüsselwort.

Einfachere JavaScript Alternative wäre, die Preis Daten in ein JavaScript Array zu laden und dann bei onChange des Seminarfelds das Preisfeld upzudaten.
 
JavaScript, nicht Java.

Und mit PHP würde es nur gehen, wenn du den User die Kategorie auswählen lässt, das Formular absenden lässt und dann erst die neuen Inhalte anzeigst.

Mit reinem PHP ist kein dynamisches Nachladen möglich, es wird immer ein neuer Request bzw. Reload benötigt.
 
Moin,
für ein Simples script würde ich JavaScript nehmen, googlen oder mobile, autoscout.de
die haben sowas im einsatz, auch als javascript
ist eigentlich ganz einfach, habe diese aber nicht seperat da ist mir nur gerade so eingefallen und da javascript recht offen, kann man es ganz einfach kopieren und verändern =)
php und db kann man da auch gut einbinden, jedoch musst du dann immer eine neue datei erstellen auf die sich das javascript beim auswähl eines feldes im dropdown bezieht

viel erfolg
 
So sieht das ganze jetzt aus. Klappt aber noch nicht so, wie ich es haben möchte.

Der zahlbare Betrag soll sich zusammensetzen aus dem Seminarpreis und der Zahlart und zusätzlich möchte ich in dem Feld "Veranstaltungsort" den Ort, den ich zusätzlich bei der Seminarauswahl als value angebe angezeigt bekommen.

Code: 
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function mogo(){
if (document.Anmeldung.Seminar.options[document.Anmeldung.Seminar.selectedIndex].value != "none") {
document.Anmeldung.Betrag.value = document.Anmeldung.Seminar.options[document.Anmeldung.Seminar.selectedIndex].value + document.Anmeldung.Zahlart.options[document.Anmeldung.Zahlart.selectedIndex].value
 }                       
}
//-->
</SCRIPT>


HTML: 
<form name="Anmeldung">
  <p>

  
</p>
  <table width="594" height="245" border="0" align="center">
    <tr>
      <td height="30">&nbsp;</td>
      <td colspan="3"><strong>Ich melde mich verbindlich zu folgender Ausbildung/Workshop an: </strong></td>
    </tr>
    <tr>
      <td height="30">&nbsp;</td>
      <td colspan="3">  
        <div align="left">
          <select name="Seminar" onchange="mogo()">
            <option value="440">Thetahealing Basis vom 17.05.07 bis 20.05.07
            <option value="440">Thetahealing Basis vom 19.07.07 bis 22.07.07
            <option value="440">Thetahealing Basis vom 13.09.07 bis 16.09.07
            <option value="440">Thetahealing Basis vom 15.11.07 bis 18.11.07
            <option value="330">Thetahealing Advanced vom 05.05.07 bis 06.05.07
            <option value="25">Halbzeit Nachmittage am 26.05.07
            <option value="300">Wirbelsäulenbegradigung am 28.04.07
            <option value="300">Wirbelsäulenbegradigung am 16.06.07
            <option value="25">Heilreise am 22.06.07
            <option value="25">Heilreise am 31.07.07
              </select>
        </div></td>
    </tr>
    <tr>
      <td height="30"><strong>Veranstaltungsort:</strong></td>
      <td><input type="text" name="Ort" size="20" style="background-color:#FCD702;" value=""></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td width="112" height="30"><strong>Vorname:</strong></td>
      <td width="185"><input name="Vorname" type="text" id="Vorname" style="background-color:#FCD702;"></td>
      <td width="120"><strong>Nachname/Firma:</strong></td>
      <td width="159"><input name="NameFirma" type="text" id="NameFirma" style="background-color:#FCD702;"></td>
    </tr>
    <tr>
      <td height="30"><strong>Strasse:</strong></td>
      <td><input name="Strasse" type="text" id="Strasse" style="background-color:#FCD702;"></td>
      <td><strong>Hausnummer:</strong></td>
      <td><input name="Hausnummer" type="text" id="Hausnummer" style="background-color:#FCD702;"></td>
    </tr>
    <tr>
      <td height="30"><strong>Postleitzahl:</strong></td>
      <td><input name="Postleitzahl" type="text" id="Postleitzahl" style="background-color:#FCD702;" maxlength="5"></td>
      <td><strong>Ort :</strong></td>
      <td><input name="Ort" type="text" id="Ort" style="background-color:#FCD702;"></td>
    </tr>
    <tr>
      <td height="30"><strong>Telefonnummer:</strong></td>
      <td><input name="Telefonnummer" type="text" id="Telefonnummer" style="background-color:#FCD702;"></td>
      <td><strong>Telefxnummer:</strong></td>
      <td><input name="Telefax" type="text" id="Email" style="background-color:#FCD702;"></td>
    </tr>
    <tr>
      <td height="30"><strong>Handynummer:</strong></td>
      <td><input name="Handynummer" type="text" id="Telefonnummer" style="background-color:#FCD702;"></td>
      <td><strong>E-mail-Adresse:</strong></td>
      <td><input name="Email" type="text" id="Email" style="background-color:#FCD702;"></td>
    </tr>
    <tr>
      <td colspan="2"><strong>Zahlart:</strong></td>
      <td><select name="Zahlart">
            <option value="0">Bar vor Ort
			<option value="5">per Überweisung
        </select></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2"><strong>Zahlbarer Betrag: </strong></td>
      <td><input type="text" name="Betrag" size="7" style="background-color:#FCD702;" value="">
        <strong> ,- &euro; </strong></td>
      <td><strong>inkl. gesetzl. MwSt. </strong></td>
    </tr>
    <tr>
      <td colspan="2">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2">Ja, ich habe die AGB's gelesen und stimme diesen zu </td>
      <td><input type="checkbox" name="checkbox" value="checkbox" style="background-color:#FCD702;"></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2">Ja, ich abboniere den Newsletter </td>
      <td><input type="checkbox" name="checkbox" value="checkbox" style="background-color:#FCD702;"></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><input type="submit" name="Submit" value="Senden" style="background-color:#FCD702;"></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td><input type="reset" name="Submit" value="Zur&uuml;cksetzen" style="background-color:#FCD702;"></td>
    </tr>
  </table>
  <p>&nbsp;  </p>
</form>
 
Javascript: 
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function mogo(){
if (document.Anmeldung.Seminar.options[document.Anmeldung.Seminar.selectedIndex].value != "none") {
var zahlart = parseInt(document.Anmeldung.Zahlart.options[document.Anmeldung.Zahlart.selectedIndex].value);
var seminar = parseInt(document.Anmeldung.Seminar.options[document.Anmeldung.Seminar.selectedIndex].value);
var sum = zahlart + seminar;
document.Anmeldung.Betrag.value = sum;
 }                       
}
//-->
</SCRIPT>

Versuch es einmal so.

Das Problem war, dass die Einträge aus deinem Formular nicht als Zahl erkannt wurden, sondern nur als String und somit hat er den zweiten String einfach angehängt, statt ihn zu addieren.
 
Super, dass klappt. Danke. Und wie mache ich das mit der "value" Veranstaltungsort? Dafür müßte ich doch den Seminaren 2 values angeben. Einmal den Preis und den Veranstaltungsort? Hmmm
 
Hi @kettenmaya,

falls du dich auch bissel schwer mit Javascript tust, so kannst du es ja auch mit einer Flashanbindung mal versuchen, somit kannst du es noch bissel grafisch gestalten. ;)

Ich habe zwar gerade angefangen, mir eine Flash-PHP-Schnittstelle zusammen zu basteln, aber staune immer wieder, was damit so alles möglich ist. ;)

Gruß Matze202.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück