Abfragen von Input Type Image in eine Array Liste

[GianaSisters]

Hallo Zusammen,

ich schreibe gerade eine kleine Webseite bei der man Termine auswählen kann und sie am Ende dann speichert. Da haben wir nun das Problem. Ich benutze momentan diesen Code:

function changeImage(nummer) {

if (document.getElementById(nummer).src == "http://www.das-tropenhaus.de/bilder/produkte/normal/speedt-9018-26_Speedtsberg-Kleiderhaken-Wandknopf-Button-gelb-XL.jpg")
{
document.getElementById(nummer).src = "http://www.dj-t-motion.de/HTML/gruen_klein2.gif";
}
else
{
document.getElementById(nummer).src = "http://www.das-tropenhaus.de/bilder/produkte/normal/speedt-9018-26_Speedtsberg-Kleiderhaken-Wandknopf-Button-gelb-XL.jpg";
}
}
</script>

Zusammen mit:

  <input type="image" src="gruen_klein2.gif" name="image" id ="<%=counter%>" width="18" height="18" onclick="changeImage(<%=counter%>)">

Die Counter-Variable wird per Java-Code übergeben, somit hat jeder Image-Button eine eigene ID. Am liebsten würde ich nun bei einem Klick die ID in ein Array schreiben, sobald wieder ausgeklickt wird aus diesem Array löschen. Nach bestätigung wird aus den Orangenen Buttons (die ja symbolisieren, dass diese Billard-Tische reserviert werden sollen) dann rot werden, bzw übergeben werden in einer andere JSP.

Die Lösung wäre vermutlich bei jedem Klick ein komplett neuer Aufbau der Seite. Ich würde mir aber wünschen, dass am Ende einfach jeder Button mit seiner ID ausgelesen wird und es meinetwegen über das SRC-Image ausgelesen wird, welches der User ausgewählt hat.

Ich hoffe mein Problem ist verständlich und jemand hat einen Ansatz wie man das lösen könnte.
Vielen Dank schonmal,
Giana

Anhang anzeigen 4635

 

[mikdoe]

*freigeschaltet*

Sehr guter Nick. Kennst du GS noch aus der C64 Zeit? Oder lag das vor deiner Zeit?

 

[TecEye]

und dir fehlt es jetzt an was?
array erstellen, reinladen oder austragen, ist doch schonmal n ansatz

 

[GianaSisters]

Danke für die Freischaltung Mikedoe... Na Klar kenne ich GianaSisters noch vom C64 (und später auch vom Amiga 500)

@TecEye: Woran es scheitert:
Konnte man den Screenshot sehen? Ich kann da irgendwie mir den nicht anschauen, hier nochmal

