✔ jquery submit form

creativeheadz

creativeheadz

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

Code: 
<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:

Code: 
			  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

Code: 
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ß
 
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?


Code: 
<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>
 
Super! Vielen Dank für die Schnelle Hilfe :) Es Klappt!

Noch eine Kurze Frage:

Derzeit nutze
Code: 
$('#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
 
Zuletzt bearbeitet von einem Moderator:
Das müsste eigentlich parallel als Event funktionieren...

Code: 
$('#basket').slideUp(1000, function() {
  $('#done').slideDown(1000);
}
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück