select funktion ausserhalb Liste / Werte mit Grafik versenden

[Bastian]

Hi ich habe ein kleines Anfängerproblem .. und irgendwie find ich nix ..

Meine Aufgabe:
4 Optionen durch Grafiken wählbar machen und je nach Wahl einen Wert abschicken, der dann mit "Absenden" übermittelt wird
Also sowas:

<select name="variation[13]" size="4">  
      <option value="16" option selected>L</option>  
      <option value="15"> M</option>  
      <option value="14">S</option>  
      <option value="17">XL</option>  
        </select>  

+der Absende Knopf

Mein Problem ist nun .. Dies oben ist ja eine Liste , ich soll jedoch horizontal angeordnete Grafiken als "Wertgeber" verwenden..

Ich hatte mir dann überlegt dieses zu verwenden:

<input type="image" src="M.jpg" alt="M" select name="variation[13]" option value="15">  

Leider funktioniert das so nicht :-) wenn beides unternander steht, wird der option selectet Wert von oben verwendet, wenn ich nur das untere nehme wird nicht der gewünschte Wert übermittelt.
Zumal beim 2ten direkt ein Wert übermittelt wird ähnlich des "abschickens", was idealerweise nicht seien sollte

Da steckt doch bestimmt nen plöder Denkfehler drin und es geht gaanz einfach?
Falls mich da jemand auf den richtigen Weg weisen könnte, würde es mich freuen.

[ChrisB]

Hi,

Ich hatte mir dann überlegt dieses zu verwenden:

<input type="image" src="M.jpg" alt="M" select name="variation[13]" option value="15">

>   
> Leider funktioniert das so nicht :-)  
  
Natuerlich nicht. HTML hat ein vorgegebenes Arsenal von Elementen und Attributen - du kannst dir keine neuen zusammen basteln, in dem du einfach wild irgendwelche Elemente und Attribute zusammen mixt.  
  

> 4 Optionen durch Grafiken wählbar machen und je nach Wahl einen Wert abschicken, der dann mit "Absenden" übermittelt wird  
  
Wie waere es denn damit, einfach gleich Bilder zum Abschicken des Formulars zu benutzen?  
<http://de.selfhtml.org/html/formulare/formularbuttons.htm#grafische>  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

[Bastian]

Wie waere es denn damit, einfach gleich Bilder zum Abschicken des Formulars zu benutzen?
http://de.selfhtml.org/html/formulare/formularbuttons.htm#grafische

Das funktioniert nicht, da ja kein Wert mitgesendet wird. Drum bin ich ja auf die Idee gekommen in den Befehl irgendwie noch den wert einzubauen

[ChrisB]

Hi,

Wie waere es denn damit, einfach gleich Bilder zum Abschicken des Formulars zu benutzen?
http://de.selfhtml.org/html/formulare/formularbuttons.htm#grafische

Das funktioniert nicht, da ja kein Wert mitgesendet wird.

Aber der Name wird mit uebertragen. Da kann man den Wert drin unterbringen, und dann serverseitig abfragen, welcher uebergeben wurde.

Drum bin ich ja auf die Idee gekommen in den Befehl irgendwie noch den wert einzubauen

Noch mal: Du kannst nicht einfach HTML-Elemente mit allem "erweitern", was deiner Phantasie entspringt.

MfG ChrisB

[Bastian]

Hi,

Wie waere es denn damit, einfach gleich Bilder zum Abschicken des Formulars zu benutzen?
http://de.selfhtml.org/html/formulare/formularbuttons.htm#grafische

Das funktioniert nicht, da ja kein Wert mitgesendet wird.

Aber der Name wird mit uebertragen. Da kann man den Wert drin unterbringen, und dann serverseitig abfragen, welcher uebergeben wurde.

damit ich dich richtig verstehe Du sprichst doch von diesem Befehl :?
<input type="image" src="absende.gif" alt="Absenden">

Ich hab da jetzt etwas mit rumgespielt, aber kriege es nicht hin irgendwo den "namen=15" einzufügen, so dass es erkannt wird. Wie meintest Du das ?

Wenn ich auf den klicke, wird zwar ein artikel bestellt, aber nicht die richtige Grösse, die ja durch den Wert bestimmt werden ..

[ChrisB]

Hi,

damit ich dich richtig verstehe Du sprichst doch von diesem Befehl :?

Nein - in HTML gibt es keine "Befehle".

<input type="image" src="absende.gif" alt="Absenden">

