jquery_logo

Bueno, se que parecerá eterno el titulo que le coloque a esta entrada pero la verdad es que el codigo que les dejo a continuación realiza precisamente eso, envía un formulario sin refrescar la  página usando JQuery, muestra un mensaje de espera, si es exitoso muestra el suceso y si hay un error también muestra el error. Este codigo lo desarrolle junto con php, por lo que el php responde Success si la transacción realizada fue realizada con éxito y Error si fue erronea, tomenlo  en cuenta al leer el codigo.

Como siempre no explico el código de una vez, por cuestiones de tiempo, son las 12:43 a.m. pero quien lo desee por favor comenten en este blog, denle un like o un +1 y con gusto explicaré cada línea.

y sin mas preambulo paso al codigo

/*  submit form*/
	$("#send").click(function() {
		var lastname = $("#lastname").val();
		var firstname = $("#firstname").val();
		var phone = $("#phone").val();
		var email = $("#email").val();
		var address = $("#address").val();
		var sex = $("#sex").val();
		var amount = $("#amount").val();
		var dateofdonation = $("#dateofdonation").val();
		var totalamount = $("#totalamount").val();
		var postData = 'lastname='+ lastname + '&firstname=' + firstname + '&phone=' + phone + '&email=' + email + '&address=' + address + '&sex=' + sex + '&amountdonated=' + amount + '&dateofdonation=' + dateofdonation + '&totalamount=' + totalamount;
		$.ajax({
			url:'add_income.php',
			data: postData,
			type:'POST',
			cache: false,
			beforeSend: function(){
				$("#message_ajax").html("Loading.........");
				$("#message_ajax").show();
				},
			success:function(data){
				console.log(data);
				if(data == "Success"){
					$("#message_ajax").html("");
				$("#message_ajax").html(data);
				$("#message_ajax").show().fadeOut(5000);
				//=== Show Success Message==
				} else {
					$("#error").html(data);
					$("#error").show().fadeOut(5000);
					$("#message_ajax").hide(); //=== Show Success Message==
					}
			},
			error:function(data){
				$("#message_ajax").hide();
				$("#error").show().fadeOut(5000);
				//===Show Error Message====
			}
		});

	});
	e.preventDefault();
	return false;

Espero les haya sido de utilidad.