Capture the Hidden input values that suffered the event in the "change" select with jQuery serialize()

Question

My AJAX is not sending form variables.

What I could do to get the values of the fields <input type="hidden"> with the AJAX in the change event jQuery?

I’m doing like this:

HTML form

<form id="frete_<?php echo $result4["id"]?>" class="frete formAjax2" data-formid_frete="<?php echo $result4["id"]?>" method="post" enctype="multipart/form-data">           

<select class="form-control frete" name="retirar_loja" id="exampleFormControlSelect1" data-formid_loja="<?php echo $result4["id"]?>">
      <option value="" selected>Selecione</option>
      <option value="pagar_retirar_loja">Pagar e Retirar na Loja</option>
      <option value="retirar_loja">Retirar na Loja</option>
    </select>


<button type="submit" name="frete" class="btn btn-warning btn-sm">Calcular</button>

<input  type="hidden" value="<? echo $result4['id_cliente'] ?>" id="id_cliente" name="id_cliente" class="form-control">

</form>

Ajax

$(".frete").on("change", "select", function() { 

    // Pegar o ID do formulário
    //Captura o elemento que sofreu o evento de "chancge"
    const formDetails_frete = $(this);

    var formid_loja=formDetails_frete.data("formid_loja");

    $('.resultado_frete_'+formid_loja).html('<img src="imagens/Ellipsis-1s-66px.gif">');                

    $.ajax({
    url: 'frete.php',
    type: 'POST',
    data: formDetails_frete.serialize(),
    success: function (data) {
    // Inserting html into the result div
    $('.resultado_frete_'+formid_loja).html(data);
    $('.resultado_frete_'+formid_loja).fadeIn('slow').html(data);
        },
    error: function (xhr) {
    alert("Something went wrong, please try again");
    }

    });

I did so in ajax too, even working capturing the values of the Hidden input, however, it does not show the result of successes.

$(".frete").on("change", "select", function() { 

    // Pegar o ID do formulário para depois:
    //Captura o elemento que sofreu o evento de "submit"
    const formDetails_frete = $(this).closest(".frete");



    var formid_loja=formDetails_frete.data("formid_loja");

    $('.resultado_frete_'+formid_loja).html('<img src="imagens/Ellipsis-1s-66px.gif">');


                $.ajax({
                    url: 'frete.php',
                    //url: '/xcommerce/public/purchastotal/'+$(this).val(),
                    type: 'POST',
                     data: formDetails_frete.serialize(),
        success: function (data) {
            // Inserting html into the result div
            $('.resultado_frete_'+formid_loja).html(data);
            $('.resultado_frete_'+formid_loja).fadeIn('slow').html(data);
        },
                    error: function (xhr) {
                        alert("Something went wrong, please try again");
                    }
                });


        });

Answer 1

You are only selecting the select. This is because the select that triggered the change is represented by $(this) in:

const formDetails_frete = $(this);

And then you’re doing:

formDetails_frete.serialize();

You should serialize the whole form with:

const formDetails_frete = $(this).closest("form");

The $(this).closest("form") will get the form where select, which triggered the event, is. This way, the entire form, including Hidden inputs, will be serialized.

You need to change the line:

var formid_loja=formDetails_frete.data("formid_loja");

To:

var formid_loja=formDetails_frete.data("data-formid_frete");

Which is the dataset form, which has the same value as the dataset select.