[FRAGE] AGB Checkbox - Paypal Button (Javascript)

fordbexter · 01. Apr. 2015

Hallo liebes JSwelt.de - Forum

,

Ich versuche nun seid 5 Tagen durchgehend, eine Möglichkeit zu finden, mittels Javascript in Verbindung mit HTML eine Checkbox, für eine bestimmte Form des Wiederrufsrechts, in Ahnlehung an den Paylpal Button ,,Jetzt kaufen" zu coden.

Folgende Funktion soll erreicht werden:

Erst nachdem die Checkbox (Wiederrufsrecht) bewusst durch den Kunden angeklickt worden ist, soll es diesem möglich sein (Laut Gesetzgeber), den Paypal Button ,, Jetzt kaufen" zu klicken. Falls der Hacken in der Checkbox nicht gesetzt worden ist und trotzdem versucht wird auf denn ,,Jetzt kaufen" Button zu klicken, soll weiterhin eine Meldung erscheinen, dass bitte zuerst die checkbox angeklickt werden muss.

Mein Code sieht wie folgt aus:

Java Code:

HTML:

<script type="text/javascript">// <![CDATA[
function confSubmit()
{
    if(!document.getElementById("one").checked)
    {
        alert("Please read and accept the terms and conditions + Warnings in order to sign up to Woolly Mammoth");
        return false;
    }
 
}
// ]]></script>

HTML Code:

HTML:

<p><input id="one" type="checkbox" /> I have read and agree to the Terms & Conditions</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post"><input name="cmd" type="hidden" value="_s-xclick" /> <input name="hosted_button_id" type="hidden" value="QioqBPF8LLXTAJ" /></form>
<p><input name="cmd" type="hidden" value="_s-xclick" /> <input name="hosted_button_id" type="hidden" value="YUJGTG3QC5K7E" /> <input alt="Jetzt einfach, schnell und sicher online bezahlen – mit PayPal." name="submit" src="https://www.paypalobjects.com/de_DE/DE/i/btn/btn_buynowCC_LG.gif" type="image" /> <img src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" alt="" width="1" height="1" border="0" /></p>

Das Javascript habe ich vor </head>, in der index.php eingefügt und per FTP hochgeladen.

Den HTML Code, also den Paypal Button selbst habe ich im joomla eigenen Quelltext editor eingefügt.

Die checkbox und der dazugehörige Text, sowie der Button selber werden soweit richtig angezeigt. Jedoch passiert rein gar nichts, wenn ich auf den Button klicke. Weder bei gesetztem Häcken der Checkbox, noch bei auslassen diesem.

Ich bitte um Eure Hilfe

Mit freundlichem Gruß
Phil Bo

mikdoe · 02. Apr. 2015

Ich würde den Kaufen Button mit display:none verstecken, auf das Häkchen ein onclick legen welches die display Eigenschaft dann auf '' oder 'block' setzt.

fordbexter · 02. Apr. 2015

Danke für die schnelle Antwort, freut mich sehr

.

Ersteinmal sry, für den Code TAG... habe die Funktion gesucht aber leider nicht gefunden und danke für den edit!

Da ich leeeeider nicht viel Erfahrung mit Javascript habe, bilde ich mir ein, zu wissen wissen was damit gemein ist. Hört sich nach einer eleganten Lösung an, soweit ich das überhaupt richtig nachvollziehe.

Währe das zuviel verlangt, zu sehen, wie der auf Diese Lösung angeglichene Code insgesamt aussähe?

Vielen Dank für Die Antwort

Lieben Gruß
Phil Bo

I
Was darf ich unter "verstecken" verstehen? Wird der kaufen button erst sichtbar, nachdem das Häkchen gesetzt worden ist?

fordbexter · 03. Apr. 2015

Hallo Mikdoe

...

ich habe mich Deinem Lösungsvorschlag angenommen und habe mal ein wenig auf ,,http://gedit.net/Artikel;Elemente_anzeigen_und_verbergen_mit_Javascript#linkShow_css" recherchiert. Ich glaube aber das ich Deine Idee soweit verstanden habe. Nur kann ich diese beim besten Willen nicht technisch umsetzen, bevor ich nicht ein Javascript Buch gelesen habe x-X.

Meinst Du, Du könntest mir Deinen Lösungsansatz einmal auf meinen konkreten Code übertragen und ihn hier posten? Ich würde mich sehr auf die dazu passende Erklärung freuen, denn ich finde das Thema an sich sehr spannend, jedoch habe ich ein Release Datum einzuhalten und währe übertrieben froh, wenn mir hier geholfen werden kann

.

Auf eine Antwort freue ich mich.

Freundlicher Gruß
Phil Bo

mikdoe · 04. Apr. 2015

Na gut, wer so nett fragt, dem kann trotz argem Zeitmangel kein Wunsch verwehrt werden

Bei Fragen einfach fragen! Keine falsche Scheu!

HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Test für fordbexter</title>
	<style type="text/css">
input[type=checkbox],input[type=button],label{
	cursor: pointer;
}
#kpbest{
	padding-top: 30px;
}
	</style>
</head>
<body>

<div><input type="checkbox" id="wrecht"><label for="wrecht">Widerrufsrecht gelesen</label></div>
<div id="kpbest"><input type="button" value="Kostenpflichtig bestellen" onclick="alert('Jawoll');"></div>

<script>
	function button_klick() {
		document.getElementById('kpbest').style.display = (document.getElementById('wrecht').checked ? '' : 'none');
	}
	document.getElementById('wrecht').onclick = function() {
		button_klick();
	};
	button_klick();	// damit auch beim Laden der Seite der Button erstmal unsichtbar ist
</script>

</body>
</html>

fordbexter · 04. Apr. 2015

