Tocart -submit - javascript

racoon · October 4, 2009, 5:59pm

Hallo,

ich möchte ein check durchführen bevor ein gegenstand in den korb gelegt wird, ob die variante value=0 hat.

wenn ja, dann soll keine aktion ausgeführt werden.

aufruf aus product.tpl heraus:

<div class="tocart"><input id="test_toBasket_[{$testid}]" type="submit" value="" onclick="oxid.popup.load('[{$testid}]');"></div>

Die oxid.js habe ich folgendermaßen angepasst:

    popup: {
      [B]  load : function (basketid){ 
		var inhalt = document.getElementById("test_varSelect_"+basketid).options[document.getElementById("test_varSelect_"+basketid).options.selectedIndex].value;
		if (inhalt!=0){
		oxid.popup.setClass('wait','popup load on','on');
		}else{
		alert ("Bitte wählen Sie zuerst eine Größe für das Produkt aus.");
		}
		},[/B]
        show : function(){ oxid.popup.setClass('popup','popup on','on');},
        hide : function(id){ oxid.popup.setClass(id?id:'popup','popup','');},

        setClass: function (id,pcl,mcl){
            var _mk = document.getElementById('mask');
            var _el = document.getElementById(id);
            if(_mk && _el) {
                _mk.className = mcl;
                _el.className = pcl;
            }
        },

Der Browser lädt jedoch trotzdem das script. Müssen die funktionen show und hide auch abgefangen werden?

ich versteh nicht, warum es so nicht unterbunden wird?!
hat wohl was mit dem setclass zu tun. jedoch kenn ich mich mit JS noch zu wenig aus, dass ich das verstehe, was hier passiert.

kann mir da bitte jmd auf die sprünge helfen?
Vielen Dank!

racoon · October 4, 2009, 6:11pm

Bin ich überhaupt an der richtigen Stelle?

muss ich die submit/“form” unter die lupe nehmen?

marco.steinhaeuser · October 4, 2009, 11:48pm

Hallo racoon,

ich möchte ein check durchführen bevor ein gegenstand in den korb gelegt wird, ob die variante value=0 hat.

Welcher Value genau ist denn gemeint?

Gruß

racoon · October 5, 2009, 9:02am

Entschuldige meine unklare aussage.
das erste <option> (also [0] hat den value = 0 und beinhaltet als Text "Größe wählen…"
Diese soll nicht in den Warenkorb gelegt werden können. Das geht zwar sowieso nicht, aber die Aktion dafür soll trotzdem unterbunden werden, da die Seite neu geladen wird.

Hier wird die value des options[0] einer variable übergeben:

var inhalt = document.getElementById("test_varSelect_"+basketid).options[document.getElementById("test_varSelect_"+basketid).options.selectedIndex].value;

Ist die Erklärung jetzt besser?

racoon · October 7, 2009, 6:03pm

warum krieg ich jetzt keine Antwort mehr?

marco.steinhaeuser · October 7, 2009, 8:31pm

Hallo racoon,

ich krieg’s zeitmäßig nicht mehr auf die Reihe, mich da reinzuwühlen.
Sorry. Vielleicht kann jemand anders zur Seite stehen?

Gruß

MBa · October 7, 2009, 11:41pm

Wenn ich das richtig verstanden habe, willst Du das Submit des Forms nur zulassen, wenn der Inhalt der Select-Box nicht 0 ist.

Na ja, um mich in fremden Code einzuarbeiten fehlt mir auch ein wenig die Zeit.

Wenn das alert ausgeben wird, dies Info fehlt mir, sollte dies gehen.
Ohne zu testen…

    popup: {
        load : function (basketid){ 
		var inhalt = document.getElementById("test_varSelect_"+basketid).options[document.getElementById("test_varSelect_"+basketid).options.selectedIndex].value;
		if (inhalt!=0){
		oxid.popup.setClass('wait','popup load on','on');
		}else{
		alert ("Bitte wählen Sie zuerst eine Größe für das Produkt aus.");
                [B]return false;[/B]
		}
		},
        show : function(){ oxid.popup.setClass('popup','popup on','on');},
        hide : function(id){ oxid.popup.setClass(id?id:'popup','popup','');},

        setClass: function (id,pcl,mcl){
            var _mk = document.getElementById('mask');
            var _el = document.getElementById(id);
            if(_mk && _el) {
                _mk.className = mcl;
                _el.className = pcl;
            }
        },

Mit return false erreichst Du, dass das Formular nicht abgeschickt wird. Bzw. dass keine Aktion nach diesen Event (onsubmit) mehr ausgeführt wird.
Dies gilt nur, wenn der Submitbutton auch die popup.load() Funktion aufruft. Wenn nicht, musst du das return false auf ein entsprechendes Event legen.

Wenn Du weitergehende Hilfe erwartest, solltest Du evtl. eine HTML-Datei erstellen, mit der man ohne große Klimmzüge das Problem nachvollziehen kann.
HTML und JS reichen hier vollkommen aus, ist ja kein Shopproblem.
Uu. siehst Du beim erstellen dieser Datei schon selber, wo es klemmt.

avenger · October 8, 2009, 5:23am

[QUOTE=Marco Steinhäuser;15609]Hallo racoon,

ich krieg’s zeitmäßig nicht mehr auf die Reihe, mich da reinzuwühlen.
Sorry. Vielleicht kann jemand anders zur Seite stehen?

Gruß[/QUOTE]
Ich würde das im [B]Template[/B] lösen, da braucht man nicht im core rumzupfuschen, und ist updatesicher…

Lösung (ungetestet):

in dem “<form>”-Tag ein [B]onsubmit=“return check_variant(this)”[/B] einbauen.
In dem Template folgendes Javascript einbauen

<script type="text/javascript>
funtion check_variant(select_box)
{
    if (select_box.selectedIndex==0)
    {
        alert('Bitte wählen Sie zuerst eine Option aus');
        select_box.focus();
        return false;
    }
    else
    {
        return true;
    }
}
</script>

racoon · October 8, 2009, 12:30pm

Hallo Ihr beiden (mal wieder),

vielen Dank erstmal!

Werde die Variante von avenger heute abend probieren, da es den vorteil der updatesicherheit hat.
Hab noch ein verständnis problem:

wird [B]onclick="oxid.popup.load(’[{$testid}]’);[/B] (bzw. ein submit allgemein) nur angestossen, wenn onsubmit=true ist? also das onsubmit unterdrückt die weiteren aktionen?

avenger · October 8, 2009, 12:35pm

[QUOTE=racoon;15658]Hallo Ihr beiden (mal wieder),

vielen Dank erstmal!

Werde die Variante von avenger heute abend probieren, da es den vorteil der updatesicherheit hat.
Hab noch ein verständnis problem:

wird [B]onclick="oxid.popup.load(’[{$testid}]’);[/B] (bzw. ein submit allgemein) nur angestossen, wenn onsubmit=true ist? also das onsubmit unterdrückt die weiteren aktionen?[/QUOTE]
Normalerweise wir man “onsubmit=“return submit_function()”” in den form-Tag schreiben.

Wenn “submit_function” den Wert true zurückgibt, geht der submit weiter, sonst wird er abgebrochen.

racoon · October 9, 2009, 9:32pm

hallo. hier der statusbericht.

also es funktioniert. hab den ansatz von avenger genommen.
aber auch danke an MBa!

Jedoch musste ich den Code von mir nehmen, da es mit der [B]this[/B] übergabe nicht funktioniert hat.
warum weiss ich nicht. hab zwar object form erhalten, doch ich wusste nicht, wie ich auf die elemente zugreifen kann.

[B]select_box.selectedIndex[/B] = undefined.
[B]this[/B] = [object HTMLFormElement]

Nochmals Danke an Euch!

Leider hat kräftiges googlen nichts geholfen, wie ich die elemente ansprechen kann. das object sagt mir leider nix. aber es geht ja auch so.

avenger · October 10, 2009, 6:04am

[QUOTE=racoon;15757] Jedoch musste ich den Code von mir nehmen, da es mit der [B]this[/B] übergabe nicht funktioniert hat. [/QUOTE]
War natürlich auch Blödsinn, “this” an der Stelle ist natürlich die “form”…

Aber Du kannst das insofern effizienter machen, indem Du nicht “document.getElementById…” verwendest, sondern das “this” weiterhin übergibts (in der function den Parameter dann z.B. “this_form” nennen), sondern “this_form.getElementById…” .

Dann muss JS nicht den ganzen Dokumentenbaum durchsuchen, sondern nur den Zweig der “Form”…

racoon · October 10, 2009, 9:58am

Hi Avenger,
habs leider nicht hinbekommen. Hab der function beide variablen übergeben, aber mit dem form object hat er immer rumgemeckert. Ich versuchs bei gelegenheit noch mal.
Ansonsten bremst das den shop auch nicht wesentlich runter

avenger · October 10, 2009, 12:47pm

[QUOTE=racoon;15766] Ansonsten bremst das den shop auch nicht wesentlich runter ;)[/QUOTE]
Das sicher nicht…

Aber wäre halt sauberer…