JQuery Problem

form · 8. Januar 2010

Hallo,

ich versuche gerade ein Callback-Formular für meine Seite zu basteln. Jetzt habe ich das ganze auch soweit fertig, würde aber gerne das Formular nicht "normal" per Get oder Post senden, sondern über AJAX eine elegantere Lösung bevorzugen.

Schön wäre es, wenn ohne die Seite neu zu laden, das Formular verschwindet und ein Danketext (neues DIV) eingeblendet wird.

Das ist mein Stand bisher:

Code:

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



	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>index</title>
	<style type="text/css">
		#wrapper {
			width: 500px;
			margin: 0 auto;
		}
		
		#feedback {
			display: none;
			position: absolute;
			top: 250px;
			left: 0;
			background-color: #d1021c;
			height: 160px;
			width: 360px;
			margin: 0 0 0 -320px;
			padding-left: 25px;
		}
		
		#feedback img {
			position: absolute;
			right: 0;
			top: 0;
			
		}
		h3 {
			font-family: Verdana;
			color: white;
		}
		form input {
			display: block;
		}
	</style>
	<script src="jquery/jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			var feed = $('#feedback');
			feed.css("display", "block").data("showing", false).children("form, h3").hide()
			feed.children("img").click(function() {
				var t = feed;
				if(t.data("showing") == false) {
					t.animate({
						marginLeft: "0",
						height: "400px"
					}).data("showing", true).children("img").attr("src", "back.gif").css("top", "100px").siblings().show();
				} else {
					t.animate({
						marginLeft: "-320px",
						height: "160px"
					}).data("showing", false).children("img").attr("src", "callback.gif").css("top", "0").siblings().hide();
				}
				
			})
			
		}); //end document ready
	</script>
</head><body>
	<div style="display: block;" id="feedback">
		<h3 style="display: none;">wir rufen zurück!</h3>
		<p style="width:290px;color:white;text-align:justify;font-family:Arial,Helvetica,Sans-Serif;font-size:12px;">sie finden nicht alle antworten auf ihre fragen? gerne rufen wir sie zurück um alle fragen zu beantworten!</p>
		<form style="display: none;">
			<input type="text" name="name" value="ihr name" onfocus="if(this.value==this.defaultValue)this.value='';"onblur="if(this.value=='')this.value=this.defaultValue;" style="width:240px;"><br/>
			<select name="thema" style="width:240px;">
			<option value="0">bitte betreffendes thema auswählen</option>
			<option value="test1">test1</option>
			<option value="test2">test2</option>
			<option value="test3">test3</option>
			</select><br/><br/>
			<input type="text" name="telefon" value="ihre telefonnummer" onfocus="if(this.value==this.defaultValue)this.value='';"onblur="if(this.value=='')this.value=this.defaultValue;" style="width:240px;"><br/>
			<input value="callback anfordern" type="submit">
		</form>
		<img src="callback.gif" alt="Get a callback!">
	</div>
	<div id="wrapper">
		<div>
			<h2>Some Content</h2>
			<p>Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac eros ut
orci faucibus hendrerit at sit amet dolor. Mauris sed magna augue, et
tempor metus. Phasellus mollis laoreet metus, vel feugiat neque varius
lobortis. Nunc vestibulum felis id ipsum commodo suscipit. Donec
fringilla sagittis lorem ac tempor. Duis tincidunt pulvinar hendrerit.
Ut hendrerit congue suscipit. Nullam eget justo dolor, nec vestibulum
dolor. Donec libero neque, tincidunt ut blandit sit amet, fermentum vel
nisi. Donec vitae lacus in orci dignissim consequat sed id metus. Duis
pretium elit ac massa tempor dignissim. Fusce tincidunt augue id ipsum
semper hendrerit eu et est. Vestibul</p>
			<h2>More Content</h2>
			<p>Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac eros ut
orci faucibus hendrerit at sit amet dolor. Mauris sed magna augue, et
tempor metus. Phasellus mollis laoreet metus, vel feugiat neque varius
lobortis. Nunc vestibulum felis id ipsum commodo suscipit. Donec
fringilla sagittis lorem ac tempor. Duis tincidunt pulvinar hendrerit.
Ut hendrerit congue suscipit. Nullam eget justo dolor, nec vestibulum
dolor. Donec libero neque, tincidunt ut blandit sit amet, fermentum vel
nisi. Donec vitae lacus in orci dignissim consequat sed id metus. Duis
pretium elit ac massa tempor dignissim. Fusce tincidunt augue id ipsum
semper hendrerit eu et est. Vestibul</p>
		</div>
	</div>

</body></html>

ComFreek · 8. Januar 2010

Was ist denn genau dein Problem?
Weißt du, wie man AJAX "macht"?

Also ich würde die Eingabefelder (<textarea>) in einem DIV platzieren und dannoch ein zusätzliches (anfangs leer) DIV für eine Danke-Nachricht.

form · 8. Januar 2010

Nein, ich weiß das ich mit JQuery die Eingaben an ein PHP übergeben kann. Aber nicht genau wie.
Dann würde ich das DIV mit dem Formular auf hidden setzen und das andere auf block?

DeluXe · 8. Januar 2010

Man gebe bei Google zum Beispiel "howto jquery form send" ein und erhalte als zweites Ergebnis folgendes Howto: http://www.ryancoughlin.com/2008/11/04/use-jquery-to-submit-form/

Probiere es so - oder so ähnlich - umzusetzen, wenn du irgendwo nicht weiter weisst, kannst du natürlich gerne nachfragen.

Um die funktionsweise von jQuery besser zu verstehen, ist http://docs.jquery.com nach wie vor die beste Anlaufstelle.

ComFreek · 8. Januar 2010

@form: genau das eine auf hidden, das andere auf block!

Ähhmm wenn du nur ein Formular senden willst, würd ich das ohne jQuery machen. Der Browser muss doch erst den ganzen Code von jQuery interpretieren und das kostet Zeit. Oder liege ich falsch?

DeluXe · 8. Januar 2010

ComFreek hat gesagt.:
Ähhmm wenn du nur ein Formular senden willst, würd ich das ohne jQuery machen. Der Browser muss doch erst den ganzen Code von jQuery interpretieren und das kostet Zeit. Oder liege ich falsch?

Das geht im Normalfall trotzdem schneller, als erst die komplette Seite neu laden und darstellen zu müssen.

form · 8. Januar 2010

Danke für den Tipp. Hab ich jetzt umgesetzt, aber leider funktioniert die Success-Benachrichtung nicht richtig. Trotz des Style="display:none;" wird das Div angezeigt. Ich nehme an es liegt an dem Script zum ein- und ausfaden...

Hier der Code:

Code:

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



	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>index</title>
	<style type="text/css">
		#wrapper {
			width: 500px;
			margin: 0 auto;
		}
		
		#feedback {
			display: none;
			position: absolute;
			top: 250px;
			left: 0;
			background-color: #d1021c;
			height: 160px;
			width: 360px;
			margin: 0 0 0 -320px;
			padding-left: 25px;
		}
		
		#feedback img {
			position: absolute;
			right: 0;
			top: 0;
			
		}
		h3 {
			font-family: Verdana;
			color: white;
		}
		form input {
			display: block;
		}
	</style>
	<script src="jquery/jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			var feed = $('#feedback');
			feed.css("display", "block").data("showing", false).children("form, h3").hide()
			feed.children("img").click(function() {
				var t = feed;
				if(t.data("showing") == false) {
					t.animate({
						marginLeft: "0",
						height: "400px"
					}).data("showing", true).children("img").attr("src", "back.gif").css("top", "100px").siblings().show();
				} else {
					t.animate({
						marginLeft: "-320px",
						height: "160px"
					}).data("showing", false).children("img").attr("src", "callback.gif").css("top", "0").siblings().hide();
				}
				
			})
			
		}); //end document ready

$(document).ready(function(){  
$("form#submit").submit(function() {  
var Name     = $('#Name').attr('value');  
var Telefon    = $('#Telefon').attr('value');
var Thema     = $('#Thema').attr('value'); 
$.ajax({  
type: "POST",  
url: "callback.php",  
data: "Name="+ Name +"& Telefon="+ Telefon+"& Thema="+ Thema,  
success: function(){  
$('form#submit').hide(function(){$('div.success').fadeIn();});  
}  
});  
return false;  
});  
});  
  
  	</script>
