Probleme beim Auswerten eines Formulars mittels Javascript

[Andreas Diefenbach]

Hallo zusammen,

ich habe ein kleines Problem mit der Auswertung eines Formulares mittels Javascript an dem ich nun schon seit 3 Tagen "knabbere". Bei PHP habe ich damit weniger Probleme.

Hier mal das HTML-Konstrukt welches ich "ansprechen" möchte:

<form method="post" name="newBookingRequest" class="ym-form ym-columnar" action="anmeldung.php">
<h6>Wellnessangebot</h6>
	<div class="ym-fbox-text" id="wellness">
		<label for="wellness">Angebote</label>
		    <select name="wellness[]" id="wellness[]" onchange="reisePreis();addNew();">
			<option value="0" selected="selected">–</option>
			<option value="1">Rückenmassage 30 Minuten; 0,00 €</option>
			<option value="2">Relax Masssage, 40 Min; 34,00 €</option>
		    </select>			
	</div>

Wie man sehen kann ist hier ein onchange aktiv der zwei JS-Funktionen aufruft. Die eine soll einen Preis berechnen und die zweite fügt einfach ein neues Select-Element mit der selben Auswahl ein.

<select name="wellness[]" id="wellness[]" onchange="reisePreis();">
	<option value="0">-</option>
	<option value="1">Rückenmassage 30 Minuten; 0,00 €</option>
	<option value="2">Relax Masssage, 40 Min; 34,00 €</option>
</select>

Wie bekomme ich jetzt die beiden selektieren Dropdown-Values?

Ich habe versucht diese direkt anzusprechen mit:

document.newBookingRequest.wellness[0].selectedIndex

document.newBookingRequest.wellness[0].selectedIndex.value

Ich weiß das ich das ganze mit for-schleife etc. dann "am Stück" abfragen kann, aber da ich hier schon gescheitert bin habe ich die Schleife erst mal sein lassen.

Ich hoffe es kann mir hier jemand weiterhelfen.

Grüße, Andreas

[Auge]

Hallo

<form method="post" name="newBookingRequest" class="ym-form ym-columnar" action="anmeldung.php">
<h6>Wellnessangebot</h6>
	<div class="ym-fbox-text" id="wellness">
		<label for="wellness">Angebote</label>
		    <select name="wellness[]" id="wellness[]" onchange="reisePreis();addNew();">
			<option value="0" selected="selected">–</option>
			<option value="1">Rückenmassage 30 Minuten; 0,00 €</option>
			<option value="2">Relax Masssage, 40 Min; 34,00 €</option>
		    </select>			
	</div>

Wie bekomme ich jetzt die beiden selektieren Dropdown-Values?

Ich habe versucht diese direkt anzusprechen mit:

document.newBookingRequest.wellness[0].selectedIndex

document.newBookingRequest.wellness[0].selectedIndex.value

Du sprichst schlussendlich das Element mit der ID „wellness“ an. Das ist aber, deinem obigen Kostrukt nach, das Div, in dem sich das Select, das du eigentlich ansprechen willst, befindet und nicht das Select selbst. Ob an der Stelle „wellness[]“ als Wahl für die ID des Selects selbst eine gute Idee ist, wage ich zu bezweifeln.

Oh, wo wir gerade dabei sind. Dein Label verweist mit seinem For-Attribut natürlich auch auf das Div und nicht auf das Select.

Tschö, Auge

[quincunx]

Hallo Andreas

Wie bekomme ich jetzt die beiden selektieren Dropdown-Values?

eigentlich ist immer nur eine option selected, wenn nicht "multiple" zusammen mit "size=2" mindestens > "1" verwendet wird.

Ich habe versucht diese direkt anzusprechen mit:

auf codePen habe ich dieses Beispiel gepostet, dabei nur den für die Lösung relevanten Code gepostet.

<script>
function reisePreis() {
   var frm = document.newBookingRequest,
   id = frm.wellness.options[frm.wellness.options.selectedIndex].value;
   console.log(id)
}
</script>

So werden die values aus select-elements ausgelesen.

<form method="post" name="newBookingRequest" class="ym-form ym-columnar" action="javascript:void(0)">
   <label for="wellness">Angebote</label>
      <select name="wellness" id="wellness" onchange="reisePreis();">
      <option value="0" selected="selected">–</option>
      <option value="1">Rückenmassage 30 Minuten; 0,00 €</option>
      <option value="2">Relax Masssage, 40 Min; 34,00 €</option>
   </select>
</form>

gr qx

