jQuery toggleClass example

Toggle class name on click in jQuery

by Sascha

HTML

<div class='col-sm-1'>
  <img src='https://gamepedia.cursecdn.com/nomanssky_gamepedia/7/7a/TREASUREPROD.FOSSIL.png?version=e62f2839d1d7488349b68c3f187250bd' />
  <label class='myLabel' id='Blabla'>
    <input type='file' id='files123' multiple='' />
    <i class='fa fa-pencil'></i>
  </label>
</div>

<div class='col-sm-1'>
  <div class=''>
    <button class='btn btn-remove btn-danger' type='button'><span class='glyphicon glyphicon-minus' onclick='DeleteSubject(123)'></span></button>
  </div>
</div>

CSS

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

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

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

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

$(document).on("click",".myLabel",function(e){
  debugger;
    e.preventDefault();
    var subjectID = this.id;
    var file_data = $('#files'+subjectID).prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
    form_data.append('subjectID', subjectID);            
    $.ajax({
        type:"POST",
        data:form_data,
        processData: false,
        contentType: false,
        url: '',
        success: function(php_script_response){
          alert(php_script_response);
          setTimeout(function(){
            // location.reload();
          },2000);
        }
     });
  });