Pass jQuery variable inside Ajax

Question

I have the following Form:

<div class="row" id="importar">
    <form id="convidados">
        <input type="hidden" value="<?php echo $this->uri->segment(4); ?>" id="id_cliente" name="id_cliente">
        <div id="multiple_upload">
            <input type="file" id="uploadChange" onchange="checkfile(this);" />
            <div id="message">Selecione o Arquivo</div>
            <input type="button" id="botao_" class="btn btn-primary" value="Importar" disabled />
            <div id="lista">

            </div>
        </div>
    </form>
<div>

And the jQuery:

// importar 
$(function () {

    var form;
    $('#uploadChange').change(function (event) {
        form = new FormData();
        form.append('uploadChange', event.target.files[0]); // para apenas 1 arquivo
        //var name = event.target.files[0].content.name; // para capturar o nome do arquivo com sua extenção
    });

    $('#botao_').click(function () {
        var id_cliente = $("#id_cliente").val();

        $.ajax({
            url: basePath + 'ajax/importar_lista',
            data: {upload: form, id_cliente: id_cliente},
            processData: false,
            contentType: false,
            type: 'POST',
            success: function (data) {
                console.log("success");     
                $('#importar').html("<div style='padding: 100px;'><center><img src='../../../assets/img/importando-lista.gif'></center></div>");
                setTimeout(function(){
                    $('#importar').html(data);
                },3000);    
            }
        });
    });
}); 

I need to add the following variable to pass in ajax/import_list:

var id_cliente = $("#id_cliente").val();

How can I pass the id_cliente inside ajax? If I pass on as @Kayobruno’s response, I need to go over with var?

Answer 1

If you want to pass the form all put data: form, as it already has a global variable.

Another thing, in his new FormData it has to be like this:

form = new FormData($('form')[0]); 

You have to place the Form Element inside the FormData.

$('#botao_').click(function () {
    var id_cliente = $("#id_cliente").val();

    $.ajax({
        url: basePath + 'ajax/importar_lista',
        data: form,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function (data) {
            console.log("success");     
            $('#importar').html("<div style='padding: 100px;'><center><img src='../../../assets/img/importando-lista.gif'></center></div>");
            setTimeout(function(){
                $('#importar').html(data);
            },3000);    
        }
    });
});

And in normal PHP:

$idCliente = $_POST['id_cliente'];

HTML

<form id="convidados" method="POST" enctype="multipart/form-data">

Answer 2

You can pass as many parameters as you want on the date.

$('#botao_').click(function () {
  $.ajax({
    url: basePath + 'ajax/importar_lista',
    data: {form: form, id_cliente: id_cliente},
    processData: false,
    contentType: false,
    type: 'POST',
    success: function (data) {
        console.log("success");     
        $('#importar').html("<div style='padding: 100px;'><center><img src='../../../assets/img/importando-lista.gif'></center></div>");
        setTimeout(function(){
            $('#importar').html(data);
        },3000);    
    }
});

});