Frage: Variable per Form an URL ausgeben und an colorbox senden?

planlos · 30. August 2014

Hallo LEute,

ich lese schon einige Zeit hier mit aber jetzt muss ich selbst mal einen Beitrag erstellen da ich ein Problem habe und nicht weiterkomme. Für einen Shop brauche ich ein Script das eine Eintragung von einem Formularfeld als URL ausgibt die in Colorbox geöffnet wird.

Wer es nicht kennt: Colorbox ist eine art Lightbox die eben auch iframe kann (http://www.jacklmoore.com/colorbox/faq/)

Wie gesagt. Ein Besucher soll Daten (in dem Fall Geburtsdatum) in ein Formular eintragen und auf senden klicken. Dann sollen die Werte übergeben werden und sich das ganze über Colorbox (quasi iframe) öffnen. Leider öffnet sich bei mir die Colorbox nur mit einer Fehlermeldung. Im Netz habe ich da zwei interessante Links gefunden:

Dieser Nutzer hat es mit Lightbox hinbekommen (bei Colorbox soll es so ähnlich klappen):
http://www.traum-projekt.com/f…terne-seite-lightbox.html

Hier so ähnlich:
http://forum.jswelt.de/javascr…gabefeld-bernehmen-7.html

Die an Colorbox zu übergebene URL soll so aussehen:
https://www.domain.de?zugang=012345&Vertrag_Kunde_geburtsdatum=11.11.1988

Vielleicht könnt ihr mir noch weiterhelfen

Vielen Dank schonmal

wolf · 30. August 2014

Da die box JQuery nutzt, ist es recht einfach

JavaScript

var datum = $('#IDvomDatumsInput').val();
var url = 'http://example.com/zugang=012345&vert_kde_zgng='+datum;
alert( datum );

Wie soll diese Url übergeben werden?

ACHTUNG was verbirgt sich hinter zugang? das hört sich nach einer wichtigen kundennummer an, die die Identität des benutzers erstellt?

planlos · 30. August 2014

Nein die example.com ist eine andere Domain und durch zugang kann die Herkunft mir zugeordnet werden.

Bei mir bleibt die Box leider weiß. Zierl URL wird nicht geladen. Ich habe mich vom Code her am ersten verlinkten beispiel orientiert

wolf · 30. August 2014

Übersetze doch mal example?
naja wie du meinst...

Wie muss die lightbox augerufen werden?!

Muss ich auf einen link klicken um sie aufzuruen oder wie?
Soll mit javascript auf diesen Link umgeleitet werden?

Du musst dich schon klar ausdrücken.. oder so umfassend beschreiben das man es kapiert.. oder ein beispiel aufzeigen, einen link wo das ganze liegt... irgendwas, bitte, ohne geht nicht.
Wann bleibt sie weis, was ist die fehlermeldung der konsole....?

Bitte beides mal lesen:
Wie erstelle ich korrekt einen neuen Beitrag im CSS & CSS3 Forum - bitte vor dem Erstellen eines neuen Themas lesen!wir sind hier zwar im JS forum und trotzdem ist es wichtig.
Fehlermeldungen finden

planlos · 31. August 2014

an anderer Stelle wo keine Werte übergeben werden müssen wird sie mit a class="iframe" angesteuert. (bezw. $(".iframe").colorbox({iframe:true, width:"650px", height:"80%"}); Hier öffnet sie einwandfrei.

Mein derzeitiger Code sieht so aus:

JavaScript

<script>function submitForm(form){
	$.colorbox({width:"1024px", height:"80%",  href:'http://www.example.com/unterseite?zugang=012345', form:'form'});
}
></script>
<script>if(settings.form) { $.post(href, $(settings.form).serialize(), 
		function(data,textStatus,XMLHttpRequest){ 
    	prep(textStatus == 'success' ? data : 'Es trat leider ein unerwarteter Fehler auf: ' + XMLHttpRequest.statusText); 
                            	}); 
                    	} else { 
         	$div().appendTo($loadingBay).load(href, function (data, status, xhr) { 
                                    	prep(status === 'error' ? 'Request unsuccessful: ' + 
xhr.statusText : this); 
                            	}); 
                    	}
 </script>

Alles anzeigen

HTML

<form action="" method="post" onsubmit="submitForm(0);return false;"> 
<input type="text" name="Vertrag_Kunde_geburtsdatum" /> 
<input type="submit" value="senden" />
</form>

wolf · 31. August 2014

In Zeile 2 wir die URL übergeben nicht wahr?
Also musst du meinen Code mit deinem Zusammenbauen, komm ich hab dir für alles was du machen musst nen Beispiel gegeben.
A) wie man den wert vom
Input Feld ausliest
B) wie man ne Variable an nen String anhängt.

