jQuery addClass example

Change class name on click in jQuery

by Dmitri Ganenco

HTML

<div class="update">
	<form method="post" action="adminFunctions.php">
		<div class="input-group">
			<label>new name</label>
			<input class='newNameInput' type="text" name="newName" >
		</div>
		<div class="input-group">
			<label>new last name</label>
			<input class='newLastNameInput' type="text" name="newLastName">
		</div>
		<div class="input-group">
    <input type='hidden' name='id' value='1'/>
			<button class="btn changePerson">change</button>
		</div>
	</form>
</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).ready(function(){

    var changeId;
    $('.changeMe').click(function () {
      var el = this;
      var id = this.id;
      var splitid = id.split("_");
      changeId = splitid[1];
      $('.update').css('display', 'block');
    });
    
    $('.changePerson').click(function () {
          var newNameFor = $('.newNameInput').val();
          var newLastNameFor = $('.newLastNameInput').val();
      		var idFor = $('input[type="hidden"]').val();
          
          var data = {changeSth: idFor, newName: newNameFor, newLastName: newLastNameFor};
          $.ajax({
            url: './adminFunctions.php',
            type: 'POST',
            data: data,
            success: function(response) {
                if(response == 1) {
                  alert('OK');
                } else {
                  console.error('entry update failed');
                }
            }
          })
        });
});