0

Tenho vários forms no meu código que preciso enviar as informações com ajax para o PHP, está retornando esse erro:

Uncaught ReferenceError: formID is not defined

Diz que o formID não foi definido, mas nos meus forms eles estão aparecendo, como eu faria para resolver isso e enviar as informações de cada formulário?

Jquery

$(document).ready(function() {
    $('#selecionar_empresa_form_'+formID).submit(function() {

        //Remove a palavra quitar_ e deixa somente "debitoX"


        //Captura o elemento que sofreu o evento de "submit"
        const formDetails = $(this);

        $.ajax({
            type: "POST",
            url: 'selecionar_empresa.php',
            data: formDetails.serialize(),
            success: function (data) { 
                // Inserting html into the result div
                $('.selecionar_empresa_'+formID).html(data);
            },
            error: function(jqXHR, text, error){
                // Displaying if there are any errors
                $('.selecionar_empresa_'+formID).html(error);           
            }
        });
        return false;
    });
});

Formulário

    <form id="selecionar_empresa_form_<?php echo $i ?>" method="post" enctype="multipart/form-data">    

<input type="hidden" name="i" value="<?php echo $i ?>"  class="i">   

<input type="hidden" name="id_usuario_selecinadas" value="<?php echo $id_usuario ?>" class="id_usuario_selecinadas">

<input type="hidden" name="selecionar_empresa" id="selecionar_empresa_<? echo $curnm['id'] ?>" value="<? echo $curnm['id'] ?>" />

    <div class="resultado_empresa_selecionada_<?php echo $i ?>">
    <button type="submit"><img src="images/add-star.png" class="img-responsive" style="float:right;max-width: 24px;" /> </button>
    </div>
    </form>

Fiz assim e retorna esse erro

formDetails is not definied

<form id="selecionar_empresa_form_<?php echo $i ?>" class="formAjax" data-formid="<?=$i?>" method="post" enctype="multipart/form-data">


<input type="hidden" name="i" value="<?php echo $i ?>"  class="i">   

   <input type="hidden" name="id_usuario_selecinadas" value="<?php echo $id_usuario ?>" class="id_usuario_selecinadas">

<input type="hidden" name="selecionar_empresa" id="selecionar_empresa_<? echo $curnm['id'] ?>" value="<? echo $curnm['id'] ?>" />
<div class="resultado_empresa_selecionada_<?php echo $i ?>">
<button type="submit"><img src="images/add-star.png" class="img-responsive" style="float:right;max-width: 24px;" /> </button>
</div>
</form>

JS

//Executa em cada form:
$('.formAjax').on("submit",function() {
    // Pegar o ID do formulário para depois:
    var formID=formDetails.data("formid");

    //Remove a palavra quitar_ e deixa somente "debitoX"

    //Captura o elemento que sofreu o evento de "submit"
    const formDetails = $(this);

    $.ajax({
        type: "POST",
        url: 'selecionar_empresa.php',
        data: formDetails.serialize(),
        success: function (data) {
            // Inserting html into the result div
            $('.selecionar_empresa_'+formID).html(data);
        },
        error: function(jqXHR, text, error){
            // Displaying if there are any errors
            $('.selecionar_empresa_'+formID).html(error);
        }
    });
    return false;
});

1 Resposta 1

1

No começo do seu jQuery você não passa nenhum ID para o SUBMIT. Ele não sabe em quem aplicar o evento. Você pode aplicar algo melhor com classes.

Dê uma classe aos seus formulários, digamos "formAjax";

E então aplique o seu jQuery na classe:

//Executa em cada form:
$('.formAjax').on("submit",function() {
    // Pegar o ID do formulário para depois:
    //Captura o elemento que sofreu o evento de "submit"
    const formDetails = $(this);

    var formID=formDetails.data("formid");

    //Remove a palavra quitar_ e deixa somente "debitoX"


    $.ajax({
        type: "POST",
        url: 'selecionar_empresa.php',
        data: formDetails.serialize(),
        success: function (data) {
            // Inserting html into the result div
            $('.selecionar_empresa_'+formID).html(data);
        },
        error: function(jqXHR, text, error){
            // Displaying if there are any errors
            $('.selecionar_empresa_'+formID).html(error);
        }
    });
    return false;
});

Viu que eu puxei o data("formid")? eu vi que você vai precisar passar esse dado depois, e como estamos trabalhando com a classe nós precisaremos puxar esse dado de outro lugar. Então no seu form você adiciona "data-formid='X'"

Assim:

<form id="selecionar_empresa_form_<?php echo $i ?>" class="formAjax" data-formid="<?=$i?>" method="post" enctype="multipart/form-data">

Isso deve solucionar seus problemas

2
  • fiz como voce falou, retorna esse erro no console formDetalis is not definied, olha como fiz na minha pergunta, editei ela 1/06/2018 às 19:29
  • Ah, erro meu. eu puxei o formDetails antes de definir ele, vou editar minha resposta. 1/06/2018 às 19:30

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 .