Was hat der Code nach Zeile 5 für ne Bedeutung?

planlos · 31. August 2014

Ah Sorry hier der aktuelle Code bei dem ich zwar die colorbox geöffnet bekomme er mir aber nicht den inhalt zeigt:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title></title>




        <script type="text/javascript" src="jquery-1.4.3.min.js"></script> 
        <link rel="stylesheet" type="text/css" href="jquery.fancybox-1.3.2.css" media="screen" /> 
        <script type="text/javascript" src="jquery.fancybox-1.3.2.pack.js"></script></script>
<script type="text/javascript">
$(document).ready(function() {
 $("#myForm").submit(function () {  
 var url = $(this).attr("action") + "&form_EMAIL=" + $("#form_EMAIL").val(); 
    $.fancybox({
		'href'        : url,
		'width'				: '75%',
		'height'			: '75%',
		'type'				: 'iframe'
    });
 return false;
  });
});
</script>
</head> 
<body>
<form id="myForm" action="http://www.example.com/unterseite?zugang=012345="post">

            <label for="form_EMAIL">Geburtsdatum</label><input type="text" name="Vertrag_Kunde_geburtsdatum" id="form_EMAIL" value="" />




            <input type="submit" title="Absenden" name="submit" value=""/>
        </form>




    </body>
</html>

Alles anzeigen

Das ist aus dem verlinkten Beispiel. Sorry hab hier schon so viel durchprobiert und zich Codeschnipsel offen

wolf · 31. August 2014

Kurze frage, wieso arbeitest du mit html 4.1 ?

HTML

<!doctype html>
<html>
    <head>
        <title>Deine Seite</title>




        <script type="text/javascript" src="jquery-1.4.3.min.js"></script> 
        <link rel="stylesheet" type="text/css" href="jquery.fancybox-1.3.2.css" media="screen"/>
        <script type="text/javascript" src="jquery.fancybox-1.3.2.pack.js"></script></script>
        <script type="text/javascript">
            //Wenn das doc fertig geladen ist
            $(document).ready(function() {
                //wenn das formular abgesendet werden soll
                $("#myForm").submit( function(event){  
                    //das absenden verhindern
                    event.preventDefault();

                    //Die url zusammenstellen




                    //Wert des inputfeldes
                    var date = $("#form_date").val();
                    //name des inputfeldes => name der später übergebnen variable
                    var name = $("#form_date").attr('name');
                    //link wo das form hingeschickt werden soll auslesen
                    var action = $(this).attr("action"); //this ist das formular




                    //alles mixen
                    //ergibt sowas wie: http://example.com/?zugang=012345&NAME=DATE
                    var url = action+'&'+name+'='+date;




                    //Das ganze übergeben
                    $.colorbox({
                        'href'      : url,
                        'width'     : '75%',
                        'height'    : '75%',
                        'type'      : 'iframe'
                    });
                });
            });
        </script>
    </head>
    <body>
        <form id="myForm" action="https://www.domain.de/?zugang=012345">
            <label for="form_date">Geburtsdatum</label>
            <input id="form_date" name="Vertrag_Kunde_geburtsdatum" type="text">
            <input type="submit" title="Absenden" name="submit" value="Klick mich">
        </form>
    </body>
</html>

Alles anzeigen

planlos · 31. August 2014

Nee mein Head sieht natürlich so aus

HTML

<!DOCTYPE html>
<html>
<head>

Ich hatte nur den Code aus dem Beispiel gepostet da ich hier nicht 344 Zeilen Code aus meiner Seite posten und "zumüllen" wollte ;
Es ging in meinem Beispiel nur um den script code und form

wolf · 31. August 2014

funktioniert mein code oder nicht?

planlos · 31. August 2014

Also nun erscheint in der colorbox "This content failed to load."

Es sieht so aus als würde der wert so übergeben:

