0

Como eu faço quando o php fizer um loop tendo vários formulários tipo assim

    <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>

perceba que ali reg-form_3 e também **form-content_2"**criei para que eu possa excluir os arquivos quando estiver em loop.

estou fazendo assim, funciona apenas no primeiro registro do Loop php, o restante nao funciona

    $(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...');    
        });
     });

1 Resposta 1

0

O problema é que a propriedade id do HTML define elementos únicos na página e não faz sentido definí-los dentro de um loop PHP, visto que os elementos se repetirão. Desta forma, quando você atribui o evento click a '#reg-form_3'+$("#i_content").val(), apenas o primeiro elemento receberá o evento, já que #i_content é único na página. Para contornar isso, poderá utilizar o seletor do jQuery ^= para definir um prefixo.

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

Desta forma, todos os formulários que possuírem um id iniciados com reg-form-3 serão selecionados. Isso inclui reg-form-31, reg-form-32, reg-form-3a, reg-form-3_ ou qualquer outra variação válida de 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...');    
    });
});

Nota: no formulário você definiu um atributo chamado url que não é comum a tag form. Por acaso não seria o atributo action?

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .