JQuery Problem

form

Mitglied
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>
 

Anhänge

  • back.gif
    back.gif
    467 Bytes · Aufrufe: 119
  • callback.gif
    callback.gif
    936 Bytes · Aufrufe: 119
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.
 
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?
 
@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?:confused:
 
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>
 
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?
 

Neue Beiträge

Zurück