JavaScript - Script boton de carga

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:

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

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 clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 10

Val: 477

Script boton de carga

Publicado por Alejandro (130 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.

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 clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar