Working with DOM elements generated by a PHP loop

Question

How do I when php loops with multiple forms like this

    <form url="deletar_convidado.php" method="post" id="reg-form_3<?php echo $i_content ?>" autocomplete="off" style="border:none;  float:left; width:50px">           
      <input type="hidden" name="i_content" id="i_content" value="<?php echo $i_content ?>">
      <input type="hidden" name="auxiliar_evento_usuarioss" id="auxiliar_evento_usuarioss" value="<?php echo $produto["auxiliar_evento_usuario"] ?>">
       <input type="hidden" name="deletar_convidado" id="deletar_convidado" value="<?php echo $row_convidado['id']; ?>">
        <button class="btn btn-info lista_convidado_1" type="submit"><i class="entypo-cancel-circled"></i></button> 
    </form> 



<div id="form-content_2<?php $i_content++; echo $i_content; ?>" style="clear:both;"></div>

realize that there reg-form_3 and also **form-content_2"**I created so I can delete the files when I’m in loop.

I am doing so, works only on the first record of Loop php, the rest does not work

    $(document).on('click', '#reg-form_3'+$("#i_content").val(), function(e){
        e.preventDefault(); 
        $.ajax({
            url: 'deletar_convidado.php',
            type: 'POST',
            data: $(this).serialize() 
        })
        .done(function(data){
           alert($("#i_content").val());

            $('#form-content_2'+$("#i_content").val()).fadeOut('slow', function(){
                $('#form-content_2'+$("#i_content").val()).fadeIn('slow').html(data);
            });
        })
        .fail(function(){
            alert('Ajax Submit Failed deletar convidado...');    
        });
     });

Answer 1

The problem is that the property id HTML defines unique elements on the page and it makes no sense to define them within a PHP loop, since the elements will be repeated. This way when you assign the event click to '#reg-form_3'+$("#i_content").val(), only the first element will receive the event, since #i_content is unique in the page. To work around this, you can use the jQuery selector ^= to set a prefix.

$(document).on('click', 'form[id^="reg-form_3"]', function(e){...}

In this way, all forms that have a id started with reg-form-3 will be selected. This includes reg-form-31, reg-form-32, reg-form-3a, reg-form-3_ or any other valid variation of id.

$(document).on('click', 'form[id^="reg-form_3"]', function(e){

    e.preventDefault();

    // Recupera o elemento form:
    var form = $(this);

    // Recupera o valor do campo i_content no formulário:
    var i_content = form.find("input[name='i_content']).val();

    // Faz a requisição AJAX conforme os atributos de form:
    $.ajax({
        url: form.attr("action"),
        type: form.attr("method"),
        data: form.serialize() 
    })

    // Aqui permaneceu praticamente igual, exceto o uso do valor de i_content:
    .done(function(data){
        alert(i_content);

        $('#form-content_2' + i_content).fadeOut('slow', function(){
            $('#form-content_2' + i_content).fadeIn('slow').html(data);
        });
    })
    .fail(function(){
        alert('Ajax Submit Failed deletar convidado...');    
    });
});

Note: in the form you defined an attribute called url which is not common to tag form. It wouldn’t happen to be the attribute action?