Problem with jquery with multiple forms

Navigation
0

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

Uncaught ReferenceError: formID is not defined

It says that the formID was not defined, but in my forms they are appearing, how would I go about solving this and submitting information for 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 this and returned this error

formDetails is not defined 

<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;
});
    
asked by anonymous 01.06.2018 / 21:01

1 answer

1

At the beginning of your jQuery you do not pass any ID to SUBMIT. He does not 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 that I pulled the date ("formid")? I saw that you will need to pass this data later, and as we are working with the class we will need to pull this data from somewhere else. Then in your form you add "data-formid = 'X'"

So: 

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

This should solve your problems

    
01.06.2018 / 21:21
Delete User Identity How to do SQL query using like comparator and multiple values out of order