Ich hab da jetzt etwas mit rumgespielt, aber kriege es nicht hin irgendwo den "namen=15" einzufügen, so dass es erkannt wird. Wie meintest Du das ?

name="meinWertdenichuebermittelnsollist15"

Wenn ich auf den klicke, wird zwar ein artikel bestellt, aber nicht die richtige Grösse, die ja durch den Wert bestimmt werden ..

Die serverseitige Verarbeitungslogik musst du natuerlich entsprechend anpassen.
Wenn dir nicht klar ist, wie der Wert uebergeben wird, dann lasse dir die Formulardaten komplett zur Kontrolle ausgeben.

MfG ChrisB

[Bastian]

Die serverseitige Verarbeitungslogik musst du natuerlich entsprechend anpassen.
Wenn dir nicht klar ist, wie der Wert uebergeben wird, dann lasse dir die Formulardaten komplett zur Kontrolle ausgeben.

Ui des hab ich ja noch nie gemacht :-) Danke für den Hinweis, muss ich nachlesen.
Kann ich das mit nem Programm auslesen lassen? Sry für die plöde Frage .. aber ich habs gerade versucht mit firebug zu enträtsel .. weiss netmal ob es so geht :-)

Schade ich dachte da gibt es ne total leichte Lösung für :-)

[suit]

Kann ich das mit nem Programm auslesen lassen?

Das Programm nennt sich "HTTP-Server", "Common Gateway Interface" oder "Serverseitige Scriptsprache" - kannst du nicht wenigstens versuchen, dir triviale Grundlagen anzueigenen? Es ist ja nicht so, dass es nicht in SELFHTML stünde[1].

Schade ich dachte da gibt es ne total leichte Lösung für :-)

Ja, die Lösung ist auch total leicht - besonders wenn man 2 Stunden Handbuch liest anstatt 3 Tage wild herumprobiert.

[1]

• http://de.selfhtml.org/servercgi/cgi/formularverarbeitung.htm
• http://wiki.selfhtml.org/wiki/Doku:Perl/CGI

Ob du nun Perl, PHP, Python, ASP.NET oder sonstwas verwendest ist egal - eigne dir zuerst die Grundlagen an, wie diese Sache theoretisch funktioniert.

[Bastian]

• kannst du nicht wenigstens versuchen, dir triviale Grundlagen anzueigenen? Es ist ja nicht so, dass es nicht in SELFHTML stünde[1].

Hast ja recht, ich bin auf dem Web-Gebiet ziemlich frisch und hab meist echt keinen Plan was ich mache. Drum kann ich es auch wirklich nachvollziehen wenn man sich mit so Kindergarten-Problemem nicht beschäftigen möchte.

Wie dem auch sei, das Problem ist ja irgendwie da, und ich versuche mein Hirn zu aktivieren :-)

Falls noch jemand nen Tipp, Link o.ä. hat der mir weiterhilf immer her damit .. Gerne auch nen Buch - am besten mit Seitenangabe :-)

-------------

Hab mir die Links durchgelesen und schonmal mehr verstanden .. betonung auf mehr :-)
Also hab ich mir gedacht, such ich doch Mal das Script, welches die Werte benötigt .

Ich glaub es auch gefunden zu haben (Betonung auf glauben), und ich glaube sogar die Anfrage-Zeile zu identifizieren ..

