Problem with jquery with multiple Forms

Question

I have several formats in my code that I need to send the information with ajax to PHP, is returning this error:

Uncaught Referenceerror: formID is not defined

It says that the formID has not been set, but on my forms they are appearing, as I would do to resolve this and send the information of each form?

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;
    });
});

Form

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

I did so and returns this error

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;
});

Answer 1

At the beginning of your jQuery you don’t pass any ID to SUBMIT. It doesn’t know who to apply the event to. You can apply something better with classes.

Give your forms a class, say "formAjax";

And then apply your jQuery to the class:

//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;
});

Did you see I pulled the date("formid")? I saw that you’re going to need to pass this dice later, and since we’re working with the class we’re going to need to pull this dice from somewhere else. So in your form you add "data-formid='X'"

Thus:

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

That should solve your problems