✔ jquery submit form

[creativeheadz]

Hallo, leider bin ich noch nicht so firm in Sachen JavaScript und jQuery, versuche mich jedoch immer wieder mal an den ein oder anderen Sachen.

Ich möchte ein Formular absenden welches ich zuvor überprüft habe. Das Überprüfen funktioniert einwandfrei. Das Absenden leider nicht.

Hier ersteinmal der Validierungscode:

<script id="demo" type="text/javascript">
$(document).ready(function() {
	// validate signup form on keyup and submit
	var validator = $("#signupform").validate({
		rules: {
			lname: "required",
			fname: "required",
			street: "required",
			hnr: "required",
			zipcode: {
				required: true,
				minlength: 5
			},
			city: "required",
			phone: "required",
			email: {
				required: true,
				email: true,
				remote: "common/emailcheck.php"
			},

			password: {
				required: true,
				minlength: 5
			},
			password_confirm: {
				required: true,
				minlength: 5,
				equalTo: "#password"
			},
			terms: "required"
		},
		
		messages: {
			fname: '<img src="img/icons/err.jpg"> ',
			lname: '<img src="img/icons/err.jpg"> ',
			street: '<img src="img/icons/err.jpg"> ',
			hnr: '<img src="img/icons/err.jpg"> ',
			zipcode: {
				required: '<img src="img/icons/err.jpg"> ',
				rangelength: jQuery.format("Min. {0} Zeichen")
			},
			city: '<img src="img/icons/err.jpg"> ',
			phone:'<img src="img/icons/err.jpg"> ',
			
			password: {
				required: '<img src="img/icons/err.jpg"> ',
				minlength: jQuery.format("Min. {0} Zeichen")
			},
			password_confirm: {
				required: '<img src="img/icons/err.jpg"> ',
				minlength: jQuery.format("Min. {0} Zeichen"),
				equalTo: "Passwörter nicht identisch."
			},
			email: {
				required: '<img src="img/icons/err.jpg"> ',
				minlength: "Falsche E-Mail.",
				remote: jQuery.format("{0} Wird bereits benutzt.")
			},
			terms: " "
		},
		// the errorPlacement has to take the table layout into account
		errorPlacement: function(error, element) {
			if ( element.is(":radio") )
				error.appendTo( element.parent().next().next() );
			else if ( element.is(":checkbox") )
				error.appendTo ( element.next() );
			else
				error.appendTo( element.parent().next() );
		},
		
		submitHandler: function() {

                  alert("Super");
			
		},
		
		success: function(label) {
			
			label.html("&nbsp;").addClass("checked");
		}
	});
	


});
</script>

Nachdem ich die jQuery Doku etwas durchstöbert habe bin ich nun soweit, dass ich weiss das ich ca. folgenden Code einbinden muss um das Formular abzusenden:

			  var data = 'fname=' + fname.val() ;
			
			  $.ajax({
				url: "saveData.php",	
				type: "POST",		
				data: data,		
			
				success: function (reqCode) {				
			
					if (reqCode==1) {					
			
						$('.myForm').fadeOut('slow');					
						 
						$('.done').fadeIn('slow');
			
					} else{ 
						 alert('Fehler beim Abschicken des Formulares.');
			
					}				
				}		
			});
		
			return false;

Ich dachte das der Code nun die Stelle

alert("Super");

ersetzt.

Fehlanzeige Da tut sich nichts. Hat jemand Lust und Zeit mir auf die Sprünge zu helfen und mir kurz erklären was ich falsch mache?

Wäre super

Gruß

 

[creativeheadz]

So ich habs nun hinbekommen.

Leider muss ich immer 2mal auf den Submitbutton Klicken, damit das komplette ausgefüllte Formular abgesendet wird. Woran Liegt das?

<script id="demo" type="text/javascript">
$(document).ready(function() {

	var validator = $("#signupform").validate({
		rules: {
			lname: "required",
			fname: "required",
			street: "required",
			hnr: "required",
			zipcode: {
				required: true,
				minlength: 5
			},
			city: "required",
			phone: "required",
			email: {
				required: true,
				email: true,
				remote: "common/emailcheck.php"
			},

			password: {
				required: true,
				minlength: 5
			},
			password_confirm: {
				required: true,
				minlength: 5,
				equalTo: "#password"
			},
			terms: "required"
		},
		
		messages: {
			fname: '<img src="img/icons/err.jpg"> ',
			lname: '<img src="img/icons/err.jpg"> ',
			street: '<img src="img/icons/err.jpg"> ',
			hnr: '<img src="img/icons/err.jpg"> ',
			zipcode: {
				required: '<img src="img/icons/err.jpg"> ',
				rangelength: jQuery.format("Min. {0} Zeichen")
			},
			city: '<img src="img/icons/err.jpg"> ',
			phone:'<img src="img/icons/err.jpg"> ',
			
			password: {
				required: '<img src="img/icons/err.jpg"> ',
				minlength: jQuery.format("Min. {0} Zeichen")
			},
			password_confirm: {
				required: '<img src="img/icons/err.jpg"> ',
				minlength: jQuery.format("Min. {0} Zeichen"),
				equalTo: "Passwörter nicht identisch."
			},
			email: {
				required: '<img src="img/icons/err.jpg"> ',
				minlength: "Falsche E-Mail.",
				remote: jQuery.format("{0} Wird bereits benutzt.")
			},
			terms: " "
		},

		errorPlacement: function(error, element) {
			if ( element.is(":radio") )
				error.appendTo( element.parent().next().next() );
			else if ( element.is(":checkbox") )
				error.appendTo ( element.next() );
			else
				error.appendTo( element.parent().next() );
		},

		submitHandler: function() {
			
        $("form#signupform").submit(function() {        
         var dataStr = $("#signupform").serialize();
          $.ajax({
           type: "POST",
           url: "test.php",
           data: dataStr,
           success: function(del){
             $('#basket').fadeout("slow");
             $('#done').show();
            }
           });
          return false;
         }); 
			
		},

		success: function(label) {

			label.html("&nbsp;").addClass("checked");
		}
	});
	


});
</script>

 

[para_noid]

Die Beschreibung des submitHandlers lautet:

Callback for handling the actual submit when the form is valid.

Du hast innerhalb des submitHandlers wiederum einen Eventhandler für submit definiert. Probier es mal ohne den

$("form#signupform").submit(function() {

-Bereich.

 

[creativeheadz]

Super! Vielen Dank für die Schnelle Hilfe Es Klappt!

Noch eine Kurze Frage:

Derzeit nutze

$('#basket').slideUp(1000);
$('#done').slideDown(1000);

slideUp #basket auszublenden und slideDown um #done einzublenden.

Diese Beiden Effekte werden derzeit gleichzeitig ausgeführt. Das sieht etwas unschön bzw. wild aus.

Ist es möglich erst den Slidedown auszuführen wenn slideUp erledigt ist?

Grüße

 

[para_noid]

Das müsste eigentlich parallel als Event funktionieren...

$('#basket').slideUp(1000, function() {
  $('#done').slideDown(1000);
}

 

[creativeheadz]

Danke, da fehlte aber glaub ich noch ne " ) "

$('#basket').slideUp(1000, function() {
$('#done').slideDown(1000);
})

Super Danke nochmal!

 

[para_noid]

ääh ja und das Semikolon am Ende sorry

 

[creativeheadz]

jo stimmt habs noch entdeckt