[Gunnar Bittersmann]

@@quincunx

eigentlich ist immer nur eine option selected, wenn nicht "multiple" zusammen mit "size=2" mindestens > "1" verwendet wird.

Und das sollte man tunlichst vermeiden.

LLAP

[quincunx]

@@gunnar

Wie bekomme ich jetzt die beiden selektieren Dropdown-Values?

„die beiden“ darauf habe ich bezug genommen.

Und ja ich verwende es nicht in meinen Projekten, auch wenn es wie im Wiki ab und an technisch Sinn machen würde.

[Mitleser]

eigentlich ist immer nur eine option selected, wenn nicht "multiple" zusammen mit "size=2" mindestens > "1" verwendet wird.

Und das sollte man tunlichst vermeiden.

Für ein B2C-Frontend teile ich die Argumentation, in einem (geschulten) Backend mit vielen Auswahlen / Optionen (Gruppen-/Rollenzuordnungen) ist es aber verdammt praktisch.

Insofern halte ich Deine Pauschalverteufelung für falsch.

[Gunnar Bittersmann]

@@Mitleser

eigentlich ist immer nur eine option selected, wenn nicht "multiple" zusammen mit "size=2" mindestens > "1" verwendet wird.

Und das sollte man tunlichst vermeiden.

Für ein B2C-Frontend teile ich die Argumentation, in einem (geschulten) Backend mit vielen Auswahlen / Optionen (Gruppen-/Rollenzuordnungen) ist es aber verdammt praktisch.

„Geschultes Backend“??

Und was hätte ein Backend damit zu tun, welche UI-Elemente im Frontend verwendet werden?

Du meinst vermutlich: geschulte Nutzer.

Diese mag es bei Spezialanwendungen geben, in den Weiten des Webs sind sie nicht anzutreffen.

Und auch bei Spezialanwendungen macht es sich bezahlt, ein intuitiv bedienbares UI vorzusehen; nicht eins, zu dessen Bedienung die Nutzer erst geschult werden müssten.

LLAP

[Mitleser]

Und auch bei Spezialanwendungen macht es sich bezahlt, ein intuitiv bedienbares UI vorzusehen; nicht eins, zu dessen Bedienung die Nutzer erst geschult werden müssten.

Bei allem Respekt jetzt: träum weiter!

[Andreas Diefenbach]

Hallo qx,

das was du mir auf codePen gepostet hast ist soweit klar, aber wie komme ich denn an die Werte der weiteren Select-Felder? Ich erstelle ja nach jeder Auswahl in einem Select-Feld darunter ein neues mit dem selben Namen.

Also quasi:

<select name="wellness[]" id="wellness[]" onchange="reisePreis();addNew();">
    <option value="0" selected="selected">–</option>
    <option value="1">Rückenmassage 30 Minuten; 0,00 €</option>
    <option value="2">Relax Masssage, 40 Min; 34,00 €</option>
</select>  

und dann bei der Funktion addNew() wieder:

<select name="wellness[]" id="wellness[]" onchange="reisePreis();">
        <option value="0">-</option>
        <option value="1">Rückenmassage 30 Minuten; 0,00 €</option>
        <option value="2">Relax Masssage, 40 Min; 34,00 €</option>
</select>

Das ist doch dann ein mehrdimensionales Array ich habe ja, also so kenne ich es aus PHP, dann:

wellness[0][2] = der selektierte Wert 2 aus dem ersten Select

wellness[1][2] = der selektierte Wert 2 aus dem zweiten Select

Oder sehe ich das falsch? Wenn dem so ist: Wie spreche ich diese an?

Ich müsste ja erst mal die Array-länge abfragen die in dem Fall 2 wäre und dann die selected Values.

Ich steh wohl immer noch auf dem Schlauch.

Grüße, Andreas

[quincunx]

Hallo Andreas,

und dann bei der Funktion addNew() wieder:

diese addNew() Funktion müsste ich sehen, damit ich verstehe was hier passieren soll. Baut die ein weiteres Select, oder schaltet die etwas an bzw. aus...?

Auf codePen habe ich das mit meinem jetzigen Verstehen mit zwei Select durchgespielt.

IDs sind einmalig, das Select-Element muss eine neue ID haben, nur so kann es über das Label-Element angesprochen werden und nur so ist es valides HTML.

gruesse quincunx

[Andreas Diefenbach]

Hallo quincunx,

das war es :-) Damit hat es nun funktioniert.

Vielen herzlichen Dank für die Hilfe.

Gruß, Andreas