Add class using Jquery in a specific form?

Question

How to add a class to the palette button I click on "Like"?

For example, I have several color palettes, but when I click on Like, all buttons get the class .red, I wanted just what I clicked to get the class:

My HTML:

<form method="post" id="like">
    <div class="form-group">
        <input type="hidden" name="id" value="<?=$row->id?>" class="form-control">
    </div>
    <div class="form-group">
        <input type="hidden" name="url" value="<?=Url::urlBase('palette/ajax/like')?>" class="form-control">
    </div>
    <button type="submit" name="submit" class="btn btn-light btn-sm">
        <i class="fas fa-heart"></i> <?=$row->likes?>
    </button>
</form>

My code ajax:

$('form#like').submit(function (e) {
    e.preventDefault();

    $.ajax({
        type: 'POST',
        url: $('#like input[name=url]').val(),
        data: $(this).serialize(),
        dataType: 'json',
        success: function (response) {
            if (response.success) {
                $('#like button[name=submit]').addClass('red')
            }
        }
    });
});

And taking advantage of the topic, I would also like to know how I can keep the red class active even if it gives Reload on the page? Since I am not using a login system, here everyone who enters the site can give the Ikes. In the future I will do to excuse.

Answer 1

See if it helps you:

$(document).on("click", ".botao-curtir", function(e) {
  //e.preventDefault();

  $(this).addClass('red');

});

<form method="post" id="like">
  <div class="form-group">
    <input type="hidden" name="id" value="<?=$row->id?>" class="form-control">
  </div>
  <div class="form-group">
    <input type="hidden" name="url" value="<?=Url::urlBase('palette/ajax/like')?>" class="form-control">
  </div>
  <button type="submit" name="submit" class="btn btn-light btn-sm botao-curtir">
        <i class="fas fa-heart"></i> <?=$row->likes?>
    </button>
</form>

• If it is according to your code, you can add a class or an id to your Submit button and, on the return of AJAX, add this class 'red' to the button, taking as a reference the class or ID you gave it. Behold:

$('form#like').submit(function(e) {
  e.preventDefault();

  $.ajax({
    type: 'POST',
    url: $('#like input[name=url]').val(),
    data: $(this).serialize(),
    dataType: 'json',
    success: function(response) {
      if (response.success) {
        $('.botao-like').addClass('red')
      }
    }
  });
});

• To identify a button, you do not need to use the name attribute (Generally, the name attribute serves to represent a collection of values, sent through a form, to the server), you can use ID or Class.