Es geht darum, dass ein Center 13 Plätze hat (Ob Badminton, Billard oder Tennis ist ja egal)
(Freie Spielfeld = grün, ausgewählte evtl zu buchende Felder=orange, bereits reservierte Felder= rot:


Ich würde gerne behalten, welche Buttons (Die dann gelb wurden) ich gedrückt habe damit ich später beim Submit weiss, welche Felder ich in die Datenbank schreiben kann.
Kenne mich mit Java-Script nicht aus, nur mit Java, deshalb wäre es schön das irgendwie mit Java hinzubekommen, hab aber gelesen, dass es nicht so einfach ist zur Laufzeit Java-Methoden aufzurufen, was vermutlich meine Lösung wäre. Arrays übergeben geht wohl mit dem request.getParameter nicht, da da nur Strings übergeben werden...

Aber auch ein Array zu übergeben wäre nicht die Lösung, hatte Versucht dann mit String = String + ButtonId, aber er nimmt dann auch alle bisherigen ButtonIds, also auch keine Lösung...

 

[TecEye]

du kannst alles in ein array schreiben und dann in einen string umwandeln zum abschicken JavaScript Array toString() Method

 

[GianaSisters]

Oh das geht schon einmal gut... Die Frage ist dann noch wie ich das Array dann bei dem Button übergebe und wieder deselektierte aus dem Array lösche, aber das lässt sich bestimmt herausfinden

 

[TecEye]

verschickst du ein formular? dann häng ne post mit dem array/string an
löschen ist etwas schwerfällig in JS erstmal musste den key finden das machst du mit dem befehl

var key = dein_array.indexOf(die_id);

so und dann kannst du mittels des gewonnen key via splice löschen

dein_array.splice(key,1);

 

[GianaSisters]

Vielen Dank schonmal. Ich habe das nun nicht so ganz verstanden.
Ich habe jetzt folgenden Code:

 var auswahl = [];
    function inArray(nummerid){
         auswahl.push(nummerid);
         document.bmiForm.meaning.value = auswahl.toString();
    }

Wenn ich den Ausgebe, kriege ich das Array, je nachdem wo ich draufedrückt habe so: 1,2,1,3
Aber, ich habe 2 mal auf den Button "1" gedrückt, somit sollte er ja wieder deaktivieren und nur noch ( 2, 3) im Array zu finden sein.
Kannst Du mir dazu noch einen Tipp geben?
Lg

 

[TecEye]

    var auswahl = [];
    function inArray(nummerid){
         key = auswahl.indexOf(nummerid);
         if(key < 0){
              auswahl.push(nummerid);
         }else{
              auswahl.splice(key,1);
         }
    }

in einen string wandelst du erst um wenn alles erledigt ist

 

[GianaSisters]

WOW !!! Super vielen Dank. Ich traue mich gar nicht zu fragen. Wie kann ich den Wert jetzt übergeben, bzw in einen Button einsetzen? Bei Java weiß ich dass es mit <%=auswahl.toString()%> gehen würde...
Gibt's das auch bei JS? Du hast meinen Tag schonmal gerettet

 

[TecEye]

Dein "Button" was macht er denn? schickt er ein Formular ab oder was passiert da?

 

[GianaSisters]

Ja, ein Submit-Button der dann per Hidden einige Daten an die folgende JSP schickt bei der ich dann das Array auslesen und analysieren würde, oder gibt es was geschickteres?

 

[TecEye]

dann erstell doch ein hidden input zur verfügung wo du diese auswahl reinspeicherst, quasi bei jedem aktualisieren wird dann der input neu befüllt und beim submit schickste ja dann das hidden raus und kannst es verarbeiten

<input type='hidden' id='auswahl_input' name='auswahl'>

 var auswahl = [];
    function inArray(nummerid){
         key = auswahl.indexOf(nummerid);
         if(key < 0){
              auswahl.push(nummerid);
         }else{
              auswahl.splice(key,1);
         }
         auswahl.toString();
         $('#auswahl_input').val(auswahl);
    }

ich geh mal davon aus dass du Jquery benutzt
ansonsten

document.getElementById('auswahl_input').value = auswahl;

 

[GianaSisters]

Super TecEye... Klappt alles...Klasse und nette hilfe !

Ach mensch, jetzt ärgere ich mich, dass es nur IDs sind die Übergeben werden, kann ich nicht noch mehr Infos übergeben ? Die ID muss ja eine Zahl sein

 

[TecEye]

was willst du noch übergeben? Kannst ja das gleiche nochmal machen oder ein mehrdimensionals array erstellen, nur schwierig das dann als string umzuwandeln
ich würde dir dann empfehlen ein weiteres array zu erstellen, der function einen weiteren wert hinzufügen und es in ein weiteres hidden input ablegen

 

[kkapsner]

Warum willst du das eigentlich mit JS machen? Das kann man alles mit reinem HTML/CSS machen, wenn man keine uralten Browser unterstützen will:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
input[type=checkbox] {
	display: none;
}
input[type=checkbox] + span {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 100%;
	border: 1px solid lightgray;
	background-color: #EEEEEE;
}
input[type=checkbox]:checked + span {
	background-color: green;
}
input[type=checkbox][disabled] + span {
	background-color: red;
}
</style>
</head>
<body>
<form action="/server/dataEcho.php">
<label><input type="checkbox" name="table[0]"><span></span></label>
<label><input type="checkbox" name="table[2]"><span></span></label>
<label><input type="checkbox" name="table[3]" disabled><span></span></label>
<label><input type="checkbox" name="table[4]"><span></span></label>
<label><input type="checkbox" name="table[5]" disabled><span></span></label>
<label><input type="checkbox" name="table[6]"><span></span></label>
<label><input type="checkbox" name="table[7]"><span></span></label>
<button>speichern</button>
</form>
</body>
</html>