</head><body>
	<div style="display: block;" id="feedback">
		<h3 style="display: none;">wir rufen zurück!</h3>
		<p style="width:290px;color:white;text-align:justify;font-family:Arial,Helvetica,Sans-Serif;font-size:12px;">sie finden nicht alle antworten auf ihre fragen? gerne rufen wir sie zurück um alle fragen zu beantworten!</p>
		<form id="submit" method="post" style="display: none;">
			<input type="text" name="Name" id="Name" value="ihr name" onfocus="if(this.value==this.defaultValue)this.value='';"onblur="if(this.value=='')this.value=this.defaultValue;" style="width:240px;"><br/>
			<select name="Thema" id="Thema" style="width:240px;">
			<option value="0">bitte betreffendes thema auswählen</option>
			<option value="test1">test1</option>
			<option value="test2">test2</option>
			<option value="test3">test3</option>
			</select><br/><br/>
			<input type="text" name="Telefon" id="Telefon" value="ihre telefonnummer" onfocus="if(this.value==this.defaultValue)this.value='';"onblur="if(this.value=='')this.value=this.defaultValue;" style="width:240px;"><br/>
			<input value="callback anfordern" class="button" type="submit">
		</form>
		<img src="callback.gif" alt="Callback">
		<div class="success" style="display:none;">wir haben ihren r&uuml;ckrufwunsch erhalten!</div>  
	</div>
	<div id="wrapper">
		<div>
			<h2>Some Content</h2>
			<p>Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac eros ut
orci faucibus hendrerit at sit amet dolor. Mauris sed magna augue, et
tempor metus. Phasellus mollis laoreet metus, vel feugiat neque varius
lobortis. Nunc vestibulum felis id ipsum commodo suscipit. Donec
fringilla sagittis lorem ac tempor. Duis tincidunt pulvinar hendrerit.
Ut hendrerit congue suscipit. Nullam eget justo dolor, nec vestibulum
dolor. Donec libero neque, tincidunt ut blandit sit amet, fermentum vel
nisi. Donec vitae lacus in orci dignissim consequat sed id metus. Duis
pretium elit ac massa tempor dignissim. Fusce tincidunt augue id ipsum
semper hendrerit eu et est. Vestibul</p>
			<h2>More Content</h2>
			<p>Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac eros ut
orci faucibus hendrerit at sit amet dolor. Mauris sed magna augue, et
tempor metus. Phasellus mollis laoreet metus, vel feugiat neque varius
lobortis. Nunc vestibulum felis id ipsum commodo suscipit. Donec
fringilla sagittis lorem ac tempor. Duis tincidunt pulvinar hendrerit.
Ut hendrerit congue suscipit. Nullam eget justo dolor, nec vestibulum
dolor. Donec libero neque, tincidunt ut blandit sit amet, fermentum vel
nisi. Donec vitae lacus in orci dignissim consequat sed id metus. Duis
pretium elit ac massa tempor dignissim. Fusce tincidunt augue id ipsum
semper hendrerit eu et est. Vestibul</p>
		</div>
	</div>

</body></html>

DeluXe · 8. Januar 2010

Die jQuery-Funktion hide() erwartet eine Callback-Funktion als zweiten Parameter, nicht als ersten. Siehe dazu wie schon erwähnt in der Dokumentation: http://docs.jquery.com/Effects/hide#speedcallback

Wird die Form denn korrekt abgesendet? Das solltest du mit Hilfe von Firebug im "Netzwerk"-Tab sehen können.

form · 8. Januar 2010

Wo? Was? Nicht verstanden.
Ja, das Formular wird übertragen.

form · 8. Januar 2010

Noch eine andere Idee, aber damit bin ich Hoffnungslos überfordert. Vielleicht könnte man ja einfach nach dem Absenden des Formulars das ganze DIV (feedback) wieder einklappen lassen?

JQuery Problem

form

Mitglied

Anhänge

ComFreek

Mod | @comfreek

form

Mitglied

DeluXe

Funkjoker

ComFreek

Mod | @comfreek

DeluXe

Funkjoker

form

Mitglied

DeluXe

Funkjoker

form

Mitglied

form

Mitglied

Neue Beiträge