jQuery addClass example

Change class name on click in jQuery

by laszlooo

HTML

<div class="frame">
  <form>
    <input value="" name="id" />
    <input value="" name="name" />
    <input value="" name="address" />
    <button type="button" class="btn">
    Tovább
  </button>
  </form>
  <div id="load"> LOADING </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

button[type=button] {
  margin: 30px 0px;
}

#load {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #e66565e0;
  top: 0px;
  left: 0px;
  color: white;
  display: none;
}

.block {
  display: block !important;
}

JavaScript

$(function(){
  var button = $(".btn");
  var loader = $("#load");
	
  //tovább gombal elküldöm a formot
  button.on("click", function() {
  	//addig míg feldolgozom a formot a loader aktív "forog"
    loader.toggleClass("block");
    
    //itt hívom is a functiont 
    test().then(/*loader leállítása*/);
    
    //ha lefut a function a loader leáll 

  })

//form küldés helyett egy példa
  function test() {
    for (let i = 0; i < 10000; ++i) {
      console.log(i);
    }
    return 0;
  }
});