JavaScript - Script boton de carga

 
Vista:

Script boton de carga

Publicado por Oscar (1 intervención) el 24/02/2017 23:52:58
Deseo agregar a un formulario el fecto de cargando, esto cuando se haya confirmado los datos de acceso en una base de datos. Si el usuario ingresa mal los datos que no ocurra nada sobre el formulario solo que se muestre una alerta. El generar la alerta lo realizo con este script:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
with(document.login){
	onsubmit = function(e){
		e.preventDefault();
		ok = true;
		if(ok && username.value==""){
			ok=false;
			alert("Debe escribir un nombre de usuario");
			username.focus();
		}
		if(ok && password.value==""){
			ok=false;
			alert("Debe escribir su password");
			password.focus();
		}
        if(ok){ submit(); }
	}
}
pero el efecto tengo este codigo y no lo he logrado acomodar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var working = false;
$('.login').on('submit', function(e) {
  e.preventDefault();
  if (working) return;
  working = true;
  var $this = $(this),
    $state = $this.find('button > .state');
  $this.addClass('loading');
  $state.html('Autenticando');
  setTimeout(function() {
    $this.addClass('ok');
    $state.html('Bienvenido!');
    setTimeout(function() {
      $state.html('Ingresar');
      $this.removeClass('ok loading');
        window.location = ("teacher/index.html");
      working = false;
    }, 2000);
  }, 3000);
});

segun entiendo el codigo working es a variable de control pero no se para que funciona el addclass o el $state.html, llevo poco en esto se que mi pregunta puede sonar tonta pero agradezco si me pueden orientar. Gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro
Val: 482
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Script boton de carga

Publicado por Alejandro (126 intervenciones) el 26/02/2017 01:21:54
Hola Oscar, te dejo comentado el codigo para que veas lo que se realiza en cada linea.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var working = false; // variable utilizada para controlar el envio del form
 
// manejador de eventos de jQuery, es decir que al enviar el form con la clase .login se ejecuta la siguiente funcion.
$('.login').on('submit', function(e) {
  e.preventDefault(); // previene la accion por defecto del formulario
  if (working) return;
  working = true;
 
  var $this = $(this), // $(this) hacer referencia en este caso a el elemento formulario con la clase .login
      $state = $this.find('button > .state'); // state es un elemento html que tiene la clase .state que al paracer se utiliza 
                                             // para mostrar el mensaje correspondiente.
 
  $this.addClass('loading');    // El metodo addClass de JQuery Permite agreagar una clase a un elemento del DOM
  $state.html('Autenticando'); // El metodo html permite escribir tanto texto como codigo html dentro de un elemento del DOM
 
 
  // setTimeout, permite ejecutar una funcion luego de transcurrido un tiempo en el externo 3 segundos y en el interno 2 segundos.
  //  Luego se vuelve a realizar lo mismo con los metodos mencionados cambiando el mensaje y la clase css.
  //  por ultimo se asigna la url ("teacher/index.html") a la propiedad window.location, para ser rediccionado.
  setTimeout(function() {
    $this.addClass('ok');
    $state.html('Bienvenido!');
 
    setTimeout(function() {
      $state.html('Ingresar');
      $this.removeClass('ok loading');
      window.location = ("teacher/index.html");
      working = false;
    }, 2000);
 
  }, 3000);
 
});

Un Saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar