How to send variables via upload form

Question

I’m trying to send some variables that are in an upload form, the variables are not being sent, I already did a search here in the OS and there are some questions, but nothing that could help me. And in the search I did, I didn’t find anything either. What I have is a form like this:

<form id="uploadForm" action="" method="post" class="form-horizontal">					
   <fieldset>
	  <legend>Informe o arquivo</legend>
	  <div class="form-group">
		 <label class="col-md-2 control-label">Escolher arquivo</label>
		 <div class="col-md-10">
			<input name="userImage" type="file" class="btn btn-default" />						
		 </div>
	  </div>
   </fieldset>
   <div id="msgFoto" style="padding-top:10px;"></div>
   <div class="form-actions">
	  <div class="row">
		 <div class="col-md-12">						
			<button class="btn btn-primary" type="submit"> <i class="fa fa-save"></i> Importar </button>
		 </div>
	  </div>
   </div>
   <input type="hidden" id="IdProcesso" value="<?php echo $IdProcesso; ?>">
   <input type="hidden" id="Mes" value="<?php echo $Mes; ?>">
   <input type="hidden" id="Ano" value="<?php echo $Ano; ?>">
   <input type="hidden" id="Operadora" value="<?php echo $Operadora; ?>">
   <input type="hidden" id="IdUsuarioLog" value="<?php echo $IdUsuarioLog; ?>">								
</form>  

And my ajax, like this:

$(document).ready(function(e) {
    $("#uploadForm").on('submit', (function(e) {
        e.preventDefault();
        $.ajax({
            url: "pUploadImportacaoTelefoniaMovel.php",
            type: "POST",
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            dataType: "json",
            success: function(data) {                   
                if (data.codigo == "1") {
                    $("#msgInsert").html('×AVISO!' + data.mensagem + '');                          
                } else {
                    $("#msgInsert").html('×ATENÇÃO! ' + data.mensagem + '');
                }                   
            },
            error: function() {
            $("#msgInsert").html('×ATENÇÃO! Ocorreu um erro ao inserir o arquivo. Contate o suporte técnico.');
            }
        });
    }));
});

Any hints on how to get around this?

Answer 1

The problem is that the Hidden inputs are only with the attribute "id", and for the values to be sent in the request it is necessary that they have the attribute "name".

Something like that:

<form id="uploadForm" action="" method="post" class="form-horizontal">                  
   <fieldset>
      <legend>Informe o arquivo</legend>
      <div class="form-group">
         <label class="col-md-2 control-label">Escolher arquivo</label>
         <div class="col-md-10">
            <input name="userImage" type="file" class="btn btn-default" />                      
         </div>
      </div>
   </fieldset>
   <div id="msgFoto" style="padding-top:10px;"></div>
   <div class="form-actions">
      <div class="row">
         <div class="col-md-12">                        
            <button class="btn btn-primary" type="submit"> <i class="fa fa-save"></i> Importar </button>
         </div>
      </div>
   </div>
   <input type="hidden" name="IdProcesso" id="IdProcesso" value="<?php echo $IdProcesso; ?>">
   <input type="hidden" name="Mes" id="Mes" value="<?php echo $Mes; ?>">
   <input type="hidden" name="Ano" id="Ano" value="<?php echo $Ano; ?>">
   <input type="hidden" name="Operadora" id="Operadora" value="<?php echo $Operadora; ?>">
   <input type="hidden" name="IdUsuarioLog" id="IdUsuarioLog" value="<?php echo $IdUsuarioLog; ?>">                             
</form>