NUR weiss ich jetzt noch immer net was ich in den name="blabla" schreiben muss :-(

Mein Tipp mit der Zeile wäre:
value_ids += "&variation[]="+document.getElementById(form_id).elements[variation_name].value;

Und mein Tipp für die Abfrage:

function change_variation(product_id, variation_ids, special) {  
	value_ids = '';  
	special_prefix = "";  
	if(special == true) {  
		form_id = "specials_"+product_id;  
	} else {  
		form_id = "product_"+product_id;  
	}  
	for(var i in variation_ids) {  
		if(!isNaN(parseInt(i))) {  
			variation_name = "variation["+variation_ids[i]+"]";  
			value_ids += "&variation[]="+document.getElementById(form_id).elements[variation_name].value;  
		}  
	}  
	if(special == true) {  
		var return_price=function(results) {  
			eval(results);  
			if(product_id != null) {  
				target_id = "special_product_price_"+product_id;  
				buynow_id = "BB_BuyButtonForm"+product_id;  
				document.getElementById(target_id).firstChild.innerHTML = price;  
				if (price.substring(27,price.indexOf("&"))!='')  
					document.getElementById(buynow_id).item_price_1.value = price.substring(27,price.indexOf("&"));  
			}  
		}

[suit]

Natuerlich nicht. HTML hat ein vorgegebenes Arsenal von Elementen und Attributen - du kannst dir keine neuen zusammen basteln, in dem du einfach wild irgendwelche Elemente und Attribute zusammen mixt.

So oder so ähnliche hätte das aber in XHTML 2.0 funktionieren können ;)

<option src="foo.png" value="15">Medium</option>

[Gunnar Bittersmann]

@@Bastian:

nuqneH

Mein Problem ist nun .. Dies oben ist ja eine Liste

Eine Auswahlliste.

ich soll jedoch horizontal angeordnete Grafiken als "Wertgeber" verwenden..

Du hast 3 Möglichkeiten zur Auswahl (pun intended):

(1) Auswahllisten. Willst du nicht.

(2) Radiobuttons (bei Mehrfachauswahl: Checkboxen)

<form action="foo">  
  <ul>  
    <li>  
      <input id="S" name="variation" type="radio" value="14"/>  
      <label for="S"><img alt="S" src="S.jpg"/></label>  
    </li>  
    <li>  
      <input id="M" name="variation" type="radio" value="15"/>  
      <label for="M"><img alt="M" src="M.jpg"/></label>  
    </li>  
  </ul>  
  <button>OK</button>  
</form>

(Anstelle der Einzelbilder lassen sich sinnvollerweise auch CSS-Sprites einsetzen. Und ist JPEG das richtige Grafikformat?)

Die li-Elemente können nun per CSS nebeneinander plaziert werden, das sollte kein Problem sein.

Die Radiobuttons können ins Unsichtbare geschoben werden und die Kennzeichnung der aktuellen Auswahl dem Label übertragen werden (in modernen Browsern):

li  
{  
  overflow: hidden;  
}  
  
input[type="radio"]  
{  
  left: -666px;  
  position: absolute;  
}  
  
label  
{  
  opacity: 0.5;  
}  
  
:checked+label  
{  
  opacity: 1;  
}

(3) Die Grafiken sind selbst Submit-Buttons

<form action="foo">  
  <ul>  
    <li>  
      <button name="variation" value="14"><img alt="S" src="S.jpg"/></button>  
    </li>  
    <li>  
      <button name="variation" value="15"><img alt="M" src="M.jpg"/></button>  
    </li>  
  </ul>  
</form>

Funktioniert nicht so ohne Weiteres im IE < 8, da diese den Inhalt des 'button'-Elements anstatt den Wert von @value übertragen.

Qapla'

[Bastian]

Habe es jetzt so gelöst,

<script type='text/javascript'>  
function setSelectedSize(type) {  
    document.getElementById('selectedSize').value = type;  
}  
</script>  
<input type='hidden' name='variation[13]' id='selectedSize'>  
<img src="http://www.helftdenkids.de/wp-content/themes/dress-green/S.jpg" onclick='setSelectedSize(14)'>

funktioniert auch

ABER jetzt wollte ich ein hoover einbauen und habe mir sowas zusammengestrickt, aber jetzt funktioniert es nicht mehr ..
Ich WEISS es ist bestimmt ein Anfänger fehler, aber wenn jemand helfen könnte, wäre ich  dankbar

<script type='text/javascript'>  
var lastSelectedSizeElem = null;  
var lastSelectedSizeElemSrc = null;  
  
function setSelectedSize(type, domElem) {  
      var src;  
  
    document.getElementById('selectedSize').value = type;  
     if(lastSelectedSizeElem) {  
  
        lastSelectedSizeElem.src = lastSelectedSizeElemSrc;  
        }  
    lastSelectedSizeElem = domElem;  
        lastSelectedSizeElemSrc = domElem.src;  
  
       src = lastSelectedSizeElemSrc.split('.');  
       src = src[0] + '_grey.' + src[1];  
  
    domElem.src = src;  
 }  
</script><input type='hidden' name='variation[13]' id='selectedSize'>  
<img src="http://www.helftdenkids.de/wp-content/themes/dress-green/S.jpg" onclick='setSelectedSize(14,this)'><img src="http://www.helftdenkids.de/wp-content/themes/dress-green/M.jpg" onclick='setSelectedSize(15,this)'>  
</td>  
<img src="L.jpg" onclick='setSelectedSize(14, this)'>