Hallo mikdoe

,

Danke für Deine Antwort. Echt Klasse, Funktioniert alles soweit. Jetzt muss ich nur noch meinen ,,eigenen/persönlichen" Paypal Button irgendwie damit verknüpfen. Also den Paypal button mit dieser ,,Funktion" verbinden und ihn ja i-wo/i-wie einbinden.

Da wo jetzt:

Code:

<div id="kpbest"><input type="button" value="Kostenpflichtig bestellen" onclick="alert('Jawoll');"></div>

steht,

Muss ich irgendwie diesen Button integrieren bzw, ersetzen.

Code:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="YUJGTG3QC5K7E">
<input type="image" src="https://www.paypalobjects.com/de_DE/DE/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="Jetzt einfach, schnell und sicher online bezahlen – mit PayPal.">
<img alt="" border="0" src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" width="1" height="1">
</form>

Ist das richtig?

Wenn ich das noch hinbekäme, Deine elegante Lösung mit meinem Paypal button zu verknüpfen, dann währe ich der glücklichste Mensch der Welt

... ( elegante Lösung deswegen, da durch die

Code:

display:none

Funktion, keine zusätziche Else Schleife benötigt wird, welche den Kunden bei nicht gesetzem Häkchen auf einen ,,Fehler" hinweist.)

Wenn Du mir noch erklären könntest, wie ich meinen Paypal Button damit verknüpfen kann, dann können wir den Deckel drauf machen

. Ich brauche den Paypal button gezwungermaßen, da ich mit ihm die Bestellungen/Downloads automatiersiert verschicke mittels eines anderen Programms, welches in Verbindung mit diesem Paypal button steht.

Vielen vielen Dank

und danke für Deine Zeit, welche du für mich opferst

.

Lieben Gruß

Phil Bo

- - - Aktualisiert - - -

Hallo Mikdoe

...

Hab es nun selber hinbekommen, wer hätte damit gerechnet

?

Der funktionierende code lautet wie folgt:

Code:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Test für fordbexter</title>
	<style type="text/css">
input[type=checkbox],input[type=button],label{
	cursor: pointer;
}
#kpbest{
	padding-top: 30px;
}
	</style>
</head>
<body>

<div><input type="checkbox" id="wrecht"><label for="wrecht">Widerrufsrecht gelesen</label></div>
<div id="kpbest"><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="YUJGTG3QC5K7E">
<input type="image" src="https://www.paypalobjects.com/de_DE/DE/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="Jetzt einfach, schnell und sicher online bezahlen – mit PayPal.">
<img alt="" border="0" src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" width="1" height="1">
</form>
</div>

<script>
	function button_klick() {
		document.getElementById('kpbest').style.display = (document.getElementById('wrecht').checked ? '' : 'none');
	}
	document.getElementById('wrecht').onclick = function() {
		button_klick();
	};
	button_klick();	// damit auch beim Laden der Seite der Button erstmal unsichtbar ist
</script>

</body>
</html>

Ich bedanke mich rechtherzlich bei Dir und Deiner mir aufgebrachten Zeit

.

Liebsten Gruß

Phil Bo

mikdoe · 04. Apr. 2015

Das ist dem Lerneffekt aber nicht zuträglich.

Man könnte es z.B. so machen:

HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Test für fordbexter</title>
	<style type="text/css">
input[type=checkbox],label{
	cursor: pointer;
}
#formdiv{
	padding-top: 30px;
}
	</style>
</head>
<body>

<div><input type="checkbox" id="wrecht"><label for="wrecht">Widerrufsrecht gelesen</label></div>

<div id="formdiv">
	<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
		<input type="hidden" name="cmd" value="_s-xclick">
		<input type="hidden" name="hosted_button_id" value="YUJGTG3QC5K7E">
		<input type="image" id="submitimage" src="https://www.paypalobjects.com/de_DE/DE/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="Jetzt einfach, schnell und sicher online bezahlen – mit PayPal.">
		<img alt="" border="0" src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" width="1" height="1">
	</form>
</div>

<script>
	function button_klick() {
		if (document.getElementById('wrecht').checked) {
			document.getElementById('submitimage').style.width = '126px';
			document.getElementById('submitimage').style.height = '47px';
		}
		else {
			document.getElementById('submitimage').style.width = '0px';
			document.getElementById('submitimage').style.height = '0px';
		}
	}
	document.getElementById('wrecht').onclick = function() {
		button_klick();
	};
	button_klick();	// damit auch beim Laden der Seite der Button erstmal unsichtbar ist
</script>

</body>
</html>

Kommt jetzt aber auf das Gesamtlayout an. Besser wäre, man würde das src Attribut ändern, indem man ein transparentes Leergif mit gleichen Maßen setzt anstatt die Größe auf 0,0 zu setzen. Weiterhin könnte man das ganze mit jQuery noch animieren. Aber das mache ich dann nicht auch noch, das kannst du dann selbst.

teddy57 · 04. Apr. 2015

mikdoe schrieb:
document.getElementById('wrecht').onclick = function() {
button_klick();
};

besser und einfacher ist eine funktionsreferenz:
document.getElementById('wrecht').onclick = button_klick;

oder, noch besser:
document.getElementById('wrecht').addEventListener("click", button_klick, false);

mikdoe · 04. Apr. 2015

Jo, die Kurzform führt aber m.E. bei Anfängern öfter zu Fehlern in der Syntax, wenn sie das auf eigene Punkte übernehmen.

[FRAGE] AGB Checkbox - Paypal Button (Javascript)

fordbexter

New member

mikdoe

Moderator

fordbexter

New member

fordbexter

New member

mikdoe

Moderator

fordbexter

New member

mikdoe

Moderator

teddy57

New member

mikdoe

Moderator