Auswahl ins Formular übergeben

[_R_A_L_F_]

Hallo,

ich habe folgendes vor:
Mehrere Plätze, dargestellt als Bilder, die beim anklicken jeweils ihre Hintergrundfarbe ändern sollen.

Die ausgewählten Plätze möchte ich per Button klick an ein Formular übergeben.

Sodass im Formlar dann steht:
Ausgewählter Platz: P1, P2 usw....

Den Farbumschlag habe ich wie folgt gelöst:

<div class="gast"><img src="img/frei.png" onclick="toggle(this)"></div>
<div class="gast"><img src="img/frei.png" onclick="toggle(this)"></div>

<script type="text/javascript">
function toggle(objButton)
{
objButton.className=(objButton.className=='farbe1')?'farbe2':'farbe1';

}
</script>


CSS Teil:
/* Farbumschlag Auswahl */
.farbe1{
  background:#7fff00;
}
.farbe2{
  background:#eee;
}

Ich dachte daran den Plätzen jeweils eine ID (id="platz1" usw.) zu geben und auf Grund welcher Hintergrundfarbe das Bild hat dann den Wert in eine Variable zu schreiben.

Nur wie stelle ich das ganze an oder vielleicht gibt es ja auch einen anderen Lösungsansatz.

Danke schon mal

 

[Tronjer]

Mache es mit jQuery, das ist einfacher.

Pseudocode:

<ul class="gast">
  <li><img src="mypic.png" data.platz="platz 1" class="classA"></li>
</ul>

var plaetze = [];

$('.gast').on('click', 'img', function() {
  plaetze.push($(this).data('platz'));
  if ($(this).hasClass('classA')) {
    $(this).removeClass('classA').addClass('classB');
  } else {
     $(this).removeClass('classB').addClass('classA');
  }
});

 

[_R_A_L_F_]

Hallo Tronjaner,

Danke für den Tipp.

Weiß aber immer noch nicht wie ich es anstellen kann, dass mir alle makierten in eine Variable geschrieben werden.

 

[Tronjer]

Hatte ich doch oben gezeigt. In dem Beispiel werden die Plätze als Data-Attribut übergeben und in ein Array gepusht.

 

[_R_A_L_F_]

Ja aber ich weiß nicht was ich schreiben muss, um den Wert z.B. Platz 1 auszulesen?

 

[Tronjer]

Was war daran jetzt unverständlich?
plaetze.push($(this).data('platz'));

 

[_R_A_L_F_]

Es geht mir darum wenn ich :

var bla = plaetze.push($(this).data('platz'));
alert(bla);

eingebe, erscheint immer eine andere Zahl und nicht z.B. der Wert von data.platz="platz 1"

Ich wollte ja nur wissen wie ich das ganze schreiben muss, um den Wert "platz 1" zu erhalten?

 

[Tronjer]

console.debug(plaetze)

 

[_R_A_L_F_]

Ich komm damit nicht weiter.

Kannst du mir nicht einfach schreiben, was ich eingeben soll damit die Platzzahl in einer Variable landet?

Bzw. wo bei diesem Code der Fehler ist?

<script type="text/javascript">
var plaetze = [];
$('.gast').on('click', 'img', function() {
  plaetze.push($(this).data('platz'));
  if ($(this).hasClass('farbe1')) {
    $(this).removeClass('farbe1').addClass('farbe2');
   
    var bla = plaetze.push($(this).data('platz'));
    alert(bla);
   
  } else {
     $(this).removeClass('farbe2').addClass('farbe1');
  }

});

</script>

 

[Tronjer]

Wie das genau aussehen muss, hängt u.a. davon ab, in welcher Weise die Daten dem Formular übergeben und anschließend weiterverarbeitet werden. Das lässt sich aus deiner Frage nicht ableiten.

Als Pattern hatte ich es dir aber bereits geschrieben. Wenn du damit nicht klar kommst, liegt es an fehlenden Grundlagenkenntnissen, und ich helfe nur Leuten, die auch Interesse zeigen, JavaScript zu erlernen. Copy-&-Paste-Code zwecks Lernvermeidung gibt es von mir nicht.

 

[_R_A_L_F_]

Ja ich hab das ganze jetzt mittels Ajax gelöst, da ich die Variable eh für die spätere Verarbeitung in PHP brauche.

Trotzdem Danke