Loop of multiple IDS in jQuery

Question

I have that code HTML and PHP

<?php foreach (array_chunk($unfollow, 3) as $row): ?>
<div class="row mb-5">
  <?php foreach ($row as $value): ?>
    <?php //var_dump($value) ?>
    <div class="col-md-4">
      <h5><?=$value->node->username?></h5>
      <img src="<?=$value->node->profile_pic_url?>" alt="<?=$value->node->profile_pic_url?>" class="img-fluid" width="100" height="100" data-toggle="tooltip" data-placement="top" title="Você segue <?=$value->node->full_name?>">

      <form method="post" id="add_white_list_<?=$value->node->username?>">
        <div id="message"></div>
        <div class="form-group">
          <input type="hidden" name="his_ds_user_id" value="<?=$value->node->id?>" class="form-control">
          <input type="hidden" name="username" value="<?=$value->node->username?>" class="form-control">
          <input type="hidden" name="url" value="<?=Url::url_base('ajax/add/white_list')?>" class="form-control">
        </div>
        <button type="submit" name="submit" class="btn btn-outline-primary btn-block">Lista branca</button>
      </form>
    </div>
  <?php endforeach ?>
</div>
<?php endforeach ?>

And this in JQuery:

$('#add_white_list_' + 'input[name=his_ds_user_id]'.val()).submit(function(event) {
  event.preventDefault();
  $('#add_white_list button[name=submit]').attr({
    disabled: true
  }).html('<i class="fa fa-spinner fa-spin"></i>');

  function add_white_list() {
    $.ajax({
      url: $('#add_white_list input[name=url]').val(),
      type: 'POST',
      dataType: 'json',
      data: $('#add_white_list').serialize(),
      success: function(a) {
        if (a['status'] === 'ok') {
          $('#gender #message').addClass('alert alert-success').html(a['message']);
        }
      },
      error: function(jqXHR, exception) {
        if (jqXHR.status === 403) {
          $("#add_white_list #message").removeClass('alert alert-info').addClass('alert alert-danger').html('Limite de taxa excedido.');
          $('#add_white_list button[name=submit]').show().attr({
            disabled: false
          }).html('<i class="fa fa-plus"></i> Enviar seguidores');
        } else {
          setTimeout(add_white_list(), 2000);
        }
      },
    });
  }
  add_white_list();
});

Notice I’m giving one id for each form, only it is not working

$('#add_white_list_' + 'input[name=his_ds_user_id]'.val()).submit(function(event)

It was supposed to look something like: #add_white_list_123456789.

There’s some other way to do it?

Answer 1

No need to use id’s on each form. Just take the form that triggered the event submit with this and $(this). Also because you are repeating id’s, as the #message.

Change the #message by a class .message. Then you just search the elements using this. For example:

url: $('input[name=url]', this).val(),

And:

$('.message', this)

And in setTimeout, you do:

setTimeout(function(){
$this.submit()}, 2000);

Where the variable $this you declare at the beginning of the event function:

var $this = $(this);

So much this how much $this represents the form who called the event.

You also don’t need to use a function within the event function. Just run the direct code, which will be called again by firing the event manually on setTimeout, as shown earlier in $this.submit().

Then the code will stay this way:

$('form').submit(function(event) {
  event.preventDefault();
  var $this = $(this);
  $('button[name=submit]', this).attr({
    disabled: true
  }).html('<i class="fa fa-spinner fa-spin"></i>');

    $.ajax({
      url: $('input[name=url]', this).val(),
      type: 'POST',
      dataType: 'json',
      data: $this.serialize(),
      success: function(a) {
        if (a['status'] === 'ok') {
          $('.message', $this).addClass('alert alert-success').html(a['message']);
        }
      },
      error: function(jqXHR, exception) {
        if (jqXHR.status === 403) {
          $(".message", $this).removeClass('alert alert-info').addClass('alert alert-danger').html('Limite de taxa excedido.');
          $('button[name=submit]', $this).show().attr({
            disabled: false
          }).html('<i class="fa fa-plus"></i> Enviar seguidores');
        } else {
          setTimeout(function(){
             $this.submit()}, 2000);
        }
      },
    });
});