https://www.example.com/unterseite?Vertrag_Kunde_geburtsdatum=11.11.1980&submit=Klick+mich
(gibt er zumindest in der url aus wenn ich mal das "
event.preventDefault();" weglasse

wolf · 31. August 2014

Schreib mal

JavaScript

alert(url);

planlos · 31. August 2014

hmmm die url passt aber in der colorbox kommt immer noch die fehlermeldung

wolf · 31. August 2014

Dann musst du dort eine fehlermeldung finden...

planlos · 31. August 2014

Also jetzt bleibt die Fehlermeldung aus aber die colorbox ist leer #(also ohne inhalt)

HTML

<script type="text/javascript">
        	//Wenn das doc fertig geladen ist
        	$(document).ready(function() {
            	//wenn das formular abgesendet werden soll
            	$("#myForm").submit( function(event){  
                	//das absenden verhindern
                	event.preventDefault();

                	//Die url zusammenstellen




                	//Wert des inputfeldes
                	var date = $("#form_date").val();
                	//name des inputfeldes => name der später übergebnen variable
                	var name = $("#form_date").attr('name');
                	//link wo das form hingeschickt werden soll auslesen
                	var action = $(this).attr("action"); //this ist das formular




                	//alles mixen
                	//ergibt sowas wie: http://example.com/?zugang=012345&NAME=DATE
                	var url = action+'&'+name+'='+date;
alert(url);
                	//Das ganze übergeben
				//Examples of how to assign the Colorbox event to elements
				$.colorbox({iframe:true, width:"650px", height:"80%"});


            	});
        	});
    	</script>
</head>
<body>

Alles anzeigen

Der altert wird immer noch korrekt ausgegeben

wolf · 31. August 2014

Weil du an die colorbox keine URL weitergibst ?!?!!?!!!
Woher soll die colorbox denn wissen was die URL ist, wenn du diese ihr nicht sagst?

Zeile 31 bei mir.. Wäre ne Idee oder?

planlos · 31. August 2014

Hab es mal mit einer anderen Formatierung versucht wie auf der Colorbox FAQ beschrieben (http://www.active-technologies…/colorbox-beginners-guide)

Jetzt habe ich wieder

HTML

<script type="text/javascript">
        	//Wenn das doc fertig geladen ist
        	$(document).ready(function() {
            	//wenn das formular abgesendet werden soll
            	$("#myForm").submit( function(event){  
                	//das absenden verhindern
                	event.preventDefault();

                	//Die url zusammenstellen




                	//Wert des inputfeldes
                	var date = $("#form_date").val();
                	//name des inputfeldes => name der später übergebnen variable
                	var name = $("#form_date").attr('name');
                	//link wo das form hingeschickt werden soll auslesen
                	var action = $(this).attr("action"); //this ist das formular




                	//alles mixen
                	//ergibt sowas wie: http://example.com/?zugang=012345&NAME=DATE
                	var url = action+'&'+name+'='+date;
alert(url);
                	//Das ganze übergeben
                	$.colorbox({
                    	'href'  	: url,
                    	'width' 	: '75%',
                    	'height'	: '75%',
                    	'type'  	: 'iframe'
                	});
            	});
        	});
    	</script>

Alles anzeigen

Alert OK und colorbox "This content failed to load."
Ich weiß auf jeden Fall nicht weiter. Wie gesagt ein anderer Link auf der Seite (ohne der zu übergebenden Werte) öffnet die Colorbox problemlos

planlos · 31. August 2014

So habs nochmals mit der Fehlerkonsole versucht. Beim Aufruf von Colorbox meldet diese:

Cross-Origin-Anfrage blockiert: Die Same-Origin-Regel verbietet, die externe Ressource auf https://www.example.com/unterseite?zugang=12345&Vertrag_Kunde_geburtsdatum=11.11.1988 zu lesen. Dies kann gelöst werden, indem die Ressource auf die gleiche Domain geschoben wird oder CORS aktiviert wird.

Leider kann ich nicht allzuviel damit anfangen. Die genannte URL lässt sich problemlos im Browser öffnen (nur nicht Colorbox).

wolf · 31. August 2014

Vllt solltest du einfach mal example.com durch deine adresse ersetzen? wär ne Idee oder?!

planlos · 31. August 2014

Im code steht natürlich nicht example.com (ich kann sie auch gerne externe-seite.de nennen wenn du willst

Also normaler Link von meine-seite.de nach externe-seite.de wird über colorbox ohne probleme geöffnet.

Ich will aber einen zuvor einzutragenden wert éines formulars an externe-seite.de ausliefern und einbinden über colorbox.

wenn ich einfach einen festen link erstelle https://www.externe-seite.de/unterseite?zugang=12345&Vertrag_Kunde_geburtsdatum=11.11.1988 und klicke geht es problemlos und das geburtsdatum wird übernommen. Nur über colorbox klappt es nicht. Keine Idee mehr dazu?
Gibt es über php eine Möglichkeit ein Formular zu erstellen in den ich einen wert eingeben kann der mir dann sofort an dieser stelle ausgegeben wird (Vertrag_Kunde_geburtsdatum=PHPEINGABE)? Dann könnte man sich Javascript sparen?

Edit:

Hat sich erledigt. Das ganze funktioniert mit der Fancybox ohne Probleme. Hier will offenbar Colorbox nicht so wie es soll

Frage: Variable per Form an URL ausgeben und an colorbox senden?

Jetzt mitmachen!

Teilen